Responsive typography

This article is going to cover 3 common methods to create responsive typography for your website. Responsive typography is one of the core elements to a responsive website, it is about sizing your fonts as the website resizes itself. This is necessary to keep your content inline with the UI design, and that it doesn't break the layout of your website.

The 3 methods covered are namely media-queries, CSS clamp, and CSS calc. Here's a codepen that demo the 3 methods:

You may want to open the codepen in another window to play around with the viewport size (resizing the browser) to see how the content scale along the viewport, and observe the differences between the 3 methods.

media queries

Using media queries to scope the styling of an element is one of the most common method, as it is one of the earliest available CSS feature. It has the best browser support. You would define a breakpoint, and the styling for an element once the viewport is past the breakpoint.

.block {
    width: 50%;
}

@media all and (max-width: 800px) {
    .block {
        width: 100%;
    }
}

The above code would set .block element's width to 50% once the screen is above 800px, and 100% while it is below 800px.

similarly we can use this technique to set the font sizes of our content.

h1.title {
    font-size: 5rem;
}

@media all and (max-width: 800px) {
    h1.title {
        font-size: 2.5rem;
    }
}

This would set .title to 5rem when screen is above 800px, and 2.5rem while below 800px.

clamp()

CSS clamp function allow you to define a range of values, ie. the minimum value, current value, and maximum value of a property. With this in mind, we can apply a responsive view unit as the current value that allows the font to size according to viewport, then set a minimum and maximum font size to keep it within an acceptable range that works with your UI design.

h1.title {
    font-size: clamp(2.5rem, 8vw, 5rem);
}

This would set .title to be 8% of the width of your viewport, until 8vw is smaller than 2.5rem, then it would anchor to 2.5rem, or when 8vw is bigger than 5rem, it would stop growing at 5rem. This essentially means that .title will be within the range of 2.5rem and 5rem, while fluidly scaling according to the size of the viewport.

calc()

With CSS calc function you can write a math formula for your element's font size sizing behavior. The suggested formula for responsive font-size is a minimum absolute value plus a percentage value to create a responsive font size. ie. min + viewport size. The calculated outcome should work with your UI design.

Caution when using this method, as there isn't a maximum size for the font-size, but we can switch the percentage value to use vmin instead of vw to help limit it's growth.

h1.title {
    font-size: calc(1rem + 4vw);
}

This would set .title to 1rem + 4% of your viewport width. In other words, .title will never be smaller than 1rem while it fluidly resize itself accordingly.

Conclusion

Master these 3 methods and you'll create the next perfect responsive website. They're not methods that can only apply to font-sizes of your content, but also every part of your website. You may also mix media queries with either clamp and calc for more advance and intricate sizing behavior. Happy coding! 🥳