# font-size property

The `font-size` property sets a font size of a text. The property value is any size units (usually `px`, `em` or `rem`) or special keywords (used extremely rarely).

## Syntax

`selector { font-size: value; }`

## Keywords as values

Value | Description
--- | ---
`xx-small` | The smallest one. Example: Lorem ipsum dolor sit amet.
`x-small` | The smallest one. Example: Lorem ipsum dolor sit amet.
`small` | Small. Example: Lorem ipsum dolor sit amet.
`medium` | Medium. Example: Lorem ipsum dolor sit amet.
`large` | Large. Example: Lorem ipsum dolor sit amet.
`x-large` | Very large. Example: Lorem ipsum dolor sit amet.
`xx-large` | The largest. Example: Lorem ipsum dolor sit amet.
`larger` | Larger than parent font by some value.
`smaller` | Smaller than parent font by some value.

Default value: `medium`.

## Example

Let's set the font size for paragraphs to `20px`:

`<p> Lorem ipsum dolor sit amet. </p>` `p { font-size: 20px; }`

:

## Example

In this example, the paragraph is set to `16px`, and the span within it is set to `150%`. In this case, the font size for the span will be `150%` of its parent, i.e. the paragraph, and its actual size will be ``16px` * `150%` = `24px``:

`<p> Lorem <span>ipsum dolor</span> sit amet. </p>` `p { font-size: 16px; } span { font-size: 150%; }`

:

## Example

In this example, the paragraph is set to `16px`, and the `span` within it is set to `larger`. In this case, the font size for `span` will be larger than its parent (i.e. the paragraph):

`<p> Lorem <span>ipsum dolor</span> sit amet. </p>` `p { font-size: 16px; } span { font-size: larger; }`

:

## Example

Please note that fonts with different `font-family` and the same font-size may not be visually the same size (to solve this problem, see the `font-size-adjust` property).

In the example below, both paragraphs are given the `font-size` of `16px`, but different `font-family`:

`<p id="elem1"> Lorem ipsum dolor sit amet. </p> <p id="elem2"> Lorem ipsum dolor sit amet. </p>` `#elem1 { font-size: 16px; font-family: Arial; } #elem2 { font-size: 16px; font-family: "Times New Roman"; }`

:

→
↑
en ru