Design + CSS

Truly fluid typography

3 approaches, using vw units

Christine Vallaure
Oct 25, 2019 · 6 min read

Why viewport units

You are probably used to setting typography manually within breakpoints, which usually leads to a somewhat bumpy result. Fluid typography using viewport width (“vw”) automatically adjusts the font size to the width of the screen. Today we have a countless number of devices with different sizes and fluid typography helps you to create a more harmonious design, regardless of screen size. It also gives you infinite design flexibility when combined with new grid standards such as CSS Grid.

1. Basic approach: font-size=vw

You can use vw as a direct unit like px or em. Let’s see how this works with an example:

h1 {
font-size: 4vw;
}
// Base and fixed size for all small devicesh1 {
font-size: 20px;
}
// Fluid size for all screens, larger than 500px@media (min-width: 500px) {
h1 {
font-size: 4vw;
}
}
// You can do the same for a maximum size if you wish@media (min-width: 1500px) {
h1 {
font-size: 60px;
}
}

Try it out for yourself


2. advanced approach: implementation with calc()

with SASS or similar you can also use calc() to control the growth rate a bit more. So all we’re doing here is basically choosing a base size (20px in this example also works well with em, try it!) and then simply adding the percentage of change on top.

h1 {
font-size: calc(20px+2vw);
}
// fix base and smallest font sizeh1 {
font-size: 20px
}
//fluid font from 320px onwards@media (min-width: 320px) {
h1 {
font-size: calc(20px + 2vw);
}
}
//fix font size for large screens. Calculate this point@media (min-width: 1750px) {
h1 {
font-size: 55px;
}
}

Try it out for yourself

A step further: Adding even more control

You can add even more control over the exact rate of scale with calc with this technique by Mike Riethmuller. You will get more details in this article. The basic idea behind this is that you set your minimum font size and your maximum font size and also determine your desired screen size max and min and perfectly distribute the font in this area. You generally let it choose the perfect vw instead of passing it. However, you still need to add media queries that many examples simply ignore. It is a good approach if you are looking for a high degree of control and are willing to add some extra time and lines of CSS.

3. Pro Approach: SASS Mixin magic!

I came across this fantastic solution by Eduardo Boucas on CSS Tricks who created a SASS mixins that you can simply add to define minimum font-size, maximum font-size and a fallback (never to ignore!). What I love the most is that you can save the mixin in a separate file and then simply add this line to your layout or component file. Keeps your file nice and tidy.

h1 {
@include fluid-font(3vw, 20px, 55px, 35px);
}
@mixin fluid-font($responsive, $min, $max: false, $fallback: false) {   $responsive-unitless: $responsive / ($responsive - $responsive + 1);   $dimension: if(unit($responsive) == 'vh', 'height', 'width');   $min-breakpoint: $min / $responsive-unitless * 100;@media (max-#{$dimension}: #{$min-breakpoint}) {     
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
@if $fallback {
font-size: $fallback;
}
font-size: $responsive;
}

Try it out for yourself

To be taken into account when using vw units

  • Browser support and fallback: Browser support is pretty solid (91.3%), but if you’re dealing with a key element like typography, you definitely need a px fallback. You can simply add one simply like this:
h1 {
font-size: 20px; //fallback
font-size: 2vw;
}
Status: September 2019 via www.caniuse.com

Design + Sketch

The best collection of articles, tips, tutorials, and…

Christine Vallaure

Written by

Berlin based UX/UI designer with a passion for code www.christinevallaure.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

More From Medium

More from Design + Sketch

More from Design + Sketch

More from Design + Sketch

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade