Responsive font sizing techniques

Responsive font sizing techniques
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

As we wrote in our previous article Points to pixels converter before start with font sizing you have to know the base. But that’s not enough: you always have to be in trend and know the latest variants to simplify/optimize your work. That’s why our next material will teach you some responsive font sizing techniques with CSS. 

In original article with neat samples you will read about SCSS-mixins and fluid typography.

Resuming the core:

  1. Manual scaling will help you to establish perfect control over every font-size for every screen-width. But that’s a lot of work and it will make you bleed while trying to keep relation between all font-sizes
  2. REM-unit rescaling is very fast to implement and fluid font-sizes are quite impressive. From the other side, people tend to think mostly with pixels and not rem-units. So it might be somewhat complicated to switch
  3. Minimum-maximum based mixins considered easy to use. But developer must pass a minimum and a maximum for every font sizes to the mixin. And sometimes it’s a problem to find font sizes between the lower- and upper-range
  4. Automated font rescaling by the RFS-mixin. For this technique you only need to pass one value which makes your work pretty easy. Nevertheless it is hard to know the font-sizes at some point beneath $rfs-breakpoint

Try each of techniques and find what is most convenient for you.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

    Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
    Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
    Kharkiv Otakara Yarosha 22, 61000, Kharkiv, Ukraine