Fonts that resize with the browser

Sometimes we want the font of a site or a portion of a site to resize along with the images in it when a user resizes their browser, or sometimes even in the case of a fluid layout. For an example of what I’m talking about, see the example I’ve put together.

This is obviously an addition to a previous example I created for hero resizing (see the article at Resizable full width hero images). You’ll notice that the heading font in an <h2> tag stays at 24px and the paragraph text in an <p> tag stays at 16px as long as the browser window is at least 960px wide. Below that width the font sizes start to get porportionally smaller. Finally, even when the browser gets smaller than 320px everything stops resizing. How does this work?

Here’s how.

First we have to realize that there are two new CSS units that are supported in IE9+, and the other major browsers. These to units are: vw and vh for viewport width and viewport height, respectively.

Second we have to realize that with media queries we can specify different behaviour based on different media properties. In this case we will only use the width property of media on which to base our various stylesheets.

So lets start with the structure needed. I include the CSS within style tags here for brevity here, but you will likely want to move most of it to a style sheet:

  1. <h2>Font resizing using vw / vh units in CSS<h2>
  2.     ... ( the hero image content) ...
  3. <div style="text-align: center; min-width: 320px;">
  4.     <p>This is the site main content area<p>
  5. </div>

Here is the font sizing CSS that we use for browsers 960px and wider. Notice that in the media query we have simply specified all media and not put a width query on it. This way we can use this as our general stylesheet as well, for things that don’t change with browser width. And normally, of course, you’d specify as separate CSS file for this instead of including it inline, so it can be re-used and cached.

  1. <style media="all">
  2.     h2 {
  3.         font-size: 24px;
  4.     }
  5.     p {
  6.         font-size: 16px;
  7.     }
  8. </style>

The above doesn’t allow for font resizing. The next stylesheet does. Here we use a media query of all, with a max width of 959px (one pixel less than that for which the standard style sheet we specified above is built for):

  1. <style media="all and (max-width: 959px)">
  2.     h2 {
  3.         font-size: 2.5vw;
  4.     }
  5.     p {
  6.         font-size: 1.6667vw;
  7.     }
  8. </style>

So the <h2> will be size to 2.5% of the viewport’s width and the <p> to 1.6667%.

But if we leave it at that, you’ll notice that even though we might specify a min-width of 320px to the body or, as above, to a specific piece of content, the font size continues to reduce as the browser gets narrower than 320px. That is because the vw and vh units are relative to the viewport – the window of the browser, not the body of the page. That’s also the reason we specified a maximum font-width in the initial style sheet.

To fix this we need one final stylesheet, specified with yet another media query:

  1. <style media="all and (max-width: 320px)">
  2.     h2 {
  3.         font-size: 8px;
  4.     }
  5.     p {
  6.         font-size: 5.5px;
  7.     }
  8. </style>

Now we have a minimum font size, a maximum and (more or less) smooth scaling between the two. By the way, the more-or-less smoothness of the scaling depends entirely on the browser and OS it is running on.

Note that I have specified font sizes in px, not em or rem as many would suggest would be better. This is an example only, of course.

Finally, if you take a look at the actual source code of the example page I mention at the top, you’ll notice some slight differences – particularly in the pixel width used in the 959px query. Differences are due to other styling I have done on the page to illustrated the 960px content zone – adding 1px borders on the left and right.

By continuing to use this site, you agree to the use of cookies. See the Privacy Policy for more details.