# 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; }`

:

← →
↑
en ru