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.