Om kategorien
Formål
Skalaer for skriftstørrelse, vekt, linjehøyde og bokstavavstand, pluss syv ferdige font-shorthands for brødtekst, overskrifter (title-1/title-2/font-overskrift), en semibold headline-rolle, liten tekst og kode. Etter den forrige Apple-inspirerte forenklingen er størrelsestrinnene strammet videre inn mot et roligere, mer dokumentpreget hierarki der størrelse (ikke vekt) fortsatt bærer hovedstrukturen.
Egner seg for
- Selektorer med en tydelig typografisk rolle, som brødtekst, overskrifter, liten tekst og kode, via
--font-*. - Komponentlokale overstyringer som bare trenger skriftstørrelse, via
--font-size-*.
Egner seg ikke for
- Ikke for rene størrelsesoverstyringer i Shadow DOM; der skal du bruke
--font-size-*, ikke fullfont-shorthand som også overskriver familie og linjehøyde.
Tokens
| Token | Verdi | Beskrivelse |
|---|---|---|
--font-size-title-1 | 1.65em | Sidens hovedtittel (h1) - ett tydelig toppnivå i hierarkiet, men strammet litt inn så store sider ikke føles mer dekorative enn informative. |
--font-size-title-2 | 1.3em | Seksjonsoverskrift (h2) - tydelig underordnet title-1, men nærmere kroppstekst enn før for et roligere dokumenthierarki. |
--font-size-display | 2.25em | Stor visningsstørrelse for ett nøkkeltall eller én metrikk per flate, som et pengebeløp eller en tidtaker. Fortsatt tydelig større enn overskrifter, men mindre plakataktig enn før. |
--font-size-large | 1.05em | Diskré mellomtrinn over normaltekst, for eksempel når noe trenger et lite løft uten å bli en overskrift. |
--font-size-small | 0.9em | Sekundær tekst nær normal størrelse, som etiketter og metadata. |
--font-size-extra-small | 0.75em | Liten tekst for bildetekster, merkelapper og tidsstempler der informasjonen skal være synlig, men underordnet. |
--font-family-base | system-ui, sans-serif | Standard skriftfamilie for brødtekst og overskrifter, basert på systemets egen UI-font. |
--font-family-mono | ui-monospace, monospace | Monospace-familie for kodeblokker og annen tekst som trenger fast tegnbredde. |
--font-weight-normal | 400 | Grunnvekt for vanlig løpende tekst og alle dagens font-roller. |
--font-weight-medium | 500 | Mellomvekt tilgjengelig for moderat fremheving uten full semibold. |
--font-weight-semibold | 600 | Semibold vekt for tydeligere UI-markeringer og mellomnivåoverskrifter ved behov. |
--font-weight-bold | 700 | Kraftigste delte vekt i systemet, reservert for tydelig fremheving. |
--font-body | var(--font-weight-normal) 1em/var(--line-height-normal) var(--font-family-base) | Ferdig font-shorthand for html og body. Komponerer font-weight-normal, line-height-normal og font-family-base til repoets grunnstemme. |
--font-overskrift | var(--font-weight-normal) 1.1em/var(--line-height-tight) var(--font-family-base) | Ferdig font-shorthand for mindre overskrifter (h3-nivå og tilsvarende) - Apples "Title 3". Kombinerer normal vekt, litt større størrelse og tight linjehøyde med base-familien. |
--font-title-1 | var(--font-weight-normal) var(--font-size-title-1, 1.65em)/var(--line-height-tight) var(--font-family-base) | Ferdig font-shorthand for sidens hovedtittel (h1). Normal vekt lar fortsatt størrelse - ikke tyngde - bære hierarkiet, men størrelsen er strammet inn for et roligere toppnivå. |
--font-title-2 | var(--font-weight-normal) var(--font-size-title-2, 1.3em)/var(--line-height-tight) var(--font-family-base) | Ferdig font-shorthand for seksjonsoverskrifter (h2). Samme prinsipp som title-1, men med et mer nøkternt sprang ned mot brødtekst. |
--font-headline | var(--font-weight-semibold) 1em/var(--line-height-normal) var(--font-family-base) | Ferdig font-shorthand for Apples "Headline"-rolle: samme størrelse som brødtekst, men semibold - brukt for fremhevede etiketter/mini-titler inni kort og lister der en egen, større overskrift ville vært for dominerende (f.eks. korttitler, listeoppføringers hovedtekst). |
--font-liten | var(--font-weight-normal) var(--font-size-small, 0.9em)/var(--line-height-normal) var(--font-family-base) | Ferdig font-shorthand for tydelige liten-tekst-steder. Bruker font-size-small som byggestein, men beholder eksisterende var()-fallback uendret for byte-nær generert CSS. |
--font-kode | var(--font-weight-normal) var(--font-size-small, 0.9em)/var(--line-height-relaxed) var(--font-family-mono) | Ferdig font-shorthand for kodeblokker. Kombinerer font-size-small, relaxed linjehøyde og monospace-familien for lesbar teknisk tekst. |
--line-height-tight | 1.1 | Tettere linjehøyde for overskrifter der vertikal kompakthet er ønsket. |
--line-height-normal | 1.4 | Standard linjehøyde for brødtekst og generell UI-tekst. |
--line-height-relaxed | 1.6 | Luftigere linjehøyde for kode og annen tett-satt tekst som trenger mer vertikal pust. |
--letter-spacing-tight | -0.02em | Strammere bokstavavstand for store overskrifter (title-1/title-2) - motvirker at store skriftstørrelser oppleves løst/glisne, samme prinsipp som Apples negative sporing på "Large Title"/"Title"-nivåene i SF Pro. |
--letter-spacing-wide | 0.08em | Moderat luftig bokstavavstand for korte versaler og kommandotegn. |
--letter-spacing-wider | 0.22em | Svært luftig bokstavavstand for knapper og etiketter satt i versaler. |
Detaljer
--font-brukes bare der selektoren uttrykker en tydelig typografisk rolle, ikke overalt som i dag kun trenger--font-size-.h1/h2/h3i rot-styles.cssbruker--font-title-1/--font-title-2/--font-overskrift- tre tydelig atskilte trinn, men med litt mindre sprang enn i forrige Apple-inspirerte pass.--font-headline(semibold, kroppstekst-størrelse) er den eneste av rollene som bruker vekt fremfor størrelse for å skille seg ut - brukes for fremhevede mini-titler inni kort/lister der en egen, større overskrift ville vært for dominerende.--line-height-tight/normal/relaxed(1.1/1.4/1.6) dekker overskrifter, brødtekst og luftigere kode eller tett innhold.--font-weight-normal/medium/semibold/bold(400/500/600/700) er byggeklosser for--font-*, ikke primær API alene.--letter-spacing-tight(-0.02em) strammer bokstavavstanden på--font-title-1/--font-title-2- samme prinsipp som Apples negative sporing på store SF Pro-titler, som motvirker at store trinn oppleves glisne.--letter-spacing-wide/wider(0.08em/0.22em) er for luftig satte versaler, som knapper, etiketter og kommandotegn.