font-size-adjust
Quick Summary for font-size-adjust
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).
Code Usage for font-size-adjust
/* 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;  /* Two values - added in the Level 5 spec */ font-size-adjust: ex-height 0.5;  /* Global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: revert; font-size-adjust: unset; 
More Details for font-size-adjust

font-size-adjust

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;  /* Two values - added in the Level 5 spec */ font-size-adjust: ex-height 0.5;  /* Global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: revert; 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.

ex-height | cap-height | ch-width | ic-width | ic-height

Specifies the font metric to normalize on. Defaults to ex-height. One of:

ex-height

Normalize the aspect value of the fonts, using the x-height divided by the font size.

cap-height

Normalize the cap-height of the fonts, using the cap-height by the font size.

ch-width

Normalize the horizontal narrow pitch of the fonts, using the advance width of "0" (ZERO, U+0030) divided by the font size.

ic-width

Normalize the horizontal wide pitch of the font, using the advance width of "水" (CJK water ideograph, U+6C34) divided by the font size.

ic-height

Normalize the vertical wide pitch of the font, using the advance height of "水" (CJK water ideograph, U+6C34) divided by the font size.

<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 definition

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typea number

Formal syntax

none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <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: ex-height 0.58;   font-size: 10px; } 
Results

Specifications

Specification
CSS Fonts Module Level 5 # font-size-adjust-prop

See also

font-size font-weight Fundamental text and font styling size-adjust descriptor Select your preferred language English (US)EspañolFrançais日本語Polski中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

pad

The pad descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum length.
pad (@counter-style) css reference