Hackernoon logo4 techniques for responsive font sizing with SCSS by@martijn.cuppens

4 techniques for responsive font sizing with SCSS

image
Martijn Cuppens Hacker Noon profile picture

Martijn Cuppens

Frontend developer

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.