Skip to content

4 techniques for responsive font sizing with SCSS

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://blog.intracto.com/rfs-automated-scss-responsive-font-sizing

@import 'path/to/configuration';
@import 'path/to/rfs';p {
@include rfs(20);
}h1 {
@include rfs(52);
}

This generates this css:

.title {
font-size: 1.875rem;
}
@media (max-width: 1200px) {
.title {
font-size: calc(0.975rem + 1.2vw);
}
}.body {
font-size: 1.25rem;
}
@media (max-width: 1200px) {
.article__content {
font-size: calc(0.85rem + 0.53333vw);
}
}

Cons:
- Hard to know the font-sizes at some point beneath $rfs-breakpoint

Pros:
+ Developers tend to be lazy, so this might be something very interesting since you only need to pass one value.

4 techniques for responsive font sizing with SCSS was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.

0
sfy39587p00