An introduction to responsive font-sizes

Responsive font sizes can be enabled by using viewport relative units. By combining a base size (1em) and a viewport-related unit (vmin, or viewport-minimum of the smallest side).

#small {
	font-size: calc(1em + 1vmin);
}

#medium {
	font-size: calc(1em + 2vmin);
}

#large {
	font-size: calc(1em + 3vmin);
}
<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

Combining these with media queries can enhance the size since you can apply a larger default to these sections, for example a large screen media query can look like this:

Notice the sudden increase when your screen size becomes larger than 700px? You can use this method to pinpoint sizes while maintaining a responsive layout for your fonts.

How they work

One unit on any of the three values is 1% of the viewport axis. “Viewport” == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.

For use with font-size, I guess it’s one “letter” that takes on that size, but as we know, in non-mono-spaced fonts the width of a letter is rather arbitrary. I find you just need to tweak around with the values to get it how you want it. Which is basically what we do anyway, right?

• 1vw = 1% of viewport width
• 1vh = 1% of viewport height
• 1vmin = 1vw or 1vh, whichever is smaller
• 1vmax = 1vw or 1vh, whichever is larger

Browser Support

IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ – Supported

Chrome 20-34, Safari 6 – Supported but has repaint issue

There are a couple of other specific cross-browser weirdnesses with them, documented on Can I Use.

Using the viewport unit, you can adjust headlines as well as body text. Implementing viewport commands follows a similar process to the use of rem units with media queries – both units are relative. In the following snippet of code, the main text (p) and the headlines (h1, h2, h3) would be displayed as responsive text:

p {font-size: 2vmin;}

h1 {font-size: 5vw;}

h2 {font-size: 4vh;}

h3 {font-size: 3vmin;}

This CSS declarations determine that the body text (p) occupies 2% of the window width or height, depending on which value is smaller (font-size: 2vmin). This ensures that the font retains the same ratio to the browser window, even with smaller browser windows.

The size of the first headline (h1) is always 5% of the window width (font-size: 5vw), while the second (h2) amounts to 4% of the window height (font-size: 4vh). The value 3vmin determines that the third and final headline (h3) is always 1% bigger than the main text, since this has the value of 2vmin. As long as the browser window’s proportions stay the same, these 4 CSS commands establish the same size ratio between the font and three headlines – regardless of the size of the browser window.