Typography

Text sizes

Size / line height. Class: text-<name>. Headlines (lg, xl, 2xl) exist only in Medium; the samples show each size in the weight it is used in.Größe / Zeilenhöhe. Klasse: text-<Name>. Headlines (lg, xl, 2xl) gibt es nur in Medium; die Beispiele zeigen jede Größe in dem Gewicht, in dem sie verwendet wird.

VariableVariableClassKlasseValueWert
--text-2xs2xs10px / 12pxFleet overview 1234
--text-xsxs12px / 16pxFleet overview 1234
--text-smsm14px / 20pxFleet overview 1234
--text-basebase16px / 24pxFleet overview 1234
--text-lglg20px / 28pxFleet overview 1234
--text-xlxl24px / 32pxFleet overview 1234
--text-2xl2xl28px / 36pxFleet overview 1234
--text-display-sdisplay-s40px / 48pxFleet overview 1234
--text-displaydisplay56px / 64pxFleet overview 1234

Font and weight

Geist has only Light 300 and Medium 500: “bold” means Medium. Class: font-<name>.Geist hat nur Light 300 und Medium 500: „fett“ heißt Medium. Klasse: font-<Name>.

VariableVariableClassKlasseValueWert
--font-sanssans'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
--font-monomono'Geist Mono', ui-monospace, Menlo, monospace
--font-weight-lightweight-light300
--font-weight-mediumweight-medium500

Line height and letter spacing

VariableVariableClassKlasseValueWert
--leading-nonenone1
--leading-tighttight1.2
--leading-normalnormal1.5
VariableVariableClassKlasseValueWert
--tracking-widewide0.08em
--tracking-widerwider0.12em