In 2023, responsive design has become a cornerstone of modern web development. It is no longer just a feature that is nice to have; responsive design has become a fundamental requirement for modern web development.
Its importance stems from the evolving landscape of technology and user expectations. In today’s world, internet access is no longer limited to traditional desktop computers. Therefore, responsive design addresses the need for websites to function seamlessly across several devices, screen sizes, and resolutions.
One of the essential elements of responsive design in 2023 is font size. CSS font sizes play a pivotal role in modern web development, shaping the aesthetics, readability, and UX of websites. In an era where user engagement and accessibility are paramount, the careful management of font sizes is very important.
In this article, we’re going to be doing a deep dive into the most fundamental elements of modern responsive typography. We’ll be looking at font size, media queries, and fluid typography, as well as the best practices of modern responsive design.
Jump ahead:
We’ve briefly talked about how CSS font sizes contribute to the visual appeal of a website while impacting the overall design and conveying the website’s tone and personality. Now, let’s look at the most common units for CSS font sizes.
Perhaps the most popular font size unit, pixels represent a fixed size in actual screen pixels. They’re not responsive and they maintain a consistent size regardless of the device or screen size:
font-size: 16px;
Pros:
Cons:
The em unit is relative to the font size of the parent element, so if an element’s font size is set to 10px, 1em of its children elements would be equivalent to 10px:
font-size: 1.5em; /* 1.5 times the font size of the parent element */
Pros:
Cons:
The rem unit is also relative to font size but is based on the root element’s font size (usually in px). This root font size is typically defined in the <html> element of the CSS:
font-size: 1.2rem; /* 1.2 times the root element's font size */
Pros:
Cons:
Percentage units can also be used for font sizes. When applied to font sizes, percentages refer to the font size of the parent element. A font size of 100% is equivalent to the parent element’s font size:
font-size: 120%; /* 120% of the parent element's font size */
Pros:
Cons:
There are a few other units like vw, vmin, and vmax that serve as font size units, but those are less important than the above four units. The recommended unit to use these days is rem, as it’s easier to scale globally.
Another great element of responsive designs are media queries. Media queries are a CSS feature that allows you to apply different styles to a webpage based on certain conditions (usually screen size) of the device being used to view the page. Because media queries allow websites to adapt their layout and appearance to different screen sizes and devices, most people can say that media queries birthed responsive design.
Media queries work by specifying conditions or criteria that must be met for the associated CSS rules to be applied. These conditions are based on factors like the viewport width, height, device orientation, device resolution, and much more. Once these conditions are met, whatever CSS rule is stated will then be applied, and if the conditions switch again, the design goes back to the default.
Here’s a basic syntax of a media query:
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
In the above example, the condition (body {background-color: red;) inside the media query will only be applied when the viewport width of the device is 600 pixels or less.
Fluid typography is a web design concept that involves adjusting the font size of text elements based on the viewport width or device characteristics. Imagine letters that can grow bigger or smaller depending on the size of the screen you’re using, whether it’s a big computer or a small phone. This helps make sure the words on a website are always easy to read, no matter where you’re looking at them from. Just like magic, the letters change their size to fit the screen perfectly!
Read more about fluid typography here.
Using the CSS calc() function: The calc() function in CSS allows you to perform mathematical calculations within property values. This functionality is useful for creating dynamic styles that adjust based on various factors, such as screen sizes or user interactions.
In fluid typography, we can use the calc() function to make our fonts fit different screen sizes like this:
html {
font-size: 14px;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(14px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 800px) {
html {
font-size: 30px;
}
}
The code above simply scales the font size from a minimum of 14px (at a 320px viewport) to a maximum of 32px (at 800px viewport). Here’s a demo of this code example:
See the Pen
Using calc for fluid photography by fimber elems (@Fimbosky1)
on CodePen.
CSS viewport units (vw, vh): Using the vw (viewport width) and vh (viewport height) units in CSS for fluid typography can help create text that adjusts based on the dimensions of the user’s screen. We used the vw unit in the code above. Here’s how you can apply fluid typography using these units:
body {
font-size: calc(12px + 1vw); /* Fluid font size based on viewport width */
line-height: calc(1.2em + 0.5vh); /* Fluid line height based on viewport height */
}
JavaScript-based approaches: There are two JavaScript-based approaches to fluid typography. The first is to use JavaScript to dynamically adjust the font size based on the window’s resize event. For example, say the font size is set to 16px, and you give the target text an id of “fluid-text”. We can enable fluid typography like this:
<script>
const fluidText = document.getElementById("fluid-text");
function updateFontSize() {
const viewportWidth = window.innerWidth;
const fontSize = 16 + viewportWidth * 0.01; // Adjust the factor as needed fluidText.style.fontSize = `${fontSize}px`;
}
window.addEventListener("resize", updateFontSize);
updateFontSize(); // Initialize font size on page load
</script>
You could also use a JavaScript library FitText.js, FlowType.js, or Lettering.js to easily apply fluid typography to your project with zero stress.
Font scaling techniques refer to various strategies used in web design to adjust the size of text elements to create a responsive and visually appealing layout across different devices and screen sizes. These techniques ensure that text remains readable and maintains a harmonious design no matter whether users are viewing content on large desktop monitors, tablets, or small smartphone screens.
One of the most common font scaling techniques is using the @supports CSS rule. The @supports rule allows you to apply styles based on whether a particular CSS property or feature is supported by the user’s browser.
You can use the @supports rule to check if the browser supports font scaling techniques like viewport units (vw and vh) or the calc() function, and apply specific styles accordingly. Here’s an example of the @supports rule in action:
Learn more →/* Fallback styles for browsers that don't support font scaling */
body {
font-size: 16px;
}
/* Apply styles only if the browser supports viewport units */
@supports (font-size: 1vw) {
body {
font-size: 4vw;
}
}
/* Apply styles only if the browser supports the calc() function */
@supports (font-size: calc(1px + 1vw)) {
body {
font-size: calc(4px + 2vw);
}
}
In this example, the @supports rule checks if the browser supports font-size: 1vw and applies a font size of 4vw for browsers that do. Similarly, it checks if the browser supports the calc() function with font-size: calc(1px + 1vw) and applies a more complex calculation for font size in supported browsers.
There are several other CSS properties and features related to font scaling, including:
font-size-adjust: Used to adjust the font size of a text element based on the aspect value of a font’s lowercase lettersfont-stretch: Allows you to adjust the width of a font’s charactersfont-feature-settings: Allows you to enable or disable OpenType font features. Some fonts offer features that can influence font scaling, such as alternative glyphs for certain charactersReadability and accessibility are crucial when it comes to font sizing in modern web design. Proper font sizing ensures that content is easy to read and understand for all users, including those with visual impairments or different device capabilities. By prioritizing readability and accessibility in font sizing, you’ll create a positive user experience and make your content accessible to a broader audience.
Testing and optimizing font sizes across various devices and screen resolutions is crucial to ensure that your content remains readable and visually appealing for all users. As part of responsive design, responsive typography helps maintain a balance between different design elements on various devices, so it’s important that font sizes are appropriately scaled across devices to contribute to this design.
calc() function with viewport units for more complex font size calculationsIf you’ve read up to this point, you now have a solid understanding of all the elements of responsive typography. We covered basic concepts like font size units and media queries, and went on to more advanced concepts in fluid typography and font scaling techniques. It’s important to use responsive font sizing to improve user experience, as it gives your users a good first impression, while ensuring readability and consistency.
All of the above techniques work perfectly, so feel free to try them all before choosing the technique that suits your style. Personally, I use media queries to implement responsive typography most times, but that’s just a personal preference.
See you in the next one!
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
With ResizeObserver, you can build aesthetic React apps with responsive components that look and behave as you intend on any device.
Explore React Tabulator to create interactive JavaScript tables, easily integrating pagination, search functionality, and bulk data submission.
This tutorial will explore the application of heatmaps in JavaScript projects, focusing on how to use the Heat.js library to generate them.
Eleventy (11ty) is a compelling solution for developers seeking a straightforward, performance-oriented approach to static site generation.
5 Replies to "The elements of responsive typography"
Arrived from a Panda email. Good post, good information and of interest to me. Following along and looking to make sense of the formula. For the most part, everything is well explained. But there’s a pivot and the flow between concepts breaks for me. You twice show the formula outside of the css calc context, once with logical concepts, and then again with pixels. When you then move to the css calc context, you note to switch to rem/vw, but mention nothing about the way other information in the equation changes, or else I’ve missed it. I don’t follow where the “… – 20rem” comes in, or the “90 – 20”. How are those numbers calculated from the formula that uses pixels? It might be clearer in one of the references you link to, but it was a break in the flow of information for me. Thanks for writing!
@JessicaChan. Great article! I was struggling to find a comprehensive and practical article about responsive typography up until I stumbled upon your piece. You basically nailed it! I really appreciated how you spent some time defining the basic concepts involved, the practical implementations of some solutions, their pros and cons, and yes, thank you for clarifying that mathematical formula. This article has been an insane relief for me and I feel more confident exploring other advanced concepts around this subject.
I personally think I will implement some fluid typography with breakpoints: I like having more control and I feel the mixin you used in one of your example makes it bearable enough!
One detail confuses me in the translation to rem, I don’t know if it is meant or if it’s a typo: isn’t 414px equal to 25.8rem, roughly?
Thanks again for this article!
I’ve been advocating proportional design with our team for quite some time. We’ve run into the issue of accessibility in particular when users zoom instead of adjusting browser settings. I looking into doing something like this instead of setting root to 5vw or some other value. Thanks.
Very good post! Thanks for that. In fact, I don’t see the point using the third approach. If in the end again you need to add medai-queries to really put the limits… Why blowing the formular? The css-code in the second approach looks much easier to me (and propably to any thrid party reading the code) and does exactly the same thing.
As a designer, it was so helpful for me. Font is most important in any type of design and I am learn about fonts from last three year. Thanks for sharing this.