Fluid font-size
This Sass mixin doesn't create just viewport-based font-sizes. The ratio between small font-sizes and large font-sizes is smaller at a smaller window width. So you don't have problems with line-breaks at large headlines on mobile devices.
Usage
After installing with npm install fluid-font-size
you can import it.
; .foo
This will create something like:
.foo
Wonder what the viewport-units-buggyfill
stuff is? It's a polyfill for viewport units. So basically you'll have IE9 support with it.
Min and max font-size
Minimum and maximum font-sizes are also supported. Yay! 🎉
.foo
Options
To change the intensity of the effect to influence the ratio between small and large font-sizes you can change the variable $fluid-font-size-ratio
.
;
To decrease the effect set it to an higher number than 1
. To increase the effect decrease it to something between 0
and 1
.