PLAY CSS
jaen

Fonts

font-size

font-size sets the size of text. Besides fixed px values, you can use em, rem and % relative to the parent or root text size, or keywords such as small and large.

Syntax

<absolute-size> | <relative-size> | <length-percentage [0,∞]> | math

Preview

Aa
Presets
Drag the bottom-right corner to resize

Code

.box {
  font-size: 40px;
}

Controls

font-size40px
Aa

About

Writing the value

  • A length such as 16px: uses that size.
  • em and %: relative to the parent element's text size. 2em and 200% both mean twice the parent. Nesting multiplies the sizes.
  • rem: relative to the root (html) text size. Nesting does not change it, which makes it easy to keep text sizes consistent across a site.
  • xx-small to xxx-large: fixed steps of size. medium is the initial value, usually 16px.
  • smaller and larger: one step smaller or larger than the parent's text.

The preview on this page converts units assuming the parent text is 16px. In practice, % and em depend on the parent wherever the element is placed.

Respecting user settings

Some people enlarge text in their browser settings. Sizes in rem or em follow that setting. With fixed px sizes, page zoom still works, but the text size setting does not.

References

MDN Web Docsfont-sizeSpecificationCSS Fonts Module Level 4Can I usefont-size

Comments

PLAY CSS