The Beginner's Guide to Responsive Text on the Web

When we think about web design, text might not be the first thing that comes to mind. After all, text is … well, text. As opposed to animations, color palettes, and funky layouts, text is just something we read, right?

The thing is, web text design is actually deceptively complex. Readable web text requires careful attention to things like font choice, colors, line spacing, and today’s topic, font size.

Back before smartphones and tablets, it was safe to assume that websites would only be viewed on desktop screens, in browser windows that were 1000-ish pixels wide. Of course, that’s simply not the case today. Over half of all internet traffic comes from mobile devices — that’s a lot of visitors turned away by a clunky reading experience if you neglect your font sizing.

Over the past decade, there’s been a push to make it easy for designers and developers to add responsive text, text which resizes appropriately based on the size of the user’s viewing screen. In this post, we’ll discuss two different approaches to making text desktop-friendly and mobile-friendly, with some examples so you can follow along.

Why use responsive text?

Responsive text is one way to make your website more usable and accessible across different screen sizes. While it’s easier to pick a static font size and apply it to all versions of your website, your visitors may have trouble reading your text content.

For example, when building a page for desktop, you may like using a font size of 32 pixels for your <h2> elements — your headings are large enough to stand out from your body text. But if you keep that same size on a mobile screen, those same headings are going to look huge and potentially distract readers.

The opposite is also true — text that looks perfectly readable on a smartphone or tablet can be unpleasant to read on a desktop due to its small size. The truth is that users have come to expect generally larger fonts on desktop websites and generally smaller fonts on mobile websites.

So, how do we go about making text responsive? We’ll have to make some changes in our CSS code, specifically to the font-size property, which sets the size of our text. The font-size property accepts pixel values, but there are better options if we want responsive text.

Relative Units

If you want to design web pages with responsive text, you should be familiar with relative units in addition to absolute units. Absolute units — such as px, pt, and in — are fixed and do not change size across page presentations.

Relative units, on the other hand, are not fixed. Instead, they’re sized based on a parent element or on the size of the viewport (i.e., the visible page area). This allows them to scale smoothly up and down with other page content as the screen size changes. Here are the most common relative units that you can use for responsive text:

Percentage (%)

You might have seen the percentage (%) unit before. It sizes an element as a percentage of its parent element. If you set an <img> width to 50% and place it inside a <div> with a width of 100px, the image will be 50 pixels wide.

Fonts work similarly — the percentage unit sets the font as a percentage of the parent element’s font size. If I assign font-size: 50% to a <span>, then place that span inside a <div> with a font-size of 32px, the span’s text will be 16 pixels.

Viewport Width (vw)

The viewport width (vw) unit is relative to the width of the viewport. More precisely, one vw equals 1% of the width of the current viewport. If you size your text with this unit, the text will smoothly grow and shrink proportionally as you resize the browser window, regardless of where it sits in your HTML code.

The main drawback of using viewport width alone is that there is no limiter on how large or small the text can appear, which means that text may look ridiculously large or small when you switch devices. Say you set your font-size to 1.6vw. On a browser 1000 pixels wide, the text will be a nice and readable 16 pixels large. However, on a 300-pixel mobile screen, the same text would be only about five pixels, which isn’t readable without zooming in. Later on, we’ll see how combining relative units can mitigate this.

Viewport Height (vh)

Similar to viewport width, viewport height (vh) is relative to the height of the viewport. This unit is subject to the same sizing issues as vw and is less frequently used.

em

The em unit is equal to the font size of the parent element. If the font-size of body is 16px, a child paragraph with a font-size of 1em would show the text as 16 pixels. A child paragraph with a font-size of 2e would show the text as 32 pixels, twice the size of body’s font size.

em is powerful because it lets you base all font sizes on your page relative to one element, such as the root <html> or <body> element. However, you might have issues with sizing if you set many elements with different em values, since one change in a parent element can magnify across nested child elements.

In the example below, try changing the CSS font-size value of body and seeing how the nested elements behave:

See the Pen Responsive Text: em units by Christina Perricone (@hubspot) on CodePen.

rem

The rem (root em) unit is similar to em. But instead of basing the font size of the parent element, rem is based on the font size of the root element, <html>. If the font size of <html> is 16px, all text using rem units is sized relative to that 16-pixel font size. This allows you to scale text based on a single value without the magnification issues of em.

Now that we understand relative units, let’s see how we can implement them with two different approaches: responsive text set by breakpoints, and fluid text.

Method 1: Responsive Text With Breakpoints

Our first approach to mobile-friendly text, and the easier one to get right, involves setting breakpoints in CSS. Breakpoints are specific viewport widths that, when reached, change the page layout in some way. In our case, breakpoints will trigger a font size change.

We create breakpoints using media queries, a feature of CSS that collects information about the viewing device including screen size. The media query gets the viewport width and sizes the page’s fonts based on the rules you write.

Here’s an example that uses media queries to make fonts smaller on mobile and larger on desktop. Breakpoints are usually set in accordance with common mobile screen sizes. For simplicity, we’ve added just one here. Try opening this example in a new tab and resizing your browser window to see the effect.

See the Pen Responsive Text: media queries 1 by Christina Perricone (@hubspot) on CodePen.

In the CSS tab, you’ll see two media queries. The first sets the font-size of the paragraph to 16px if the viewport width is 550px or smaller, and the second sets font-size to 32px if the viewport width is 501px or wider. Therefore, the breakpoint here is 550 pixels wide.

Since we’re trying to get away from pixels, let’s now create responsive fonts using relative units. Here I’ve set the root font-size to 16px (the default on most browsers) and the child paragraph with em units instead of pixels. That way, if a user wants to change the font size of the root element for better accessibility, the paragraph font size will adjust with it. Try opening this example in a new tab and resizing your browser window.

See the Pen Responsive Text: media queries 2 by Christina Perricone (@hubspot) on CodePen.

While this solution is relatively simple, it’s not perfect. Of course, devices come in all shapes and sizes, and there’s no universal breakpoint that will work perfectly for all current devices, not to mention potential future devices with new screen dimensions. If you’re going to follow this approach, you’ll need to regularly test your pages across different screens and adjust your breakpoints accordingly.

Or, you could try another approach, fluid text. We’ll discuss that next.

Method 2: Fluid Text

In fluid web design, the size of page elements is set proportional to the width of the screen or browser window. While breakpoints only change the font size at defined increments, fluid text scales continuously as the screen dimensions change to fit the viewing device. Fluid design has the advantage of not needing to specify screen dimensions in your CSS rules.

Fluid text uses the vw unit. As mentioned, we run into problems when using vw by itself, as it can cause text to blow up massively or shrink to microscopic levels. With some basic math, however, we can control the behavior of vw.

To make fluid text, we’ll be combining vw and rem units using the CSS calc() function. calc() lets us conduct arithmetic operations in CSS, even between different units. Here’s the HTML and CSS:

First, we set the font size of the root element to 16px. Again, this is standard. Then, we use the calc() function to make things fluid. With this code, the font inside <p> will scale one-to-one with the viewport. The addition of 1rem ensures that the text will always be at least 16 pixels, even when the viewport is zero pixels wide. This keeps the text at a readable size on all screens. Open this example in a new tab and try resizing it yourself.

See the Pen Responsive Text: calc() by Christina Perricone (@hubspot) on CodePen.

However, this method comes with trade-offs as well. Unlike using breakpoints, your font sizes will be more approximate and not exactly defined. Another drawback to this method is that we don’t have a ceiling to our font size, so wider screens can make text larger than desired.

One compromise is to combine media queries with fluid design. We can add three media queries: one to set a minimum font size, one to set a maximum font size, and one in between that applies fluid scaling.

Below is an example of what that might look like. When the viewport is between 400 and 1000 pixels wide, the text will scale fluidly. Otherwise, the font size will be 1 rem on small screens or 1.75 rem on large screens. Try out the example below in a new tab.

See the Pen Responsive Text: fluid with breakpoints by Christina Perricone (@hubspot) on CodePen.

With a bit of tweaking, this method will work well enough for most websites. However, we’re still just scratching the surface of what’s possible with fluid text. With some more math, you can be even more precise with your font sizing. If you want to delve more into the topic of fluid typography, this guide from CSS tricks is a good place to start — just know this will take more effort to get exactly right.

Making Text Readable

In this post, we’ve summarized two ways to approach responsive web text, the first being more precise but the second being more adaptable. In the end, it’s up to you to decide which of these methods works better for your content, or whether it’s worth taking a more advanced approach.

While it’s not the most glamorous aspect of web design, appropriate font sizing is crucial. If your text is hard to read, your website will look unprofessional and leave a negative impression on visitors. So, take the time to apply either of these methods, then test your site on different screens — it can make the difference between a conversion and a bounce.