Relawan kami belum menerjemahkan artikel ini ke bahasa Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikannya!
Anda juga dapat membaca artikel ini dalam English (US).

The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than 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;

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).

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 support font-size-adjust.

0 yields text of zero height (hidden text).

Formal syntax

none | <number>

Examples

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, sans-serif; 
  font-size-adjust: 0.58;
  font-size: 10px;
}

Results

Specifications

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 43
Disabled
Full support 43
Disabled
Disabled From version 43: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Full support 40
Full support 40
Full support 3
Notes
Notes Before Firefox 40, font-size-adjust: 0 was incorrectly interpreted as font-size-adjust: none (bug 1144885).
Full support 1
Notes
Notes Before Firefox 3, font-size-adjust was supported on Windows only.
IE No support NoOpera Full support 30
Disabled
Full support 30
Disabled
Disabled From version 30: this feature is behind the Enable experimental Web Platform features preference.
Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.