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