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:
- 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
- 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
- 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
- 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.
