The font-size-adjust
CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case 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;
The property 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. 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). This will still produce reasonable results in browsers that do not support font-size-adjust
, where a 14px
font will be used.
Syntax
Values
none
- Choose the size of the font based only on the
font-size
property. <number>
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 supportfont-size-adjust
.0
yields text of zero height (hidden text).
Formal definition
Initial value | none
|
Applies to | all elements. It also applies to ::first-letter and ::first-line .
|
Inherited | yes |
Computed value | as specified |
Animation type | a number |
Formal syntax
none | <number>
Examples
Adjusting lower-case letter sizes
HTML
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
CSS
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, serif;
font-size-adjust: 0.58;
font-size: 10px;
}
Results
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3The 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-size-adjust
|
Chrome Full support 43 Full support 43 Disabled' From version 43: this feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 40 Full support 40 Full support 3 Notes' Before Firefox 40, Notes' Before Firefox 3, |
IE
No support No |
Opera Full support 30 Full support 30 Disabled' From version 30: this feature is behind the |
Safari
No support No |
WebView Android
No support No |
Chrome Android Full support 43 Full support 43 Disabled' From version 43: this feature is behind the |
Firefox Android
Full support 4 |
Opera Android Full support 30 Full support 30 Disabled' From version 30: this feature is behind the |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
font-size-adjust by Mozilla Contributors is licensed under CC-BY-SA 2.5.