Achieve Smooth Responsive Typography Using Only CSS

By February 21, 2015CSS

Having a responsive website is an absolute must these days, and we all know that. However, while columns, images, etc scale in a fluid way to look beautiful when viewing on a 27″ retina-display iMac to an iPhone 4 (if anyone still has those), responsive typography hasn’t quite caught up.  Until now!  I want to show you how to achieve very smooth responsive typography using only CSS so that font sizes are  based on the size of your browser window.  That said, let’s all get away from the herky-jerky type resizing based on media query breakpoints.   Cool?  Right on!

Check out this simple demo that I created so you can get a flavor of what we’ll be working on.

See Demo

How it Works

Shockingly, it’s pretty damn simple using the magic sauce that is CSS3.  Instead of using px, %, or em when defining the font-size, we’re going to use the viewport width (vw) or the viewport height(vh).  Let me shed some light on that.

1vw = 1% of the viewport width

1vh = 1% of the viewport height

1vmin = 1vw or 1vh, whichever one is smaller

1vmax = 1vw or 1vh, whichever one is larger

h1 {
font-size: 6vw;
or
font-size: 6vh;
}

 

While this is very cool, what I do recommend is setting up a media query breakpoint for mobile devices and setting a specific font-size.