Fonts

Properties Overview

The listed font properties are adjoined with related at-rules and other typography properties.

@font-face, font-display, src @font-palette-values

font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size-adjust font-smooth font-stretch font-style font-variation-settings font-weight

font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-emoji font-variant-ligatures font-variant-numeric font-variant-position

line-height, line-height-step line-gap, line-gap-override line-clamp, -webkit-line-clamp line-break, word-break word-spacing, letter-spacing

Line properties

`line-break`

CJK line break when handling punctuation.

`line-gap-override`

This property is exclusive to @font-face blocks. Overrides the default line gap.

`line-height (or leading)`

Fundamental property, defining the total height of one line of type. Can be a scalar representing a proportion from the font size, or a set length affixing the line height agnostic of the font size. Defines 1lh and 1rlh.

`line-height-step`

Limited availability, Experimental.

`line-clamp / -webkit-line-clamp`

Limited availability, vendor equivalent.

`font`

First Version: shorthand

It must specify font-size and font-family
It may specify font-style, font-variant, font-weight, font-stretch, and also the line-height specially separated by a forward-slash from the required font-size

Paragraph in shorthand font.

Second Version: system keyword

Used to specify one of the system fonts keywords, recycling the font which the system uses to render the matching interface element.

Paragraph in system-keyword font.

`font-family`

Fallbacks which will always render may be one of: sans-serif, serif, cursive, monospace. courier, fantasy,

Lorem 1,2 & 3
Lorem 1,2 & 3
Lorem 1,2 & 3
Lorem 1,2 & 3
Lorem 1,2 & 3
Lorem 1,2 & 3

`font-feature-settings`

The font-feature-settings CSS property controls advanced typographic features in OpenType fonts. Usually, some font-variant exposes semantically the feature, avoid usage.

`font-kerning`

AV Normal / AV None. (see spacing A-V)

`font-language-override`

Overrides the html element's lang, that browsers otherwise use to infer language-specific font settings. For example, preventing a block with Turkish from using the f-i ligature. Turkish has a dotted and dotless 'i', making this ligature incorrect.

`font-optical-sizing`

Enabled by default, renders smaller stroke/serifs thicker.

`font-palette` and `@font-palette-values`

For use with color fonts that contain palettes. It allows specifying which palette to use. New palettes can be created with @font-palette-values.

Changing Loading Periods with `font-display`

font-display is only allowed in @font-face blocks. The font loading periods / states allocated time change according to the provided table.


Declaration	Block Period	Swap Period
font-display: block	short	infinite
font-display: swap	shortest	infinite
font-display: fallback	shortest	short
font-display: optional	shortest	none

The Font Periods occur as shown in the diagram, while the font asset is requested and until either the failure, or successful loading.

  ---
  config:
    look: handDrawn
    theme: neutral
  ---
  stateDiagram-v2
    direction LR
    state "Block Period" as Block
    state "Swap Period" as Swap
    state "Failure Period" as Failure

    [*] --> Block
    Block --> Swap
    Swap --> Failure
    Failure --> [*]
    Swap --> [*]

The state descriptions are given in the following table.

	Font Rendered	Transition
Block Period	Invisible	Swap
Swap Period	Fallback	Loaded, or Failure
Failure Period	Fallback	(final)

`@font-face`

The font-family gives an identifier for the font, which is then usable outside the scope of the at-rule in normal font or font-family declarations.

The font asset is targeted by src: url(...), or using local(...) using the full Postscript/localized name. May specify font-specific properties, such as font-weight, font-style, font-stretch.

Example paragraph with an alternative font-face.
This paragraph is shown in Garamond, named for sixteenth-century Parisian engraver Claude Garamond.

FOIT, FOUT

Using custom fonts risk rendering text in a fall-back or invisible font, for a brief moment, until swapped to the loaded font. This is known as FOUT or FOIT. There are several mitigations measures.

early @font-face declaration
early element using the font e.g. a fixed span placed outside of the viewport
using link with rel='preload'as='font'
including font-display: swap, or font-display: block (see font-display).
including fonts as base-64 encoded data URLs to prevent any asynchronous requests

`font-size`

Fundamental property, defining type glyph's height. Defines 1em and 1rem. Defining it proportional 1em at the root will re-use the user's preferred font size. Defining it proportional vw will keep it constant against scaling / zooming. To scale the font size with the viewport, making it invariant of the "zoom", as well as keeping line-height in proportion:

  .container {
    font-size: 1.5vw;
    line-height: 2vw;
  }

`font-variant`

Includes 9 properties, with one shorthand being a whitespace-separated concatenation of 8 suffixed.

LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3
LOREM Ipsum 1,2 & 3

`font-stretch`, `letter-spacing` and `word-spacing`.

Those properties affect the final width of type, in additional to the underlying size. They can be tweaked to achieve a desired width. The font-stretch, alias for font-width, needs font-level support. Typically specified as a percentage. Neither letter-spacing nor word-spacing need font-level support. They are specified as an absolute distance, typically in pixels.

This sample text can change width, by stretch via font-stretch, and spacing via letter-spacing and word-spacing.

`font-style`

Mostly used to select italic, oblique. Those styles are equivalent in 99% of fonts. Italic text / Oblique text.

Properties Overview

Line properties

`line-break`

`line-gap-override`

`line-height (or leading)`

`line-height-step`

`line-clamp / -webkit-line-clamp`

`font`

First Version: shorthand

Second Version: system keyword

`font-family`

`font-feature-settings`

`font-kerning`

`font-language-override`

`font-optical-sizing`

`font-palette` and `@font-palette-values`

Changing Loading Periods with `font-display`

`@font-face`

FOIT, FOUT

`font-size`

`font-size-adjust`

`font-variant`

`font-stretch`, `letter-spacing` and `word-spacing`.

`font-style`

`font-synthesis`

Properties Overview

Line properties

line-break

line-gap-override

line-height (or leading)

line-height-step

line-clamp / -webkit-line-clamp

font

First Version: shorthand

Second Version: system keyword

font-family

font-feature-settings

font-kerning

font-language-override

font-optical-sizing

font-palette and @font-palette-values

Changing Loading Periods with font-display

@font-face

FOIT, FOUT

font-size

font-size-adjust

font-variant

font-stretch, letter-spacing and word-spacing.

font-style

font-synthesis

`line-break`

`line-gap-override`

`line-height (or leading)`

`line-height-step`

`line-clamp / -webkit-line-clamp`

`font`

`font-family`

`font-feature-settings`

`font-kerning`

`font-language-override`

`font-optical-sizing`

`font-palette` and `@font-palette-values`

Changing Loading Periods with `font-display`

`@font-face`

`font-size`

`font-size-adjust`

`font-variant`

`font-stretch`, `letter-spacing` and `word-spacing`.

`font-style`

`font-synthesis`