Rodina písma

Rodina určuje základní charakter vzhledu písma. Typicky obsahuje několik řezů (písem) vycházejících ze společného základu – základní „obyčejné“ písmo, kurzívu, tučné písmo a podobně. Rodina je to, čemu máme ve zvyku říkat „font“.

Je identifikována svým jménem. Například na následujícím obrázku vidíte několik členů rodiny Legacy Serif.

Určení rodiny

Jméno rodiny definuje vlastnost font-family. Její hodnotou je čárkami oddělovaný seznam jmen rodin, která klient může použít. Postupuje seznamem směrem zleva doprava a použije první rodinu, kterou má k dispozici. font-family vám tedy umožňuje nabídnout klientovi několik alternativ a zároveň určit jejich preference. Pokud jméno rodiny obsahuje uvozovky, je třeba je uzavřít do uvozovek.

Například kdybych chtěl pro uričtý prvek použít výše uvedenou rodinu Legacy Serif a jako alternativu připustil libovolné serifové (čili patkové) písmo, definoval bych:

font-family: "Legacy Serif", serif;

Obecné rodiny

Tím se dostávám k zajímavému konceptu – obecným názvům rodin. CSS jich definuje pět:

Hlavní výhodou obecných jmen je, že se ponechává na libovůli klienta, které písmo pro ně použije. Ten si pak může vybrat z nabídky svého operačního systému, případně podle své konfigurace.

Upřímně řečeno rodiny cursive a fantasy jsou dost obskurní a nikdo je nepoužívá. Leckterý klient pro ně sáhne po rodině, jež nemá požadované charakteristiky. Příklady vidíte výše. Spolehnutí je jen na první tři, které ostatně mají i rozumné uplatnění.

Rodinný Babylon

Názvy dostupných rodin se od sebe diametrálně liší v závislosti na operačním systému (a případně i na nestandardních písmech, která uživatel instaloval – Legacy Serif na běžném počítači nenajdete). Existují dva základní přístupy, jak se s tímto zmatkem vypořádat:

Minimalistický:

Použijete jen obecnou rodinu, například font-family: sans-serif. Klient dosadí vhodné písmo ze svého systému, které má vámi požadovaný základní charakter:

:root {
    font-family: serif;
}

Použít webové písmo:

Současné prohlížeče si dovedou stáhnout webové písmo a použít je pro danou stránku. Nejste tedy omezeni na písma dostupná v operačním systému uživatele (o nichž nic nevíte a nedají se předvídat), ale můžete poskytnout konkrétní písmo pro svůj web. Jako záložní variantu k němu ale vždy uveďte obecnou rodinu stejného charakteru (serif nebo sans-serif), aby měl prohlížeč co použít, pokud by stažení písma nedopadlo:

:root {
    font-family: "Legacy Serif", serif;
}

Nemá valný smysl uvádět všudypřítomné rodiny písem jako je Times New Roman, Times, Arial či Helvetica. Bývají spojeny s obecnými rodinami, takže stačí uvést font-family: sans-serif a prohlížeč v prostředí MS Windows použije Arial, zatímco v macOS Helveticu.

Webová písma

Jak prohlížeči poskytnout webové písmo? Slouží k tomu v CSS deklarace @font-face, která ve stručnosti říká „písmo s těmito vlastnostmi si stáhni támhle“. Vypadá nějak takto:

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: normal;
    src: url(/fonts/Inter-Regular.woff2);
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: normal;
    src: url(/fonts/Inter-Italic.woff2);
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    src: url(/fonts/Inter-Bold.woff2);
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: bold;
    src: url(/fonts/Inter-BoldItalic.woff2);
}

V tomto případě říká, ze kterých adres si prohlížeč může stáhnout jednotlivé varianty písma z rodiny Inter. Prohlížeč samozřejmě stahuje jen ty řezy písma, které jsou na stránce skutečně použity.

Pro webová písma byl vytvořen speciální formát WOFF (Web Open Font Format), aktuálně ve verzi 2. Distribuce volně šiřitelných písem jej často rovnou obsahují, nebo jej lze vytvořit různými konvertory z běžných formátů TrueType či OpenType.

Hodnota src může obsahovat několik položek oddělovaných čárkami. Jako obvykle je prohlížeč postupně zkouší a použije první, u které uspěje. Velmi vhodné je začínat hodnotu funkcí local(), díky které klient použije lokálně instalované písmo, pokud je v systému k dispozici. Když není, stáhne si je:

    src: local(Inter), url(/fonts/Inter-Regular.woff2);

Pokud chcete na svém webu použít specifické písmo a nechcete si s ním dělat velké starosti, můžete využít službu Google Fonts. Vyberte si písma, která na webu chcete mít, klikněte na „Get font“ a následně „Get embed code“. Zobrazí se kód, který si zkopírujete do záhlaví svých stránek. Odkazuje se na Google Fonts, odkud prohlížeč získá jak CSS s definicemi @font-face, tak soubory písem v nich obsažené. Katalog Google Fonts obsahuje valnou většinu kvalitních volně šiřitelných písem. Nemáte-li opravdu speciální požadavky, určitě si vyberete.

Systémová písma

Nejsou sice dostupná prostřednictvím font-family, ale jen v rámci integrující vlastnosti font. Nicméně hodně se týkají rodiny, proto se o nich zmiňuji i zde. Lze totiž nastavit, aby části stránky byly zobrazeny stejným písmem jako například popisky ikon.