Foundation
← Foundation

Typografie

Schriftfamilien, Größen, Gewichte und die fertigen Textstile.

font

  • Aa Bb Cc 123
    font.family.heading--font-family-headingUnbounded, sans-serif

    Display/Heading-Familie.

  • Aa Bb Cc 123
    font.family.body--font-family-bodyPlus Jakarta Sans, system-ui, sans-serif

    Lauftext-Familie.

  • Aa Bb Cc 123
    font.family.caption--font-family-captionPlus Jakarta Sans, system-ui, sans-serif ← font.family.body

    Caption-Familie = Body-Familie (Plus Jakarta Sans). Eigener Token bleibt, damit Caption unabhängig drehbar ist. Abgrenzung zu body über line-height, Farbe (text.muted) und ggf. Versalien + Letter-Spacing.

fontSize

  • Aa
    fontSize.100--font-size-10011px

    Typo-Roh-Leiter.

  • Aa
    fontSize.200--font-size-20014px

    Typo-Roh-Leiter.

  • Aa
    fontSize.300--font-size-30016px

    Typo-Roh-Leiter.

  • Aa
    fontSize.400--font-size-40018px

    Typo-Roh-Leiter.

  • Aa
    fontSize.500--font-size-50024px

    Typo-Roh-Leiter.

  • Aa
    fontSize.600--font-size-60032px

    Typo-Roh-Leiter.

weight

  • Aa
    weight.regular--weight-regular400

    Gewicht-Achse (frei kombinierbar).

  • Aa
    weight.medium--weight-medium500

    Gewicht-Achse.

  • Aa
    weight.bold--weight-bold700

    Gewicht-Achse.

letterSpacing

  • Caption
    letterSpacing.caption--letter-spacing-caption-0.01em

    Leicht engeres Tracking für Captions in Gemischtschreibung (mit weight.medium). Wirkt kompakter, ohne Condensed-Schnitt. Nicht für Versalien.

  • Caption
    letterSpacing.caps--letter-spacing-caps0.08em

    Tracking für Versalien-Text (Eyebrows, Section-Labels mit text-transform: uppercase).

textStyle

  • Design System Klarheit
    textStyle.heroshot--text-style-heroshotclamp(var(--font-size-500), 3.2vw, 48px) / 1.1 Unbounded

    Nur für die H1 im Hero. Fluid zwischen fontSize.500 (24px) und 48px über die Viewport-Breite. Gewicht separat.

  • Design System Klarheit
    textStyle.headline.s--text-style-headline-s18px / 1.3 Unbounded

    Headline klein. Heading-Familie, 18px.

  • Design System Klarheit
    textStyle.headline.m--text-style-headline-m24px / 1.3 Unbounded

    Headline mittel. Heading-Familie, 24px.

  • Design System Klarheit
    textStyle.headline.l--text-style-headline-l32px / 1.3 Unbounded

    Headline gross. Heading-Familie, 32px.

  • Design System Klarheit
    textStyle.title.s--text-style-title-s14px / 1.4 Unbounded

    Title klein. Heading-Familie, 14px.

  • Design System Klarheit
    textStyle.title.m--text-style-title-m16px / 1.4 Unbounded

    Heading-Familie. Grösse 16 (beschlossen).

  • Design System Klarheit
    textStyle.title.l--text-style-title-l18px / 1.4 Unbounded

    Heading-Familie. Grösse 18 (beschlossen).

  • Design System Klarheit
    textStyle.body.s--text-style-body-s14px / 1.5 Plus Jakarta Sans

    Body klein. Body-Familie, 14px.

  • Design System Klarheit
    textStyle.body.m--text-style-body-m16px / 1.5 Plus Jakarta Sans

    Body mittel. Body-Familie, 16px.

  • Design System Klarheit
    textStyle.body.l--text-style-body-l18px / 1.5 Plus Jakarta Sans

    Body gross. Body-Familie, 18px.

  • Design System Klarheit
    textStyle.body.xl--text-style-body-xl24px / 1.5 Plus Jakarta Sans

    Body-Familie, 24px – matcht headline-m in der Größe für hervorgehobene Body-Textblöcke ohne Wechsel zur Heading-Familie.

  • Design System Klarheit
    textStyle.label--text-style-label11px / 1.3 Plus Jakarta Sans

    Label. Body-Familie, 11px.

  • Design System Klarheit
    textStyle.caption.subline--text-style-caption-subline18px / 1.3 Plus Jakarta Sans

    Caption (Body-Familie). Subline/Deck unter grossen Überschriften. 18px, eng.

  • Design System Klarheit
    textStyle.caption.meta--text-style-caption-meta14px / 1.4 Plus Jakarta Sans

    Caption (Body-Familie). Meta/Zeitstempel/Bildunterschrift. 14px, line-height 1.4.