Typografia w Design Systemie
Typografia to jeden z najważniejszych elementów Design Systemu. Definiuje hierarchię informacji, czytelność i ton komunikacji w całym produkcie.
Co to jest?
System typografii w Design Systemie obejmuje wybór fontów, skalę rozmiarów, wysokość linii, odstępy między literami i style tekstu. Definiuje gotowe style typograficzne (np. Heading 1, Body Large, Caption) z określonymi wartościami font-size, line-height, font-weight i letter-spacing. System powinien być spójny na wszystkich platformach.
Jak to działa?
Skala typograficzna bazuje na współczynniku (np. 1.25 Major Third). Zaczynasz od rozmiaru bazowego (16px) i mnożysz lub dzielisz przez współczynnik, żeby uzyskać hierarchię: 12px, 14px, 16px, 20px, 24px, 32px. Każdy rozmiar ma przypisane line-height (zwykle 1.4–1.6 dla body, 1.1–1.3 dla headingów) i font-weight. Style typograficzne grupują te wartości w gotowe zestawy.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Material Design 3 definiuje 5 ról typograficznych (Display, Headline, Title, Body, Label) w 3 rozmiarach (Large, Medium, Small) = 15 stylów. Carbon IBM używa dedykowanego fontu IBM Plex z 8 wagami. Apple HIG używa San Francisco z optycznymi wariantami (SF Pro Text, SF Pro Display).