The Beginner's Guide to Responsive Text on the Web

with afont-sizeof32px, 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, onevwequals 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 yourfont-sizeto1.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 asvwand is less frequently used.

em

Theemunit is equal to the font size of the parent element. If thefont-sizeofbodyis16px, a child paragraph with afont-sizeof1emwould show the text as 16 pixels. A child paragraph with afont-sizeof2ewould show the text as 32 pixels, twice the size ofbody’s font size.

emis powerful because it lets you base all font sizes on your page relative to one element, such as the rootorelement. However, you might have issues with sizing if you set many elements with differentemvalues, since one change in a parent element can magnify across nested child elements.

In the example below, try changing the CSSfont-sizevalue ofbodyand seeing how the nested elements behave:

See the PenResponsive Text: em unitsby Christina Perricone (@hubspot) onCodePen.

rem

Therem(root em) unit is similar toem. But instead of basing the font size of the parent element,remis based on the font size of the root element,. If the font size ofis16px, all text usingremunits is sized relative to that 16-pixel font size. This allows you to scale text based on a single value without the magnification issues ofem.

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.

我们使用媒体查询,创建断点特点re 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. Tryopening this example in a new taband resizing your browser window to see the effect.

See the PenResponsive Text: media queries 1by Christina Perricone (@hubspot) onCodePen.

In the CSS tab, you’ll see two media queries. The first sets thefont-sizeof the paragraph to16pxif the viewport width is550pxor smaller, and the second setsfont-sizeto32pxif the viewport width is501pxor 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 rootfont-sizeto16px(the default on most browsers) and the child paragraph withemunits 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. Tryopening this example in a new taband resizing your browser window.

See the PenResponsive Text: media queries 2by Christina Perricone (@hubspot) onCodePen.

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

Influid 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 thevwunit. As mentioned, we run into problems when usingvwby 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 ofvw.

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

I'm a paragraph of fluid text. Change the width of your browser window and see how I react!

/* CSS */
html { font-size: 16px; }
p { font-size: calc(1rem + 1vw); }

First, we set the font size of the root element to16px. Again, this is standard. Then, we use thecalc()function to make things fluid. With this code, the font inside

will scale one-to-one with the viewport. The addition of1remensures 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 taband try resizing it yourself.

See the PenResponsive Text: calc()by Christina Perricone (@hubspot) onCodePen.

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.

下面是一个例子,看起来莱克阀门e. When the viewport is between 400 and 1000 pixels wide, the text will scale fluidly. Otherwise, the font size will be 1remon small screens or 1.75remon large screens.Try out the example below in a new tab.

See the Pen响应文本:流体与断点by Christina Perricone (@hubspot) onCodePen.

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 tricksis 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.

Originally published Jun 21, 2021 7:00:00 AM, updated August 23 2021