Auto Sizing Font-sizes

What: Changing the font-size and the line-height based on the width of the viewport but without using media queries, to create a smoother experience (with less work).

How: By making both the font-size and the line-height relative to the viewport width, like so:

body {
    font-size: calc(1em + 1vw);
    line-height: calc(1.2em + 1vw);
} 

You can set a base font-size in the HTML, the codepen in the article sets it at 12px. Which is, I guess, a mobile first approach.
There is another method mentioned in the article too.

Where: Molten leading in CSS by Chris Coyier @ CSS-tricks

Thoughts: I might want the line-height to be a lot bigger.


Photo of the Geuzenkade in Amsterdam by me

Leave a Comment