CSS font-size-adjust: How to Use It for Consistent Text Sizing

CSS font-size-adjust helps keep one chosen font metric consistent when text renders in different fonts. Set a ratio that describes the preferred font, and the browser adjusts the size of each font in the stack to match that ratio. For body text, the default metric is lowercase x-height:

.article-copy {
  font-family: "Preferred Sans", Arial, sans-serif;
  font-size: 1rem;
  font-size-adjust: 0.52;
}

0.52 is an example, not a universal value. Measure or look up the ratio for the preferred face, then compare the result in that face and in your fallbacks. This property normalizes one metric; it does not make different typefaces identical or guarantee the same line breaks.

1. What font-size-adjust changes

A font’s glyph proportions vary. At the same declared font-size, one font may have taller lowercase letters than another. If the preferred font is unavailable or has not loaded yet, that difference can make fallback text look noticeably smaller or larger.

font-size-adjust specifies a target font metric as a ratio of the declared font-size. The browser uses that target to scale each font used to render the text, including the preferred font when it is available. It is inherited, so descendants generally inherit the value unless another rule overrides it.

The property preserves the selected metric’s proportion. It does not match glyph shapes, stroke weight, character width, spacing, line height, or wrapping. You may still need to tune the font stack, font-size, line-height, and spacing.

2. Choose a metric and target ratio

Metric	What it matches	When to consider it
`ex-height`	Lowercase x-height	General body text and lowercase readability. This is the default when the metric is omitted.
`cap-height`	Capital letter height	Content where uppercase height is the main concern.
`ch-width`	Width of the “0” glyph	Cases where a narrow-pitch character measure matters.
`ic-width`	Width of the CJK ideograph “水”	CJK text where ideograph width is the relevant measure.
`ic-height`	Height of the CJK ideograph “水”	CJK text where ideograph height is the relevant measure.

The number is a ratio, not pixels or a percentage. For example, 0.52 means the chosen metric should be 0.52 times the font size. Find or measure the ratio for the preferred font face and weight you intend to use. A ratio that fits one font or weight may not be right for another.

MDN’s worked examples show Verdana and Times with x-height ratios of 0.545 and 0.447, and cap-height ratios of 0.73 and 0.66. Those figures illustrate how fonts can differ; they are not universal measurements for every font file or version. See the MDN font-size-adjust reference for syntax, examples, and compatibility information.

3. Syntax and runnable CSS examples

Use the default x-height metric

body {
  font-family: "Preferred Sans", Arial, sans-serif;
  font-size: 1rem;
  font-size-adjust: 0.52;
  line-height: 1.5;
}

Here the browser uses ex-height because no metric name is specified. Replace the example ratio with one appropriate to your preferred font.

Name the metric explicitly

.article-copy {
  font-family: "Preferred Sans", Arial, sans-serif;
  font-size: 1rem;
  font-size-adjust: ex-height 0.52;
}

.headings {
  font-size-adjust: cap-height 0.70;
}

Explicit metric syntax makes the intent clear. The cap-height ratio above is illustrative; choose a value for the actual heading font.

Use a metric from the font

.article-copy {
  font-family: "Preferred Sans", Arial, sans-serif;
  font-size: 1rem;
  font-size-adjust: from-font;
}

from-font uses the metric from the font itself when available. If your goal is to normalize a fallback to a known preferred-font metric, a fixed ratio expresses that target directly. Check support for the precise syntax you plan to use.

Use feature detection where needed

.article-copy {
  font-family: "Preferred Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

@supports (font-size-adjust: 0.52) {
  .article-copy {
    font-size-adjust: 0.52;
  }
}

The font stack remains useful if the property is unsupported. Use @supports when you need a distinct enhancement for supporting browsers; it does not replace testing how the unadjusted fallback looks.

4. How the browser calculates the adjusted size

The scaling relationship is:

u = (m / m′) × s

u: adjusted font size used for the current font.
m: target metric ratio from font-size-adjust.
m′: that metric’s ratio in the current font.
s: declared font-size.

For example, MDN illustrates a 12px declared size with a target cap-height ratio of 0.20 and a fallback ratio of 0.15. The adjusted fallback size is (0.20 / 0.15) × 12 = 16px. The browser increases the fallback size so its cap-height proportion matches the target. This can change line wrapping because other glyph dimensions remain different.

5. Apply it to a real font stack

Pick the font stack. Name the preferred face first and include sensible local fallbacks and a generic family.
Choose the metric. Start with ex-height for ordinary lowercase-heavy text. Choose another metric only when that measure is more relevant.
Get the target ratio. Use a documented or measured value for the preferred face, at the weight you intend to render.
Apply the property to the text container. Since the value is inherited, avoid placing it on a broad ancestor if unrelated text needs a different target.
Compare both font states. Check the page with the preferred font loaded and with a fallback active. Inspect multiple sizes, weights, and viewport widths.
Adjust related typography separately. Tune line height and spacing if needed; font-size-adjust only targets its chosen metric.

@font-face {
  font-family: "Preferred Sans";
  src: url("/fonts/preferred-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.article-copy {
  font-family: "Preferred Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-size-adjust: ex-height 0.52;
}

.article-copy strong {
  font-weight: 700;
}

The font URL and ratio are project-specific placeholders. If bold text uses a separate face, compare that face too. The property applies to rendered text and does not ensure every weight has matching proportions.

6. Edge cases and interactions

The preferred font is adjusted too

The target is applied to each font used to render the text. Do not assume that your chosen number leaves the preferred font unchanged. If the target does not correspond to that face’s metric, the preferred face can also be scaled. Verify it after the web font loads.

Font weights and mixed scripts differ

Metric proportions may vary among families, weights, and scripts. Test the actual faces and content in your stack. For CJK text, consider whether an ic-* metric is more appropriate than x-height, and verify the fonts used for those characters.

Interactions with size-adjust

If an @font-face rule uses the size-adjust descriptor to override a metric, that overridden metric is used in the font-size-adjust calculation. Combining the two can therefore produce a different result than expected. Change one adjustment at a time and compare the rendered preferred and fallback faces.

Zero and negative values

The numeric ratio may be zero or greater. Zero produces text with zero height; negative values are invalid. A zero value is rarely useful for visible text.

Line breaks and layout shifts

Matching x-height or cap-height does not match average character width. A fallback can still wrap differently, which changes block height and can move content below it. Check multi-line paragraphs, buttons, navigation, and narrow layouts. If width consistency matters more, a width metric may be relevant, but it still will not match all glyph widths.

7. Browser support and progressive enhancement

MDN labels font-size-adjust Baseline 2024 and reports broad support across current devices and browser versions since July 2024. Older browsers may not support it, and the syntax in the CSS Fonts Module Level 5 is not necessarily implemented in full by every browser. Consult the current MDN browser compatibility table for your target versions.

Keep a usable font stack and ordinary size and line-height declarations. If a project requires different styling when the property is available, gate it with @supports. Test fixed-ratio and from-font forms separately where compatibility matters.

8. Troubleshooting

Symptom	Likely cause	What to do
The text looks too large after adding the property.	The target ratio may be larger than the metric ratio in the current face, so the browser increases its size.	Confirm the metric and ratio, then compare the preferred and fallback face. Use a value measured for the intended preferred font.
The preferred font changed size unexpectedly.	The property also applies when the preferred font renders.	Choose a target that reflects that face’s metric. Inspect the loaded-font state, not only the fallback state.
The fallback is still hard to read.	Only one metric is normalized; shapes, spacing, weight, and contrast can still differ.	Try a better fallback, tune line height or spacing, or reconsider whether this metric is the right one.
Text wraps differently or moves nearby content.	Matching height does not match glyph widths or line breaks.	Review the actual content and container widths. Choose a width metric only when its measure fits the design goal; do not expect identical wrapping.
The declaration appears to do nothing.	The browser may lack support for the property or the particular syntax, or another rule may override it.	Check the computed style, inspect the cascade, and consult the current compatibility table. Keep the unadjusted stack usable.
Combining font descriptors gives an unexpected size.	`size-adjust` can override the metric used in the calculation.	Test each adjustment separately, then verify their combined effect for each face.
Only some characters look consistent.	Fallback fonts may render different scripts or glyphs, with different metric behavior.	Test representative multilingual text and identify which face supplies each script. Consider a suitable metric and font stack for that content.

9. Performance, reliability, and cost

font-size-adjust is a CSS property, so using it does not require a screenshot service or add a per-capture cost. The main reliability concern is font availability: a missing or slow preferred font can expose a fallback, and the property only reduces one kind of metric difference. A sensible fallback stack and progressive enhancement keep the page readable when a browser does not support the property.

To review the actual result across font-loading states, capture a page after its fonts have loaded and compare it with a capture made using the fallback. For that separate screenshot task, ScreenshotNeo is a website screenshot API and MCP server for developers. The call below captures a page for visual review; CSS typography choices remain in your stylesheet.

10. Or skip the browser setup

To capture a rendered page without setting up browser automation, make one request to ScreenshotNeo’s API. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits are never billed. Response headers identify the page verdict and billing status.
An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
1,000 screenshots a month are free with no card. Paid plans start at $5 for 3,000 screenshots.

11. FAQ

Is font-size-adjust the same as setting font-size?

No. font-size sets the nominal size; font-size-adjust scales each rendered font to target a selected metric relative to that size.

Should I use it on every element?

Usually apply it to a relevant text container and let it inherit. Use a different value only where the typography requires a different target.

Does it make fallback text identical to the preferred font?

No. It matches one metric. Glyph shapes, widths, spacing, and line wrapping can remain different.

Is 0.52 the right value for every sans-serif font?

No. It is illustrative. Use a ratio suited to the preferred font and metric in your design.