I don't know about you, but I love to look at sites like Medium, the new Google Fonts site, and any other site that has incredible typography. It feels good when a site is able to bring that familiar feel of print to the web. Furthermore, their amazing ability to control the multitude of typographic nuances like kerning (letter-spacing), leading (line-height) and of course font sizes that end up being perfectly balanced. With browser support for vw and vh at an acceptable level, I figured it would be fun to dive into the various methods of achieving typographic bliss.

The :root Method

Lets start with the method I'm currently using myself. Mike Riethmuller wrote a post titled Precise control over responsive typography. This method sets out to give developers control of their typography while utilizing vw unit. By themselves this unit of measurement don't really offer us a whole lot of control. If we were to just do something like this:

h1 {
  font-size: 5vw;
}

We'd get massive headings on larger browsers, and tiny ones on smaller browsers. The next step here would be to add media queries for various breakpoints and adjust the font size. Furthermore, the scaling of the font would not be smooth, instead at that breakpoint the text would jump from one size to the next. Not ideal.

calc() the :root

The beauty of Mike's method lies in setting the global font size, and calculating it based on the vw. Once you've done this, you can utilize ems on your heading or paragraph tags very consistently throughout your site. Here's Mikes CodePen demo explaining his method:

See the Pen Precision responsive typography by Mike (@MadeByMike) on CodePen.

Since Mikes post, a few variations of this method have popped up.

Variations

Zell Liew has a great blog post that dives into the same basic principal of setting the font size globally (on the html element in his case). However in Zell's variation, he sets the font size once, and then utilizes percentages of that base font size to calculate the responsive font size based on viewport units. Check out this CodePen demo to see how he's handling the calculations:

See the Pen Cross-browser fluid type by Indrek Paas (@indrekpaas) on CodePen.

The great thing about both of these methods is that since the global font size is set dynamically you can create vertical rhythm by utilizing ems or even a unitless line height.

And of course, Smashing Magazine has a pretty solid variation of this method written up as well.

Molten Leading

Let me start by saying, my dad joke sense of humor automatically makes me love this method. Much like the :root method and it's variations I spoke about above, this one utilizes some calculations to set the line-height. Tim Brown has a lovely blog post entitled Molten leading (or, fluid line-height) that started the conversation around this notion. Shortly after Mr. Mat Marquis built a small jQuery function that utilized the calculations from Tim's post to set a fluid line-height.

Though the post and the plugin are a bit dated, I still feel like the questions asked here are thought provoking ones. And perhaps with the emergence of viewport units, a calculation can be made in conjunction with the calculations made in the :root method to give us even more granular control over the vertical rhythm of our typography.

Other Resources

I also want to give a shoutout to this beautiful article from Robin Rendle entitled The New Web Typography. He goes into great depth about the typographic decisions we make on the web, and the consequences that they yield.

Wrap it up

From what I can tell with a little bit of math, and some magic from viewport units, we as Front-End (Frontend, Front End) Developers are now able to think critically about the typography on our sites. Instead of just attributing random units of measurements to our headings, we're able to create some very well thought out and mathematically sound typography. Thanks for reading!