Skąd bierze się problem
Angielskie wersaliki są zamknięte w prostokącie: od linii bazowej do wysokości wersalika i ani piksela dalej. Polskie mają wyposażenie dodatkowe — kreski i kropki NAD literami (Ż, Ó, Ś, Ć, Ń, Ź) oraz ogonki POD nimi (Ą, Ę). Zmierzyliśmy krój nagłówkowy tej strony na pliku, który naprawdę idzie na serwer: litera z akcentem sięga 0,96 wysokości pisma. Modna interlinia 0,95 daje wersowi mniej miejsca, niż zajmuje jedna taka litera.
Kolizja zachodzi, gdy litera z ogonkiem (Ą, Ę) w wersie górnym stoi bezpośrednio nad literą z akcentem (Ż, Ó, Ć) w dolnym. Zmierzyliśmy to na czterech niezależnych próbach — tekst kontrolny i realne nagłówki, dwa rozmiary pisma. Przy interlinii 0,95 tusz nachodzi na siebie o 0,6–2,0 piksela; pierwsza wartość bez żadnej kolizji to 1,00. Dwa piksele to za mało, żeby oko świadomie złapało problem — i dokładnie dlatego mierzy to kod, nie wzrok.
Interlinia, która działa w portfolio z Amsterdamu, potrafi ściąć kropkę nad Ż w pierwszym polskim nagłówku.
Gdzie to naprawdę boli: animacje
Modny efekt wjazdu tekstu działa tak: każda linia dostaje maskę, tekst wysuwa się z niej do góry. Maska ma wysokość linii — i jeśli jest mniejsza niż zasięg tuszu, ścina litery na stałe. W jednym z naszych projektów krój nagłówkowy miał akcenty sięgające 1,11 wysokości pisma, a pudełko przycinania — 0,875: napis „ŚCIGAMY SIĘ” tracił kreskę nad Ś i czytał się jak „SCIGAMY SIE”. To pomiar z żywego projektu, nie teoria.
Naprawa była nudna i skuteczna: powiększyliśmy pudełko przycinania do realnego zasięgu tuszu, bez ruszania choreografii. Od tamtej pory maska animacji zawsze dostaje zapas na diakrytyki — różnica jest niewidoczna, dopóki jej nie zabraknie.
Łamanie wersów to dane, nie przypadek
Drugi pomiar, który zmienił nasz sposób pracy: budżet długości wersu. Nagłówek, który na komputerze mieści 16 znaków w wersie, na telefonie o szerokości 375 pikseli mieści około 14. Powyżej tej granicy przeglądarka dołamuje wers po swojemu. Ręcznie zaprojektowana typografia rozsypuje się wtedy dokładnie tam, gdzie patrzy najwięcej osób.
Dlatego nagłówki w naszych projektach nie są zdaniami, które przeglądarka łamie jak chce — są listami wersów. Łamiemy je ręcznie i mierzymy sondą linii renderu na obu szerokościach. Automatyczne wyrównywanie łamania wyłączamy świadomie: zadeklarowane łamanie, które przeglądarka łamie ponownie, jest gorsze niż brak łamania.
Co z tego wynika dla Waszej strony
Jeśli zamawiacie stronę „taką jak zachodni wzorzec”, pierwsze pytanie brzmi: czy ktoś zmierzył ten wzorzec na polskich znakach? U nas to osobna brama kontrolna: automatyczny pomiar zasięgu tuszu na plikach fontów, które naprawdę idą na serwer. Deklaracja, że font „obsługuje polski”, nie wystarczy — obsługiwać znaki a dobrze je składać to dwie różne rzeczy.