Before reading on, you need to know what these things are:
1. Manual rescaling
.title {font-size: 25px;
@media (min-width: 800px) {font-size: 30px;}
@media (min-width: 1200px) {font-size: 40px;}}
// And continue doing this for every element
Cons:- A lot of work/code/testing- Hard to keep relation between all font-sizes (Titles may become too small to make a difference in size in relation to the text)
Pros:+ Perfect control over every font-size for every screen-width
2. REM-unit rescaling
2.1 Responsive REM-unit rescaling
html {font-size: 12px;
@media (min-width: 800px) {font-size: 14px;}
@media (min-width: 1200px) {font-size: 16px;}}
.title {font-size: 1.5rem;}
.body {font-size: 1rem;}
// And continue working with rem-font-sizes
2.2 Fluid REM-unit rescaling
html {font-size: 16px;
// Magic:@media (max-width: 1000px) {font-size: calc(12px + .4vw);}}
.title {font-size: 1.5rem;}
.body {font-size: 1rem;}
// And continue working with rem-font-sizes
Cons:- People tend to think in px, not in rem-units, you can however work with a mixin to convert px to rem.- (Limitted) testing needed to check if the font is scaled correctly- There is a linear relation between the font-sizes and this can be problematic on small screens, body-text may become to small or titles won’t be scaled small enough.
Pros:+ Very fast to implement+ Fluid font-sizes are so impressive, developers will keep resizing their screen all day while listening to Louis Armstrong’s What A Wonderful World
3. Minimum-maximum based mixins
Shamelessly stolen from https://codepen.io/dbox/pen/meaMba (Sorry Daniel Box)
@import 'path/to/fluid-type-mixin';
.title {@include fluid-type(28px, 52px);}
.body {@include fluid-type(14px, 20px);}
This generates this css:
.title {font-size: calc(28px + 24 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.title {font-size: 28px;}}@media screen and (min-width: 900px) {.title {font-size: 52px;}}
.body {font-size: calc(14px + 6 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.body{font-size: 14px;}}@media screen and (min-width: 900px) {.body{font-size: 20px;}}
Cons:- The developer must pass a minimum and a maximum for evey font sizes to the mixin. - Hard to know the font-sizes at some point between the lower- and upper-range
Pros:+ Straightfoward and easy to use
4. Automated font rescaling by the RFS-mixin
Shamelessly referring to a mixin I made myself: https://github.com/twbs/rfs
@import "~rfs/scss";
p {@include rfs(20);}
h1 {@include rfs(64);}
This generates this css:
p {font-size: 1.25rem;}
h1 {font-size: 4rem;}
@media (max-width: 1200px) {h1 {font-size: calc(1.525rem + 3.3vw);}}
Cons:
- You depend on a pre- or postprocessor like Sass, Less or Stylus or PostCSS.
Pros:
- Font sizes will rescale for every screen or device, this prevents long words from being chopped off the viewport on small devices
- RFS will prevent the font size from rescaling too small so readability can be assured
- Super easy to use, just use the
font-sizemixin (orresponsive-font-sizeproperty for PostCSS) instead of thefont-sizeproperty - The font sizes of all text elements will always remain in relation with each other