Responsive Fonts

See update of this article written back in March at the bottom.

When I started using responsive design a few years ago, I often wondered why there wasn’t an easier way to make fonts responsive without having to do so many media queries. Of course, there is the problem of fonts becoming too large or too small to read, but it seemed like there should be some solution to allow fonts to grow and shrink more seamlessly without the big jumps in size at different break points. Well, today as I read an article on zellwk.com, I finally got my answer.

He suggests using this CSS:

html { font-size: calc(112.5% + 0.5vw) }

Using the calc() property, we can gain finer control of the font size at different viewport widths. I implemented this right away on my own site. You can see examples of this in use in his article or, if you’re reading this on a desktop, trying changing your browser window size and see it in action right here.

Update 9/17/16: Just read this article that says I should be changing the line height at the same time. Brilliant!
http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/

Here’s the new code you should also be adding:

line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));