Responsive Font Size (Optimal Text at Every Breakpoint)
Matthew James Taylor21 February 2022
Responsive web design is not only about dynamic layouts, font size can be responsive too.
On small screens, there's not much room so it makes sense to use the smallest font you can without compromising readability. The consensus is mobile font size should be 16px (source, source).
On tablet and desktop, you have more screen real estate so you can afford to make the text size a bit bigger. A good font size for large devices is 18px - 20px.
So what's the best way to set these sizes?
How To Make Font Size Responsive
To make font size responsive in steps, set the base font size at each breakpoint. To create fluid text that smoothly changes size, use the calc() function to calculate a ratio between pixels and viewport widths, this will make the base font size grow at the correct rate relative to the screen width.
Here are some examples:
Stepped Responsive Font Size
To achieve a stepped font size, we simply set the exact base font size that we want for each breakpoint. Here's what that looks like in CSS:
html {
font-size: 16px;
}
@media (min-width:768px) {
font-size: 18px;
}
@media (min-width:1024px) {
font-size: 19px;
}
@media (min-width:1280px) {
font-size: 20px;
}There are two problems with this method:
- The font size is only optimal at particular breakpoints, in between it might feel too big or too small.
- It's verbose. We have to explicitly set the font size for each breakpoint which requires a lot of CSS rules.
Fortunately, there's a simpler way.
Fluid Responsive Font Size
Rather than setting the font size at each breakpoint, we can create a formula to calculate our font size relative to the screen width. We do that with the calc() function.
calc() is supported in all modern browsers so it's safe and reliable to use (source).
Here's how our font size formula looks in CSS:
html {
font-size: calc(15px + 0.390625vw);
}This formula calculates our font size as 15px plus 0.00390625% of the screen width. These values have been specifically chosen because they result in the perfect font sizes at every breakpoint:
Fluid font sizes per breakpoint
| Screen width | Font size |
|---|---|
| 320px (eg: iPhone 4 & 5) | 16px |
| 768px (eg: iPad portrait) | 18px |
| 1024px (eg: iPad landscape) | 19px |
| 1280px | 20px |
| 1536px | 21px |
| 1920px | 23px |
| 2560px | 25px |
This method is both simple and powerful.
Want an example? This website (that you're reading right now) uses exactly this method of achieving responsive font size. Adjust your browser window to see it in action!
Setting Relative Font Sizes with Responsive Text
When using responsive font sizes use rem units to specify any text that needs to be relative in size to your base font size.
Here's how that looks:
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.5rem;
}Using rems in this way will maintain the proportions between all font sizes so they always look good.
Summary
Setting a responsive font size is easy to do and it can make your website feel a lot more professional on every device.
Try it today.
Next up:
How to add CSS to HTML ›
Responsive Banner Ads ›
Web Design Articles
Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)
Web design
How to add CSS to HTML (With Link, Embed, Import, and Inline styles)
Web design
Responsive Columns: Build Amazing Layouts With Custom HTML Tags
Web design
