The font-size-adjust CSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters. This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.

/* Use the specified font size */
font-size-adjust: none;

/* Use a font size that makes lowercase
letters half the specified font size */
font-size-adjust: 0.5;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

Legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

To use this property in a way that is compatible with browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies

font-size: 14px;  
font-size-adjust: 0.5;

is really specifying that the lowercase letters of the font should be 7px high (0.5 × 14px).

Initial value none
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited yes
Media visual
Computed value as specified
Animation type a number
Canonical order the unique non-ambiguous order defined by the formal grammar



Choose the size of the font based only on the font-size property.

Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the font-size.

The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family. This means that the first choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust.

0 yields text of zero height (hidden text). Note that some old browsers, like Firefox prior version 40, treated 0 as none.

Formal syntax

none | <number>



<p> CSS Examples: font-size-adjust</p>
<div class="times"> This is the Times font (10px) which is hard to read in small sizes</div>
<div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font.</div>
<p> Now we 'll do an adjustment:</p>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>


.times {
    font-family: Times, serif;
    font-size: 10px;

.verdana {
    font-family: Verdana, sans-serif;
    font-size: 10px;

.adjtimes {
    font-family: Times, sans-serif; 
    font-size-adjust: 0.58;
    font-size: 10px;



Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-size-adjust' in that specification.
Candidate Recommendation Initial definition

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 431 No



No 304 No
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support ? ? No 4 ? ? ?

1. From version 43: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. Before Firefox 40, font-size-adjust: 0 was incorrectly interpreted as font-size-adjust: none (bug 1144885).

3. Before Firefox 3, font-size-adjust was supported on Windows only.

4. From version 30: this feature is behind the Enable experimental Web Platform features preference.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.