4 techniques for responsive font sizing with SCSS

Before reading on, you need to know what these things are:

• SCSS-mixins
• Fluid typography

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-size mixin (or responsive-font-size property for PostCSS) instead of the font-size property
• The font sizes of all text elements will always remain in relation with each other

Download RFS on github or install with npm.