Why 16px Is Not the Same Size in Every Font

Set two fonts to 16px in CSS and you might expect the letters to be exactly the same height.

They often are not even close.

One typeface may look large, open and easy to read. Another at exactly the same CSS size may look noticeably smaller. Switch the font without changing any other styles and a paragraph might suddenly occupy more lines, headings may look heavier, and an interface that previously felt spacious can become dense.

This is not a browser bug and it does not mean that one of the fonts is incorrectly sized.

The reason is more fundamental: the number used as a font size does not directly specify the visible height of the letters.

The current W3C CSS Fonts specification explicitly notes that individual fonts can have different apparent visual sizes when rendered at the same font-size.

To understand why, you have to look inside the coordinate system used to design digital fonts.

16px Controls the Font’s Scale, Not the Height of the Letter

Digital typefaces are normally designed inside an invisible coordinate system called an em square.

A font might use 1,000 units per em, 2,048 units per em, or another value chosen during its construction. The glyph outlines are positioned inside and sometimes beyond that coordinate space.

When CSS says:

body {
    font-size: 16px;
}

the browser scales the font’s em to correspond to that requested size.

It does not mean:

make every lowercase letter exactly 16 pixels tall

The CSS Fonts Module Level 4 describes font-size as a scale factor applied to the font’s em unit for scalable fonts. It also states that there is no requirement for glyphs to fit the em box closely.

This distinction explains a lot.

Imagine two type designers working inside equivalent em squares.

The first designer creates lowercase letters that occupy a large proportion of the available vertical space.

The second creates shorter lowercase letters, leaving more room for ascenders and descenders.

Both fonts are then displayed at 16px.

The underlying coordinate system has been scaled to the same nominal size, but the visible lowercase letters can have very different heights.

One of the most useful measurements for describing this difference is x-height.

X-height is approximately the vertical distance from the baseline to the top of a non-ascending lowercase character such as x.

A font with a large x-height generally has relatively tall lowercase characters.

A font with a small x-height has shorter lowercase characters relative to the same nominal font size.

OpenType even has a dedicated metric for this.

Microsoft’s OpenType specification for the OS/2 table defines sxHeight as the approximate distance between the baseline and the height of non-ascending lowercase letters.

The same OpenType table can contain sCapHeight, which describes the approximate height of uppercase letters.

These are completely different measurements from the nominal font size.

Consider two hypothetical fonts:

Typeface	CSS font-size	Approximate x-height ratio
Font A	16px	0.55
Font B	16px	0.43

In simplified terms, Font A’s lowercase characters occupy a much greater proportion of its nominal size.

Both are 16px fonts.

They simply do not look equally large.

This is one reason fonts designed for interfaces often have relatively generous x-heights. Lowercase letters dominate normal reading, so making that region larger can make text appear clearer at compact sizes.

You can see substantial differences in proportions simply by comparing FontLark’s serif fonts with its sans serif fonts. Even fonts within the same category can have very different x-heights.

X-Height Matters, but It Is Not a Magic Readability Number

You will sometimes see typography advice reduced to a simple statement:

Large x-height equals better readability.

The research is more nuanced.

A major review published in vision science examined how print size relates to reading performance and noted that x-height is particularly useful because lowercase text accounts for most of what readers encounter. The researchers also observed that typefaces designed specifically for screens tended to have larger x-height proportions than traditional book faces.

You can read the open-access review in the Journal of Vision research archive at the U.S. National Library of Medicine.

More recently, a 2025 study presented in the Journal of Vision tested reading speed across different font sizes and x-heights.

The study involved 60 participants and found that print size had a significant effect on reading speed. X-height by itself was not statistically significant across all conditions, but researchers found an interaction between size and x-height.

At smaller print sizes, participants read somewhat faster with fonts having larger x-heights. At larger sizes, the same effect was not observed.

That distinction is important.

A large x-height may help when text is constrained to a small size, but it does not follow that designers should maximize x-height in every typeface.

Extremely large lowercase forms can reduce the visual distinction between lowercase letters and capitals. They can also reduce the available vertical room for accents and other marks.

The current CSS Fonts specification even notes that an excessively large x-height can create problems for text containing diacritics because the available space becomes cramped.

Readability also depends on far more than x-height.

Letter width matters.

Stroke thickness matters.

Counter size matters.

Character differentiation matters.

Spacing matters.

A font in which lowercase l, uppercase I and the numeral 1 are easily distinguished may work better in an interface than another font whose characters look almost identical.

Spacing can have measurable effects too.

A study on serif size and letter spacing found a strong visual crowding effect when letters were positioned too closely together, while the effect associated with the presence or size of serifs was substantially smaller. The paper is available through the National Library of Medicine.

This is one reason the old debate about whether serif or sans serif fonts are universally more readable is often less useful than examining the actual construction of an individual font.

A carefully spaced serif can be highly readable.

A poorly spaced sans serif can be difficult to read.

The category label does not determine the entire outcome.

CSS Can Actually Compensate for Different Font Metrics

The difference between apparent font sizes becomes particularly important when web fonts fail to load.

Consider this CSS:

body {
    font-family: "Example Sans", Arial, sans-serif;
    font-size: 16px;
}

If Example Sans loads successfully, the page uses it.

If it does not, the browser may switch to Arial.

Both fonts are still being rendered at 16px.

But if the two typefaces have different x-heights, the fallback text might suddenly appear larger or smaller.

The change can affect more than aesthetics.

Different glyph widths may cause paragraphs to wrap differently. A heading may move onto another line. Buttons can become wider. Page content can move as the web font replaces the fallback.

CSS provides an unusually relevant property for dealing with this problem:

font-size-adjust

The MDN documentation for font-size-adjust explains that the property can preserve characteristics such as x-height when font fallback occurs.

A simplified example is:

body {
    font-family: "Example Sans", Arial, sans-serif;
    font-size: 16px;
    font-size-adjust: 0.52;
}

The value represents a ratio between a selected font metric and the nominal font size.

The browser can adjust a fallback font’s effective size so its lowercase characters remain closer to the apparent size of the intended typeface.

Modern CSS can also express the metric explicitly:

font-size-adjust: ex-height 0.52;

Or use information from the font itself:

font-size-adjust: from-font;

The property is not limited conceptually to x-height. Current CSS syntax can work with metrics including cap height and character widths, depending on browser support and the selected value.

This is an unusually good example of typography influencing web engineering.

The browser is not merely being told which font looks attractive.

It is being given instructions for how to preserve perceived typographic proportions when font substitution occurs.

For web projects, this is particularly useful when switching between fonts with substantially different lowercase proportions.

If you are selecting typography for an interface, explore FontLark’s sans serif fonts and test them at the actual size at which users will read them. Do not judge them only from large specimen previews.

The Number in the Font Picker Is Only the Beginning

The practical lesson is simple: font size is not the same thing as visible letter size.

Two typefaces can both be 16px and still look noticeably different because their designers chose different proportions inside the em.

One may have a large x-height and short ascenders.

Another may have smaller lowercase characters and taller ascenders.

A third may use wider glyphs, giving the entire paragraph greater visual presence even when its vertical dimensions are similar.

This is why choosing a font purely by comparing numerical sizes can be misleading.

If you replace one website font with another, do not automatically preserve every typography value simply because both families are technically being rendered at 16px.

Look at the result.

You may find that 15px in one typeface provides approximately the same apparent size as 16px in another.

You may also need to change line-height because taller lowercase forms alter how dense a paragraph feels.

Spacing deserves similar attention.

The W3C guidance for WCAG text spacing requires web content to remain functional when users increase line, paragraph, word and letter spacing to specified values. This is partly because some readers benefit from changing typography to suit their own visual or cognitive needs.

That reinforces an important principle for typography on the web.

A font is not being viewed under one perfect set of conditions.

Users have different screens, browser settings, zoom levels, fallback fonts and accessibility preferences.

A good type choice needs to remain usable across those conditions.

There is also a lesson here for font previews.

If two fonts are displayed inside identical 48px preview boxes, you are not necessarily seeing their letterforms at equivalent apparent sizes.

The numerical setting is identical.

The type design is not.

That difference is part of what gives fonts their personality.

A large x-height can make a sans serif feel direct and immediate. A smaller x-height with longer ascenders can make a serif feel more delicate or literary. Wider letters can make text feel open. Narrow forms can make the same amount of copy feel more compact.

These are not mistakes that need to be normalized away.

They are design decisions.

CSS font-size simply gives the browser a scale from which to start.

The actual appearance comes from the proportions the type designer placed inside that scale.

So the next time two fonts are both set to 16px and one somehow looks much larger, your eyes are probably not deceiving you.

They are the same CSS size.

They are not the same typographic size.

Explore fonts on FontLark or compare our serif, sans serif, display and monospace fonts to see how dramatically proportions can vary between typefaces.

Research Sources

1. W3C: CSS Fonts Module Level 4
   Technical specification covering CSS font sizing, font metrics, x-height, apparent font size and font-size-adjust.
2. Microsoft OpenType Specification: OS/2 Font Metrics
   Primary documentation defining metrics including sxHeight and sCapHeight inside OpenType fonts.
3. Journal of Vision: Font Size, X-Height, and Readability
   2025 research examining the interaction between font size, x-height and reading speed across 60 participants.
4. Does Print Size Matter for Reading? A Review of Findings from Vision Science and Typography
   Open-access research reviewing print size, x-height and fluent reading from both vision science and typography perspectives.
5. Serifs and Font Legibility
   Research examining letter spacing, visual crowding and serif size in character recognition.
6. MDN: font-size-adjust
   Technical reference explaining how CSS can preserve x-height and other font metrics when fallback fonts are used.
7. W3C Web Accessibility Initiative: Understanding Text Spacing
   Accessibility guidance covering adaptable line spacing, letter spacing, word spacing and paragraph spacing on the web.

Technical note: Apparent font size is influenced by more than x-height alone. Glyph width, cap height, ascender and descender proportions, weight, spacing, rendering conditions and individual reader characteristics can all affect how large and readable a typeface appears.