Matthew James Taylor Matthew James Taylor

Web design ›

Responsive Font Size (Optimal Text at Every Breakpoint)

21 Feb 2022 — Updated 2 Sep 2023

Responsive text size

Table of contents

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:

body {
    font-size: 16px;
}
@media (min-width:768px) {
    body {
        font-size: 18px;
    }
}
@media (min-width:1024px) {
    body {
        font-size: 19px;
    }
}
@media (min-width:1280px) {
    body {
        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:

body {
    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.

Want responsive padding too? See my article: Responsive Padding, Margin & Gutters With CSS Calc

Are IDs or classes better? My guide has the answer: ID vs Class: Which CSS Selector Should You Use? (6 Examples).

Matthew James Taylor

“I've been developing websites professionally for over two decades and running this site since 1997! During this time I've found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Ezoic

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It's easy to set up and there's no minimum traffic requirements.

Learn more

SiteGround

SiteGround — Best Website Hosting

Professional Wordpress hosting with 24/7 customer support that is the best in the industry, hands down!

Learn more

Surfer SEO

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Learn more

Canva

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Learn more

See more of my recommended dev tools.

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

How responsive attributes work

Responsive Attributes: Generate CSS Grid Layouts With Simple HTML

A web developer in the engine room

Best Web Development Tools (Free & Paid)

Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

Holy grail 3 column layout responsive diagram

Holy Grail 3-Column Responsive Layout (CSS Grid & Flexbox Versions)

Open book two column layout

2 Column Layouts (Responsive, Flexbox & CSS Grid)

3 column product comparison layout

3 Column Layouts (Responsive, Flexbox & CSS Grid)

Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Custom elements plus CSS with no javascript

Custom Element Examples (Without Javascript)

A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

ID vs Class CSS selectors

ID vs Class: Which CSS Selector Should You Use? (6 Examples)

Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor