Typography #

Font tokens define roles like heading, body, or code to keep typography consistent.
They use system fonts with fallbacks for performance, while text color is controlled by --afp-color-text.

Font Family #

The default font is IBM Plex Sans, a versatile and modern typeface that balances readability with a contemporary aesthetic.

Font Sizes #

These properties use rem units in order to scale proportionately with the root font size.
The scale is constructed as follows:

• --afp-font-size-m is the base size (0.875rem = 14px).
• --afp-font-size-ml is a secondary base (1rem = 16px).
• --afp-font-size-lm is an intermediate size (1.125rem = 18px).
• Smaller sizes (s, xs, 2xs) are calculated by dividing the next-larger size by 1.125.
• Larger sizes (l, xl, 2xl, …) are calculated by multiplying the previous size by 1.125 * 1.125 (≈1.266).

Example calculations:

--afp-font-size-xs: round(calc(var(--afp-font-size-s) / 1.125), 1px);

Custom Properties #

Multiplier #

The global font-size multiplier --afp-font-size-scale lets you adjust all font sizes at once. By default, this value is set to 1.

Each font-size step is calculated from this multiplier, with the resulting pixel values (based on a 16px root size) shown in the table below.

Font Weight #

Font weight properties are given common names or assigned specific roles.

Line Height #

Line heights control the distance between lines of text and are unitless to scale proportionately with text size.

Links #

Together with --afp-color-text-link, these tokens add text decoration to <a> elements to signal their role as hyperlinks.