This is the Standard reference for fonts.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
font-family
Interactive example.
Prefixes: font-family. Example: font-family:sans. It emits font-family:var(--font-family-sans);.
Documented values (18)
sans, classic, mono, serif, sans-serif, monospace, cursive, fantasy, system-ui, ui-serif, ui-sans-serif, ui-monospace,
ui-rounded, emoji, math, fangsong, [Inter], $family
font-size
Interactive example.
Prefixes: font-size. Example: font-size:1x. It emits font-size:var(--font-size-1x);.
Documented values (25)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, xx-small, x-small, small,
medium, large, x-large, xx-large, xxx-large, larger, smaller, 20px, 2rem, 1.5em, 50%, [20px],
$size
font-size-adjust
Interactive example.
Prefixes: font-size-adjust. Example: font-size-adjust:none. It emits font-size-adjust:none;.
Documented values (6)
none, 0.5, 0.6, from-font, [ex-height_0.5], $adjust
font-weight
Interactive example.
Prefixes: font-weight. Example: font-weight:1x. It emits font-weight:var(--font-weight-1x);.
Documented values (16)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, normal, bold, bolder,
lighter, 600, [350], $weight
font-style
Interactive example.
Prefixes: font-style. Example: font-style:normal. It emits font-style:normal;.
Documented values (5)
normal, italic, oblique, [oblique_14deg], $style
font-stretch
Interactive example.
Prefixes: font-stretch. Example: font-stretch:normal. It emits font-stretch:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, [75%], $stretch
font-smoothing
Interactive example.
Prefixes: font-smoothing. Example: font-smoothing:antialiased. It emits -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;.
Documented values (2)
antialiased, subpixel-antialiased
font-kerning
Interactive example.
Prefixes: font-kerning. Example: font-kerning:auto. It emits font-kerning:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, normal, none, [auto], $kerning
font-optical-sizing
Interactive example.
Prefixes: font-optical-sizing. Example: font-optical-sizing:auto. It emits font-optical-sizing:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, none, [none], $opticalSizing
font-feature-settings
Interactive example.
Prefixes: font-feature. Example: font-feature:normal. It emits font-feature-settings:normal;.
Documented values (5)
normal, ["liga"_1], ["smcp"], ["tnum"], $features
font-variation-settings
Interactive example.
Prefixes: font-variation. Example: font-variation:normal. It emits font-variation-settings:normal;.
Documented values (5)
normal, ["wght"_700], ["wght"_300], ["opsz"_48], $axes
font-variant-numeric
Interactive example.
Prefixes: font-variant-numeric. Example: font-variant-numeric:normal. It emits font-variant-numeric:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
normal, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, [lining-nums_tabular-nums], $numeric
font-variant-caps
Interactive example.
Prefixes: font-variant-caps. Example: font-variant-caps:normal. It emits font-variant-caps:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps, [all-small-caps], $caps
font-variant-ligatures
Interactive example.
Prefixes: font-variant-ligatures. Example: font-variant-ligatures:normal. It emits font-variant-ligatures:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual, [common-ligatures_no-contextual], $ligatures
font-variant-east-asian
Interactive example.
Prefixes: font-variant-east-asian. Example: font-variant-east-asian:normal. It emits font-variant-east-asian:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
normal, jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby, [jis83_full-width], $eastAsian
font-variant-alternates
Interactive example.
Prefixes: font-variant-alternates. Example: font-variant-alternates:normal. It emits font-variant-alternates:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
normal, historical-forms, [styleset(my-set)], $alternates
font-variant-position
Interactive example.
Prefixes: font-variant-position. Example: font-variant-position:normal. It emits font-variant-position:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
normal, sub, super, [sub], $position
font-variant-emoji
Interactive example.
Prefixes: font-variant-emoji. Example: font-variant-emoji:normal. It emits font-variant-emoji:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
normal, text, emoji, unicode, $emoji
font-synthesis-weight
Interactive example.
Prefixes: font-synthesis-weight. Example: font-synthesis-weight:auto. It emits font-synthesis-weight:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
auto, none, $synthesisWeight
font-synthesis-style
Interactive example.
Prefixes: font-synthesis-style. Example: font-synthesis-style:auto. It emits font-synthesis-style:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, none, oblique-only, $synthesisStyle
font-synthesis-small-caps
Interactive example.
Prefixes: font-synthesis-small-caps. Example: font-synthesis-small-caps:auto. It emits font-synthesis-small-caps:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
auto, none, $synthesisSmallCaps
font-language-override
Interactive example.
Prefixes: font-language-override. Example: font-language-override:normal. It emits font-language-override:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
normal, ["SRB"], $lang
font-palette
Interactive example.
Prefixes: font-palette. Example: font-palette:normal. It emits font-palette:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
normal, light, dark, [--brand], [palette-mix(in_oklab,normal_40%,dark)], $palette