Typografia

Interfejsy to przede wszystkim tekst. prfct traktuje typografię jako podstawowy materiał systemu: jedna, wyjątkowo czytelna rodzina krojów, niewielki zestaw nazwanych ról i dyskretne detale — rozmiar optyczny, dynamiczne odstępy międzyliterowe, cyfry tabelaryczne — które odróżniają zaprojektowany interfejs od domyślnego.

Kroje pisma#

Inter#

prfct jest złożony krojem Inter 4.1 — zmienną rodziną zaprojektowaną z myślą o ekranach. Ma dwie osie: grubość i rozmiar optyczny, dzięki któremu kształty liter subtelnie zmieniają się wraz z rozmiarem. W rozmiarach tekstowych litery mają otwarte światła i swobodne odstępy; od 32 px pałeczkę przejmuje odmiana Display, z ciaśniejszymi odstępami i drobniejszymi detalami. Nie zmieniasz kroju dla nagłówków — to krój się dopasowuje.

prfct hostuje krój Inter samodzielnie, zamiast ładować go z CDN z fontami. Wersje z takich serwisów często wycinają funkcje OpenType, żeby oszczędzić bajty — w tym cyfry tabelaryczne, na których opierają się interfejsy pełne danych. Build prfct zachowuje wszystkie funkcje i obie osie, ogranicza zestaw znaków do pisma łacińskiego (z pełną obsługą polskiego, czeskiego, tureckiego i innych języków z zakresu Latin Extended-A), wstępnie ładuje tylko odmianę prostą i dostarcza font zastępczy o dopasowanych metrykach, żeby tekst nie przeskakiwał, kiedy font się doładuje.

Geist Mono#

Kod, klawisze i wartości techniczne zapisujemy krojem Geist Mono: zwartym, o znakach równej szerokości i zaprojektowanym do pracy w parze z neogroteskowymi krojami bezszeryfowymi.

Skala typograficzna#

prfct nazywa style tekstu według roli, a nie rozmiaru. Rola łączy rozmiar, interlinię, odstępy międzyliterowe i grubość w jedną decyzję, więc style tekstu nie mogą rozjechać się po jednej właściwości naraz.

<h1 className="text-display-sm">Settings</h1>
<h2 className="text-heading-md">Notifications</h2>
<p className="text-body-sm text-muted-foreground">Choose what we email you about.</p>

Rozmiarowe klasy Tailwinda (text-sm, text-lg…) nadal są dostępne do precyzyjnej pracy nad interfejsem i też mają odstępy międzyliterowe prfct.

Detale, które mają znaczenie#

Dynamiczne odstępy międzyliterowe#

Odstępy między literami podążają za zależnymi od rozmiaru metrykami kroju Inter: przy 12 px są lekko rozluźnione, bo litery potrzebują powietrza, a im większy rozmiar, tym są ciaśniejsze, bo domyślne odstępy zaczynają wyglądać luźno. Każda rola i każdy rozmiar Tailwinda mają już właściwą wartość — nie dodawaj tracking-* do zwykłego tekstu.

Własny głos nagłówków#

Role Display włączają jednopiętrowe a (cv11) i zaokrąglone cudzysłowy (ss03) kroju Inter. Duże nagłówki zyskują dzięki temu łagodniejszy, bardziej charakterystyczny głos, a tekst podstawowy i interfejs zachowują domyślne dwupiętrowe a, które w małych rozmiarach jest czytelniejsze.

Cyfry w równych kolumnach#

Liczby w tabelach, statystykach i licznikach czasu muszą układać się w równe kolumny. Tabele prfct domyślnie włączają cyfry tabelaryczne; w każdym innym miejscu dodaj klasę numeric.

<span className="numeric">1,204,118</span>

Zrównoważone i estetyczne łamanie wierszy#

Nagłówki używają text-wrap: balance, więc ich wiersze mają zbliżoną długość; akapity — text-wrap: pretty, żeby ostatnie słowo nie zostawało samotnie w ostatnim wierszu. Oba ustawienia działają globalnie.

Wytyczne#

• Używaj ról, nie rozmiarów. Jeśli projekt wymaga rozmiaru, którego nie daje żadna rola, zwykle potrzebuje po prostu innej roli.
• Jeden styl na poziom nagłówka. Nie przeskakuj poziomów — ani w znacznikach HTML, ani w skali wizualnej.
• Wyróżniaj grubością, nie rozmiarem. Słowo w font-medium wewnątrz body-sm w zupełności wystarczy.
• Trzymaj długość wiersza w granicach 45–75 znaków. Do długich tekstów używaj max-w-prose albo max-w-2xl.
• Wielka litera tylko na początku — w nagłówkach, na przyciskach, w pozycjach menu. Pisanie Każdego Wyrazu Wielką Literą to w polszczyźnie anglicyzm; w interfejsie wygląda jak krzyk i zaciera różnicę między nazwami własnymi a zwykłymi słowami.

Dostępność#

• Wszystkie rozmiary są podane w rem, więc tekst skaluje się razem z rozmiarem czcionki ustawionym w przeglądarce. Układy testujemy przy powiększeniu 200%.
• Role Body mają interlinię co najmniej 1,5× dla tekstu do czytania, a w małych rozmiarach nigdy nie schodzą poniżej grubości 400.
• Wyciszony tekst nadal spełnia 4,5:1; zobacz Kolor.
• Wersaliki są zarezerwowane dla krótkich nadtytułów, które mają zwiększone odstępy między literami i interpunkcję dopasowaną do wersalików, dzięki czemu pozostają czytelne.