This is the Standard reference for fonts.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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