with a font-size of 32px, the span’s text will be 16 pixels.
Viewport Width (vw) and Viewport Height (vh)
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 as you resize the browser window, regardless of where it sits in your HTML code.
I find that using viewport width alone has a few notable drawbacks. There is no limiter on how large or small the text can appear. That makes it difficult to serve appropriately-sized text to users visiting from vastly different-sized viewports.
Say you set your font-size to 1.6vw. On a browser 1000 pixels wide, the text will be a nice, 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, I’ll show you how combining relative units can mitigate this.
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 the body element 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 2em would show the text as 32 pixels, twice the size of the body’s font size.
em lets you base all font sizes on your page relative to one element, such as the root or element. So, when the size of the parent element changes, all text set to em units will change responsively.
While using em units sounds like a quick fix for all your responsive font-size needs, keeping track of your intended font sizes can get tricky if you set many elements with different em values. Remember: One change in a parent element can magnify across nested child elements.
In the example below, try changing the CSS font-size value of the body element and seeing how the nested elements behave:
See the Pen Responsive Text: em units by HubSpot (@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, . If the font size of 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
One approach to mobile-friendly text, and my favorite approach, 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.
1. First, we’ll need to create breakpoints using media queries, a feature of CSS that collects information about the viewing device, including screen size. I recommend that you start by setting max-width media queries for common screen sizes.
See the Pen Untitled by HubSpot (@hubspot) on CodePen.
2. Now, define the text sizes you want to be associated with each defined media query. In the code below, the media query would be for a phone or mobile device with a screen size of 500px or smaller.
See the Pen Untitled by HubSpot (@hubspot) on CodePen.
3. Repeat this process as many times as needed for screens of different sizes. I recommend thinking about the sizes of most tablets, laptops, desktops, and smart TVs.
4. Test these breakpoints by accessing your site from different sized viewports and different devices. Make sure your text looks great at every size.
To better understand how breakpoints work, open this example in a new tab. This CodePen uses media queries to make fonts smaller on mobile and larger on desktop.
See the Pen Responsive Text: media queries 1 by HubSpot (@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 I’ve already said we want to avoid using pixels for our font sizes, 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.
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 HubSpot (@hubspot) on CodePen.
While this approach is quick and easy, it’s not perfect. The devices your users will use to access your site will come in all shapes and sizes. There’s no universal breakpoint that will work perfectly for all current devices. Plus, you need to consider future devices with new screen dimensions.
If you’re going to use this approach, you’ll need to regularly test your pages across different screens and adjust your breakpoints accordingly. But, breakpoints aren’t your only option. Below, I’ll explain the fluid text approach.
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.
If I use this method, I don’t need to specify screen dimensions in your CSS rules. Fluid text uses the vw unit. As I already mentioned, using vw by itself can cause problems. Text can be shown at unmanagable sizes (like my train ticket website). But with the addition of some basic math we can learn to control the behavior of vw.
To make fluid text, I’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. Test it out in a new tab.
See the Pen Responsive Text: calc() by HubSpot (@hubspot) on CodePen.
- Set the font size of your root element to 16px. Again, this is standard.
- Now, you can add the calc() function to make things fluid. With this code, the font inside 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.
- As always, make sure to test your website across a range of different-sized viewports and devices to make sure that the fluid design approach is giving your users appropriately sized text.
I’ll warn you that this approach can also have limitations and trade-offs. Unlike using breakpoints, your font sizes will be more approximate, and you’ll have less granular control of what font sizes your users see. Another challenge with this method is that I don’t have a ceiling for my font size, so wider screens can lead to text larger than desired.
A Bonus, Third Approach: Bringing Media Queries and Fluid Design Together
Now that I’ve covered both breakpoints and fluid design, I can tell you about my favorite approach: combining media queries with fluid design. I can add three media queries. One sets a minimum font size, another 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 HubSpot (@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 great place to start — just know this will take more effort to get exactly right.
Why Responsive Text and Font Size Matter
No matter what method you choose, your site needs responsive text to be readable across devices. Remember that best practices can change and that the future can bring new and unexpected changes to web development (and device sizes). Responsive text can keep you agile and help you future-proof your site.
So, for my next high-stakes train journey, I’m counting on developers like you to help keep my mobile web experience as readable as on my laptop.
Editor’s note: This post was originally published in June 2021 and has been updated for comprehensiveness.
