The font-size-adjust property
The font-size-adjust property allows you
to adjust a font size (increase or decrease), while keeping
font-size
unchanged.
Application: let
font-family
have two fonts separated by commas, for example,
Georgia, "Times New Roman". Let the user's
computer not have the Georgia font - in this case,
"Times New Roman" will be used. However, we are
faced with a problem - with the same
font-size
value, the fonts will look different. In the example
below, both paragraphs are given a font-size
of 16px, but different font-family. See
how the sizes differ:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
This is due to the fact that the displayed font
size depends largely not on the
font-size
property, which defines only the overall font size,
but on the ratio of the font-size property values
and the x-height value (x-height is
the difference between the size of the lowercase
letter "x" and capital letter "X" for a specific
font).
This ratio is called aspect of the font and is calculated by the formula: aspect = font-size / x-height.
The size problem is solved by the
font-size-adjust property (it allows you
to change the aspect value of the font), which
will make the second font look the same size
as the first.
Let's make Times New Roman the same size as
Georgia. We know the aspect of Georgia is
0.5 (see table below).
Let's set font-size-adjust for the
text with Times New Roman to 0.5 and
see that the second text is the same size as
the first:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Syntax
selector {
font-size-adjust: number | none;
}
Values
| Value | Description |
|---|---|
number |
The number specifies the font aspect value. |
none |
No font size adjustment. |
Default value: none.
How to determine the aspect value of a font?
Check out this excerpt from the W3C specification:
The proportionality factor (aspect) for selected
fonts can be calculated by comparing the same text
but with a different font-size-adjust value. If
the property value is selected correctly, then with
the same font size, the text will remain unchanged
for all fonts used on the page.
Here are the aspect values known to me for some
fonts: Georgia - 0.5,
Times New Roman - 0.46,
Verdana - 0.58.
Example
Compare what text looks like with different
values of font-size-adjust and the same
values of font-size and font-family:
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Example . Real life application
The code below makes sure that if the user does
not have the Georgia font on their computer,
the applied Times New Roman font will be
the same size as Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
