Typografie

De schaal is een beslissing over dichtheid en de lettertypen zijn een beslissing over lettertypes: deze pagina toont wat een vorm leest, niet wat het vandaag waard is. Wissel de lettertypen-as in het debugpaneel en alles hieronder is ingesteld in een ander type zonder dat er een regel verandert.

Families

Drie, omdat dat is wat een pagina onderscheidt: waar het in is geschreven, waar het in is getiteld, en wat bedoeld is om gelezen te worden als getypt in plaats van gezegd. Een set kan aan alle drie hetzelfde type geven — het systeem doet dat.

--font-family-base

De snelle bruine vos springt over de luie hond — 0123456789

--font-family-heading

De snelle bruine vos springt over de luie hond — 0123456789

--font-family-mono

De snelle bruine vos springt over de luie hond — 0123456789

Gewichten

Genummerd naar hoe sterk ze zijn, nooit door nummer. Een type waarvan 500 niet bestaat, past het aan op wat het wel heeft, en de vormen die om een medium vragen, blijven om een medium vragen.

--font-weight-normal — De snelle bruine vos springt over de luie hond — 0123456789

--font-weight-medium — De snelle bruine vos springt over de luie hond — 0123456789

--font-weight-strong — De snelle bruine vos springt over de luie hond — 0123456789

--font-weight-bold — De snelle bruine vos springt over de luie hond — 0123456789

Typografische schaal

Ontwerp Systeem — Bouwstenen voor geweldige interfaces

Eens per pagina gebruikt. Stelt de primaire context in. Gecombineerd met een korte inleidende alinea.

Typografie stelt hiërarchie en ritme vast

Sectie-niveau kop. Groepeert gerelateerde inhoud. Meestal gevolgd door bodytekst of subsecties.

Ruimte en proportie bepalen leesbaarheid

Subsectie kop. Introduceert een gericht onderwerp binnen een sectie.

Kleur en contrast leiden het oog

Gebruikt voor kaarttitels, zijbalksecties of kleinere groeperingen.

Interactieve staten moeten duidelijk zijn

Labels, metadata koppen, kleine groeperingen. Subtiel maar duidelijk verschillend van bodytekst.

Toegankelijkheid is een functie, geen bijzaak

Het kleinste kopniveau. Sparzaam gebruiken — voor voetnoten, juridische blokken, of aanvullende labels.