Jak vybrat font pro web

Font rozhoduje o tom, jestli návštěvník text přečte, nebo zavře záložku. Ukážu vám, jak písmo vybírat podle čitelnosti, licence a rychlosti načtení, ne podle toho, co se zrovna líbí grafikovi.

Čitelnost se pozná podle výšky malých písmen

Nejdůležitější parametr písma není jméno ani nálada, ale výška malých písmen vůči velkým. Čím je vyšší, tím lépe se text čte na mobilu při čtrnácti pixelech. Proto se Inter, Source Sans nebo Manrope čtou v odstavci líp než třeba Futura, která má malá písmena nízká a v delším textu unavuje oči během pár minut.

Druhý test je jednoduchý. Napište vedle sebe velké I, malé l a číslici 1. Pokud je od sebe nerozeznáte, písmo se nehodí na formuláře, telefonní čísla ani ceny. Stejně tak si projděte českou diakritiku. Spousta krásných písem má háčky a čárky dodělané ledabyle a v nadpisu to okamžitě uvidíte.

Poslední kontrola patří displeji. Otevřete si vzorek na levném telefonu s nízkým jasem venku na světle. Písmo, které na drahém monitoru působí elegantně a subtilně, tam prostě zmizí. Pro běžný web proto volím font se střední tloušťkou tahu a otevřenými tvary, protože přežije i špatné podmínky, ve kterých web čte většina lidí.

Licence: kdy je font zdarma a kdy zaplatíte i padesát tisíc

Font se nekupuje jednou provždy. Licence se dělí podle způsobu použití, takže desktopová verze pro grafika v Photoshopu vám nedává právo nasadit ji na web. Tohle je nejčastější problém, na který u převzatých webů narazím. Klient má v logu poctivě koupený řez, na webu ale běží kopie stažená z pochybného archivu.

Bezpečná cesta jsou písma s licencí SIL Open Font License. Google Fonts jich nabízí přes patnáct set a řada z nich má českou diakritiku vyřešenou správně. Když chcete něco méně otřelého, koukněte na české slévárny, například Suitcase Type Foundry nebo Heavyweight. Ceny za webovou licenci u nich začínají v nižších tisícikorunách za jeden řez.

Než nakoupíte, přečtěte si limit zobrazení stránek. Menší slévárny licencují do určitého počtu zobrazení měsíčně a při překročení se doplácí. U klienta s e-shopem a padesáti tisíci návštěvami měsíčně to řeším rovnou firemní licencí, protože doplatky za rok vyjdou dráž než jednorázový nákup širší licence.

Váha písma: proč vám stačí dva řezy

Každý řez je samostatný soubor. Regular, medium, semibold, bold a k tomu kurzívy dají osm souborů a klidně 400 kB. To je na mobilní síti půl sekundy navíc a Largest Contentful Paint to pozná okamžitě. Na webech, které stavím, používám dva řezy na text a jeden na nadpisy. Víc jich prakticky nikdy nepotřebuju.

Formát řeším jen woff2, který je proti ttf zhruba o polovinu menší a podporují ho všechny prohlížeče od roku 2016. Písma hostuji z vlastní domény, ne z cizí sítě. Ušetří to jedno navazování spojení navíc a zároveň to řeší otázku předávání IP adres návštěvníků třetí straně.

• Ořežte znakovou sadu na latinku a latin-ext, asijské znaky vám na českém webu nepomůžou
• Ukládejte pouze woff2, ostatní formáty už jen přidávají soubory k údržbě
• Přidejte preload na řez, kterým je psaný nadpis nad ohybem stránky
• Nastavte font-display swap, aby se text zobrazil dřív, než písmo dorazí
• Zvažte variabilní font, jeden soubor umí všechny tloušťky a často váží míň než tři statické
• Doplňte záložní písmo ve stejné metrice, jinak text po načtení poskočí a počítá se to do CLS

Kombinace: jedno písmo na nadpisy, jedno na text

Pravidlo, které funguje, zní kontrast, ne podobnost. Dvě podobná bezpatková písma vedle sebe vypadají jako chyba v exportu. Patkový nadpis s bezpatkovým textem má naopak jasnou hierarchii a působí dražším dojmem. Osvědčená dvojice pro české weby je Instrument Serif v nadpisech a Inter v odstavcích, obě jsou zdarma a mají čistou diakritiku.

Když chcete vystačit s jedním písmem, vyberte rodinu se širokou škálou tloušťek. Nadpis dejte do 600 nebo 700, text do 400 a rozdíl podpořte hlavně velikostí. Třetí písmo je skoro vždycky zbytečné. Jediná výjimka je monospace pro čísla, kódy nebo technické parametry, kde pomáhá zarovnání číslic pod sebe.

Rukopisná písma nechte mimo web, s výjimkou loga. V Česku je nejčastěji vidím na stránkách cukráren a kosmetiček a vždycky srazí čitelnost i důvěryhodnost. Dojem ruční práce uděláte spolehlivěji barvou, vlastní fotkou a velkorysými mezerami než ozdobným písmem, které se na mobilu rozpadne.

Velikost, řádkování a šířka řádku

Základní velikost textu dávám na mobilu 17 nebo 18 pixelů, na desktopu 18 až 20. Šestnáctka, kterou má většina šablon, je z doby menších displejů. Řádkování nastavuju na 1,55 až 1,7. Čím delší je řádek, tím větší řádkování potřebuje, jinak oko na konci řádku nenajde začátek toho dalšího.

Šířka sloupce je nejpodceňovanější věc na celém webu. Optimální délka řádku je 60 až 75 znaků. Na širokém monitoru bez omezení šířky se text roztáhne klidně na 140 znaků a čtenář po třetím odstavci odpadne. Stačí jeden řádek ve stylech a stejný text se čte o třídu líp, aniž byste změnili jediné slovo.

• Základní text 17 až 20 pixelů, nikdy ne pod 16
• Řádkování 1,55 až 1,7 pro odstavce, 1,1 až 1,2 pro velké nadpisy
• Maximální šířka textového bloku 65 až 70 znaků
• Hierarchie nadpisů podle násobku 1,25 nebo 1,333, ne náhodná čísla
• Mezera nad nadpisem vždy větší než pod ním, aby patřil k následujícímu textu
• Popisky a drobný text nikdy pod kontrast 4,5:1 vůči pozadí

Sedm chyb, které kazí i hezké písmo

Nejčastější chybu vidím v centrování. Text na střed vypadá v grafickém editoru dobře, ale v odstavci na pěti řádcích nutí oko hledat začátek každého řádku jinde. Na střed patří nanejvýš nadpis a krátký podnadpis. Celé odstavce zarovnávám vlevo, vždycky a bez výjimky, protože čtení je rychlejší o desítky procent.

Druhá chyba je světle šedý text na bílé. Barva 999999 na bílém pozadí má kontrast zhruba 2,8:1 a neprojde ani základní kontrolou přístupnosti. Přitom je to nejběžnější nastavení popisků na českých webech. Když chcete text potlačit, zmenšete ho nebo mu dejte víc prostoru, ale nesnižujte kontrast pod hranici 4,5:1.

• Text na střed v celých odstavcích místo zarovnání vlevo
• Šedá 999999 na bílém pozadí, kontrast pod hranicí čitelnosti
• Pět velikostí nadpisů bez jasného systému
• Verzálky v delší větě, čtou se zhruba o třetinu pomaleji
• Písmo stažené z neoficiálního zdroje bez platné licence
• Chybějící záložní písmo, takže se stránka při načtení celá posune
• Zarovnání do bloku, které v češtině dělá ošklivé mezery kvůli dlouhým slovům

Časté otázky

Stačí Google Fonts, nebo se vyplatí koupit placené písmo?

Na většinu projektů Google Fonts bohatě stačí. Nabízí přes patnáct set rodin a licence SIL OFL pokrývá komerční použití bez poplatku. Placené písmo řeším tehdy, když má značka vyhraněný charakter a chce se odlišit od konkurence, která jede stejnou trojici Inter, Poppins a Montserrat. Rozdíl je pak v pozici značky, ne v čitelnosti.

Jak poznám, že mi písmo zpomaluje web?

Otevřete PageSpeed Insights a hledejte položky o blokujících zdrojích a o posunu rozvržení. Konkrétně sledujte Largest Contentful Paint a Cumulative Layout Shift. Když se text nejdřív ukáže v systémovém písmu a pak poskočí do vašeho, chybí záložní písmo ve stejné metrice. Součet všech souborů písma by měl zůstat pod 150 kB.

Kolik stojí typografie, když si nechám postavit web?

U mě je součástí ceny. Web od 19 990 zahrnuje výběr písma, nastavení velikostí, řádkování a šířky sloupců i nasazení woff2 z vlastní domény. Placené licence platí klient zvlášť podle slévárny, obvykle 2 000 až 8 000 Kč za jeden webový řez. Hotový web dodávám do sedmi dní od schválení podkladů.