093 Responsive Typography: Font Size, Readability & Accessibility on the Modern Web

For many years, choosing a font size for a website seemed fairly straightforward. We might decide that normal text should be 16, 18, or 20 pixels, headings should be larger, and then use those sizes throughout the site.

That approach worked, and pixels are certainly not obsolete. But the web has changed. Today, people visit websites on everything from large desktop monitors to tablets and small phones. They may change their browser's text settings, zoom into a page, use accessibility features, or simply pick up their phone without putting on their glasses.

That last example is something I encounter myself. Sometimes I am using my phone without my glasses and suddenly a website with small text becomes much more difficult to use. The website may technically be responsive. Everything fits beautifully on the screen. But if I struggle to read it, how successful is that responsive design?

This leads to a bigger idea:

Responsive web design should not just respond to the size of the screen. Good design should also respond gracefully to the needs and choices of the person using it.

Font Size Is Part of Accessibility

Accessibility is sometimes thought of as a separate feature that is added to a website. In reality, many of the best accessibility practices are simply good design practices.

Readable text is a perfect example.

A visitor may have low vision. Another may be reading outdoors in bright sunlight. Someone may be tired after a long day. A visitor may have forgotten their glasses. Someone else may simply prefer larger text.

All of these people benefit from typography that is easy to read and from a website that continues to work when text is enlarged.

This is one reason modern CSS gives us more options than simply choosing a fixed number of pixels.

Starting with Pixels: px

Pixels are familiar to almost everyone who has worked with CSS:

body {
    font-size: 18px;
}

h1 {
    font-size: 32px;
}

This is simple and predictable. If we specify 18 pixels, we know the size we are asking the browser to use.

Pixels are not inherently bad or inaccessible, and there is no reason to panic when we find px throughout an older stylesheet. They remain useful for many parts of web design.

However, modern typography often benefits from thinking in relationships instead of assigning an independent fixed size to every element.

Percentages: %

Percentages provide one way of expressing a size relative to another size.

html {
    font-size: 100%;
}

For typography, 100% at the root generally means we are respecting the browser's normal default font size rather than replacing it with an arbitrary smaller value.

This gives us a useful foundation for relative units such as rem.

Understanding rem

The rem unit means root em. It is relative to the font size of the document's root element, normally the <html> element.

Consider this:

html {
    font-size: 100%;
}

body {
    font-size: 1rem;
}

If the root font size being used by the browser is 16 pixels, then:

1rem    = 16px
1.25rem = 20px
1.5rem  = 24px
2rem    = 32px

The important idea, however, is not memorizing the conversion table.

The important idea is that rem establishes a relationship to the root text size.

Instead of thinking only:

"I want this text to be exactly 20 pixels."

We can begin thinking:

"I want this text to be 1.25 times the site's base text size."

That is a significant change in how we approach typography.

Why Not Set the Root to 10 Pixels?

Some CSS techniques set the root font size to a value such as 62.5%, which can make 1rem approximately 10 pixels under common default settings. That makes the mental arithmetic convenient.

However, convenience for the developer is not necessarily the most important goal.

Leaving the root at 100% provides a clean starting point that respects the browser's default sizing. We can then build the rest of the typography relative to that foundation.

Understanding em

The em unit is also relative, but there is an important difference.

While rem refers back to the root font size, em is based on the font size of the element or its surrounding context, depending on the property being calculated.

For example:

.card {
    font-size: 1.2em;
}

If that card is inside an element with a larger font size, its resulting text can become larger as well.

This makes em very useful when we want a component to scale in relation to its surroundings. It can also become confusing when elements are nested and relative sizes begin compounding.

For that reason, rem is often easier to reason about for a site's overall typography, while em remains extremely useful for components, spacing, and situations where local proportional scaling is desirable.

Then Things Get Really Interesting: clamp()

Modern CSS gives us another powerful tool:

font-size: clamp(18px, 2.2vw, 22px);

This may look complicated at first, but the idea behind it is surprisingly simple.

clamp() provides three values:

clamp(minimum, preferred, maximum)

In our example:

clamp(18px, 2.2vw, 22px)

we are essentially telling the browser:

Do not make this text smaller than 18 pixels. Allow it to respond to the viewport in between. Do not allow it to grow beyond 22 pixels.

This is called fluid typography.

Instead of jumping abruptly between font sizes at several traditional breakpoints, the text can scale smoothly within carefully chosen limits.

Bigger Is Not Automatically Better

Learning about responsive typography does not mean that every piece of text should become enormous.

Typography is about balance.

A huge paragraph can be almost as uncomfortable to read as a tiny one. Large headings can overwhelm a small screen. Text that continually changes size based on viewport width can sometimes create more problems than it solves.

Fluid typography is especially attractive for headings, where we may want a large desktop heading to gracefully shrink on smaller screens.

Body text usually deserves a more conservative approach. Its primary purpose is reading.

The goal isn't to make text big. The goal is to make text comfortably readable.

Line Height Matters Too

Font size receives most of the attention, but the space between lines can dramatically affect readability.

body {
    font-size: 1rem;
    line-height: 1.6;
}

Notice that the line height does not need a unit.

A unitless value such as 1.6 allows the line height to scale naturally with the font size. If the text becomes larger, the space between lines grows proportionally.

This is another example of designing relationships rather than fixed dimensions.

Line Length Matters

There is another typography problem that becomes especially noticeable on large desktop monitors: lines can become too long.

A paragraph stretching almost completely across a wide monitor may technically make efficient use of the screen, but that does not necessarily make it easier to read. The reader's eyes have farther to travel and must find the beginning of the next line repeatedly.

One solution is to constrain reading content:

.read {
    max-width: 700px;
}

This is responsive design too.

The page can be 1,500 pixels wide without forcing a paragraph to be 1,500 pixels wide.

Small Text Deserves Special Attention

Most websites have secondary text: captions, notes, dates, labels, copyright information, or introductory "kicker" text.

Designers often make this material smaller to establish visual hierarchy.

But we should ask an important question:

If the information is important enough to put on the page, is it important enough for the visitor to comfortably read?

This does not mean every caption needs to be the same size as the main article. It means small text should be a deliberate choice rather than an automatic design convention.

Responsive Does Not Mean "Make Everything Smaller"

This may be one of the biggest lessons.

For years, responsive design often meant taking a desktop website and progressively making everything smaller until it fit a phone.

But a phone is exactly where readability may matter most.

The screen is small. The device may be moving. Lighting conditions vary. The phone may be farther from the person's eyes than expected.

Making text tiny because the screen is tiny can therefore be the opposite of what the visitor needs.

A better question is:

What size and layout will make this content comfortable to use on this device?

Zoom Is Not the Enemy

Visitors should be able to enlarge a webpage when they need to.

Our job as web developers is not to prevent that. Our job is to build pages that continue working when people do it.

When text is enlarged, we should look for problems such as:

Text overlapping other text
Navigation items disappearing
Buttons becoming unusable
Content being cut off
Horizontal scrolling that makes reading difficult
Forms that no longer fit properly

This is where responsive design and accessibility become closely connected.

A Simple Accessibility Test

One of the easiest things a website owner can do is simply enlarge the page.

Try the website at normal size. Then increase the browser zoom substantially.

Can you still read everything?

Can you navigate?

Can you use the forms?

Can you press the buttons?

Does the content rearrange itself reasonably?

Testing at 200% zoom is particularly useful because accessibility guidance expects web content to tolerate significant enlargement without losing content or functionality.

We can also test narrower viewport widths to see whether enlarged content reflows instead of forcing the visitor to constantly scroll sideways.

The "Where Are My Glasses?" Test

We can add another, decidedly less scientific test.

Pick up your phone without your glasses.

Can you comfortably read the website?

Obviously this is not a replacement for established accessibility testing. Everyone's eyesight is different, and proper accessibility requires much more than one person's experience.

But it is a surprisingly useful reminder that accessibility is about real people in real situations.

Many improvements made for accessibility also make websites easier for everyone else to use.

What We Are Learning from Zehr.net

Zehr.net provides an interesting real-world example because its stylesheet reflects different generations of web development.

Some typography uses traditional fixed pixel sizes. Other parts already use relative units such as rem, and some newer elements use clamp() for fluid typography.

That is not unusual for a website that has evolved over many years.

Rather than viewing the older CSS as something that was "wrong," we can view it as part of the evolution of web design.

The next step is to establish a more consistent typography system.

A Modern Typography Foundation

A future stylesheet might begin conceptually like this:

html {
    font-size: 100%;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

h1 {
    font-size: clamp(...);
}

h2 {
    font-size: clamp(...);
}

The missing values are intentional.

There is no reason to copy numbers simply because another website uses them. We should test the site, understand the content, consider the audience, and choose values that make sense.

CSS should follow the design decision rather than substitute for one.

Accessibility Should Be Part of the Design

This discussion demonstrates why accessibility works best when it is considered during design rather than treated as something added afterward.

Font size, line height, line length, contrast, zooming, responsive layouts, navigation, forms, buttons, and touch targets all affect how easily someone can use a website.

They are accessibility issues.

But they are also simply good web design.

Our Next Step

For Zehr.net, our next step will be practical.

We will examine the existing typography, establish a consistent base size, decide where rem makes sense, identify places where em is useful, and use clamp() selectively where fluid typography improves the design.

Then we will test it on desktop computers, tablets, phones, enlarged browser text, and high zoom levels.

Once we are comfortable with the results, the same principles can gradually be applied to other Zehr.net-designed websites.

Final Thought

The old question was often:

"What font size should this be?"

The better question today may be:

"Can the person visiting this website comfortably read and use it?"

That small change in thinking takes us beyond font size.

It connects typography, responsive design, usability, and accessibility—and ultimately helps us build websites that work better for people.

Brad Zehr | Zehr.net | brad@zehr.net

About Services Why A Site Site Ideas Topics Podcast Help Contacts

Topics, Podcast & Images on this site are AI Assisted.