Responsive Text: Making Your Font Look Great on Every Device [+CSS & HTML Tips]

Written by: Jessica Rose
Book titled

25 FREE HTML & CSS HACKS

Tangible tips and coding templates from experts to help you code better and faster.

Download the Free Guide
man creates css responsive font size for a website

Updated:

Published:

Last year, responsive web design (or, more accurately, lack thereof) almost ruined my vacation! That’s right, I finally went on a trip I’ve been planning for years. I booked my hotel and train rides before I left on my laptop. All I needed to do was show up and have a great time, right?

I showed up early for my first in-country train ride, and there was a problem with my ticket. I headed to the train company’s website on my phone and was treated to a giant wall of unreadable text. I couldn’t use the website properly because it was designed for big screens.

Download Now: 50+ Excel Hacks [Free Guide]

While you might not have had a travel disaster, almost all web users will have bumped into problems with websites that aren’t responsive. Below, I’ll share how to make your site user-friendly with responsive text. Let’s dive in.

Table of Contents

Why use responsive text?

When I surf the web, I use my laptop, phone, desktop, tablet, and sometimes my TV. Each screen is a different size. To ensure your content is readable, you need to make sure that your text is responsive or capable of changing size to fit your user’s device.

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

The opposite is also true — text that looks perfectly readable on a smartphone or tablet can be too small to read on desktop. When we’re selecting text sizes, developers need to think critically about how readable these sizes will be on different screens.

So, how do we go about making text responsive? We’ll have to make some changes in our CSS, 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 I can use to create responsive text.

Relative vs Absolute Units

One of the quickest ways to create responsive text is shifting from absolute units to relative units. You likely learned about relative and absolute units when you were learning HTML, but let’s review each term briefly.

  • Absolute units are units of measurement that are fixed; they don’t change. An offline example of an absolute unit of measurement would be a meter. A meter of wallpaper will never change. Absolute units include px, pt, and in.
  • Relative units, on the other hand, are sized based on a parent element or on the size of the viewport (i.e., screen size). This allows them to scale smoothly up and down as the screen size changes.

If you want to design web pages with responsive text, you’ll need relative units. Here are the most common relative units that you can use for responsive text.

Percentage (%)

You might have seen the percentage (%) unit before. It sets the size of an element to 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. This is because it is half the size (50%) of the 100-pixel parent element div.

Fonts work in the same way. 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) 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 <html> or <body> 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:

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.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance

    Download Free

    All fields are required.

    You're all set!

    Click this link to access this resource at any time.

    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.

    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.

    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.

    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.

    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.

    1. Set the font size of your root element to 16px. Again, this is standard.
    2. Now, you can add 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.
    3. 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.

    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.

    Free Guide: 25 HTML & CSS Coding Hacks

    Tangible tips and coding templates from experts to help you code better and faster.

    • Coding to Convention
    • Being Browser-Friendly
    • Minimizing Bugs
    • Optimizing Performance

      Download Free

      All fields are required.

      You're all set!

      Click this link to access this resource at any time.

      Related Articles

      Tangible tips and coding templates from experts to help you code better and faster.

        CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

        START FREE OR GET A DEMO