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.

All vw is, is a percentage of the screen width. So:

1vw = 1% of the viewport width

e.g. the viewport is 1400px wide, so if we set the font to font-size: 8vwthis would be 1400px * 0.08= 112pxfont size

There are also vh (viewport height) vmax and vmin, but we don’t need them today, just be aware of their existence.

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:

So that’s basically what it does. It simply calculates the font size for each width. At 1000px width the font is 1000px * 4% = 40px

However, especially with larger vw values, the font quickly gets out of control and becomes too small for mobile devices and too large for desktop screens. No problem, we can fix it with a simple media queries. You can calculate the breakpoint as follows:

To find the viewport size (and thus the breakpoint) at which 4vw equals font-size:20px;, I simply calculate: 20/4*100=500. So I only want to activate my vw units from 500px and fix everything at the bottom. Then simply do the same for max-width if you need it.

So this is basically what it does:

Done! So this is the most basic, quite a lot to type, yet very solid way to use vw to make your font more fluid.

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.

Depending on font-size and project needs, you might want to specify the minimum and maximum size as well:

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.

So in this example we declare the font as liquid with 3vw (as you know, the larger the number, the faster it grows), but set a minimum font-size of 20px and a maximum font-size of 55px with a fallback of 35px for non-supporting browsers. The mixin calculates the breakpoints for me. Playing around with font sizes and scaling rates is also very easy.

So this is basically what it does:

this is the complete mixin that works in the background, just copy and paste into your SASS and you’re ready to go.

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:
  • Note that many of these can cause accessibility problems. For example, if users have set a default font size, it will be overwritten. I only use fluid typography for main headlines and subheadings to maintain the appearance of the page. All copies are stored in a solid 16px format, with the browser default settings. Still not ideal, it has to be said.

Design + Sketch

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

Christine Vallaure

Written by

Berlin-based UX/UI Designer with a passion for code. Currently creating www.moonlearning.io an online learning platform. Sign up for more!

Design + Sketch

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

Christine Vallaure

Written by

Berlin-based UX/UI Designer with a passion for code. Currently creating www.moonlearning.io an online learning platform. Sign up for more!

Design + Sketch

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store