Jak zvolit fonty na web: patkové, nebo bezpatkové písmo?

Písmo si návštěvník webu většinou vědomě nevšimne. Pozná ale, když se text čte špatně, když háčky vypadají jinak než zbytek slova nebo když advokátní kancelář píše písmem z dětské oslavy. Dobře zvolený font je proto jedna z nejlevnějších věcí, které webu dodají profesionální vzhled. Stejně k němu přistupuji i u webových stránek pro firmy a živnostníky.

Patkové písmo

Patkové písmo (anglicky serif) má na koncích tahů malé příčné čárky – patky. Znáte ho z knih a novin: Times New Roman, Georgia, z webových písem třeba Merriweather, Lora nebo PT Serif.

Působí tradičně, důvěryhodně a elegantně. Hodí se pro advokáty, terapeuty, lékaře, restaurace, vinařství nebo pro všechny, kdo chtějí dát najevo klid a zkušenost. Dřív se tvrdilo, že patkové písmo patří jen do tisku. Na dnešních ostrých displejích se čte dobře i na obrazovce, přesto ho většina webů používá hlavně na nadpisy a odstavce sází bezpatkovým.

Bezpatkové písmo

Bezpatkové písmo (sans-serif) patky nemá, tahy končí rovně. Patří sem Arial, Helvetica a z webových písem Roboto, Open Sans, Inter, Poppins nebo Outfit.

Je čisté, moderní a dobře čitelné i v malé velikosti na mobilu. Proto je výchozí volbou pro text na webu i v aplikacích. Když si nevíte rady, bezpatkové písmo na odstavce je vždycky bezpečná volba.

Patkové písmo dodá charakter, bezpatkové čitelnost. Nejčastěji se kombinují.

Další styly písma

• Psací písmo napodobuje rukopis. Hodí se na jméno, podpis nebo krátký podnadpis, nikdy na odstavec – delší text psacím písmem nikdo nedočte.
• Ozdobné písmo má výraznou osobnost (hravé, ručně kreslené, technické). Jen na nadpisy a jen tam, kde sedí k oboru.
• Neproporcionální písmo (monospace) má všechny znaky stejně široké. Na webu se používá pro ukázky kódu, jinak spíš výjimečně.

Jak zvolit písmo na web

1. Nejvýš dvě písma. Jedno na nadpisy, druhé na text. Nebo jedno písmo ve více řezech (tenký, běžný, tučný). Třetí písmo už většinou dělá z webu koláž.
2. Písmo musí umět češtinu. Napište si do náhledu větu „Příliš žluťoučký kůň úpěl ďábelské ódy“. Když některé písmeno s háčkem nebo čárkou chybí, prohlížeč ho doplní z jiného písma a slovo vypadá rozbitě. Nejčastěji zlobí ď, ť a ů.
3. Čitelnost má přednost před efektem. Text aspoň 16 px, řádkování 1,5 až 1,7 a řádek dlouhý zhruba 60–75 znaků. Tenké řezy vypadají elegantně na monitoru grafika, na levném mobilu na slunci se ztrácí.
4. Písmo má sedět k oboru. Stavební firma potřebuje stabilitu, terapeutka klid, farma hravost. Písmo říká „kdo jste“ dřív, než návštěvník přečte první větu.
5. Dost kontrastu. Tmavý text na světlém pozadí. Světle šedé písmo na bílé vypadá decentně, ale čte se špatně. Víc o tom v článku Jak vybrat barvy pro web.

Jak to vypadá v praxi

Písma na webech, které jsem dělal, a proč jsou zvolená právě takhle:

• Porodní asistentka Jana Menčlová spojuje patkové nadpisy s psacím jménem – web působí jemně a osobně, text v bezpatkovém písmu se přitom čte bez námahy.
• Terapeutka má patkové písmo na hlavních nadpisech. Dodává klid a vážnost, kterou klient od terapie čeká.
• Salaš Farmářka vznikla podle návrhu grafika. Hravé, ručně psané nadpisy k farmářským dobrotám sedí, odstavce jsou ale v obyčejném bezpatkovém písmu.
• You & Us vystačí s jedním písmem ve více řezech. Moderní stavební firma bez zbytečných ozdob.

A tenhle web? Nadpisy jsou v širokém technickém písmu Michroma, text v úzkém bezpatkovém Roboto Condensed.

Kde najít fonty online

Nejjednodušší zdroj je Google Fonts (otevře se v novém okně). Má přes tisíc písem zdarma, i pro komerční použití, a umí je filtrovat podle jazyka – vyberte češtinu a zbudou jen písma s háčky a čárkami. Do náhledu si napište vlastní text a porovnáte, jak by vypadal váš nadpis.

Pozor na weby typu „free fonts ke stažení“. Spousta písem tam je zdarma jen pro osobní použití, ne pro web firmy, a češtinu často nemají. Placená písma od písmolijen (i českých, například Suitcase Type Foundry) jsou naopak vyladěná do detailu a vyplatí se u výrazné značky.

Jak zjistit, jaký font používá web

Líbí se vám písmo na cizím webu? Zjistíte ho za pár vteřin:

1. V prohlížeči: klikněte na text pravým tlačítkem, zvolte Prozkoumat, přepněte na kartu Computed (Vypočítané) a sjeďte úplně dolů. V části Rendered Fonts je písmo, které se opravdu vykreslilo.
2. Rozšířením: doplněk WhatFont pro Chrome ukáže název písma, když na text najedete myší.
3. Z obrázku: písmo z loga nebo letáku najde WhatTheFont (otevře se v novém okně). Nahrajete obrázek a nabídne stejná nebo podobná písma.

Jak dát písmo na web, aby ho nezpomalilo

Každé písmo je soubor, který se musí stáhnout. Aby web zůstal rychlý:

• Jen řezy, které opravdu použijete. Běžný a tučný většinou stačí, každý další řez je další soubor.
• Formát WOFF2 a jen potřebné znaky. Pro češtinu stačí latinka s rozšířením (latin-ext), azbuku ani řečtinu web nepotřebuje.
• Písmo na vlastním serveru. Načítání přímo z Googlu předává IP adresy návštěvníků do USA – soud v Mnichově kvůli tomu v roce 2022 přiznal návštěvníkovi webu odškodné. Z vlastního serveru je písmo navíc rychlejší.
• Text vidět hned. Nastavení font-display: swap ukáže text nejdřív záložním písmem a vlastní font ho vymění, až se stáhne. Návštěvník nečeká na prázdnou stránku.

Stejně důležité jako písmo jsou pro rychlost obrázky – jak je zmenšit, najdete v článku Jak zmenšit obrázky pro web.

Nejčastější chyby

• tři a více různých písem na jedné stránce
• písmo bez české diakritiky, háčky „z jiného písma“
• psací nebo ozdobné písmo na delší text
• příliš malý nebo příliš tenký text, hlavně na mobilu
• světle šedé písmo na bílém pozadí
• desítky řezů, které web zbytečně zpomalují

S výběrem písma, barev i logem pomůžu i samostatně, viz grafické a fotoeditační práce. A pokud chystáte nový web, začít můžete návrhem webu zdarma – uvidíte ho i s písmem a barvami dřív, než se pro cokoli rozhodnete.