Základní vlastnosti pro práci s písmy jsou v CSS už dlouhá léta a nejspíš je dávno znáte. Nicméně pro pořádek si je projděme. Začněme rodinou, která určuje základní podobu písma.
Nastavíte ji vlastností font-family. Hodnotou mohou být názvy konkrétních rodin nebo obecné názvy serif, sans-serif, monospace a podobně. Obsahuje-li název rodiny mezeru, je třeba jej celý uzavřít do uvozovek. Hodnot může být víc, v tom případě se oddělují čárkami a fungují na principu první bere. Prohlížeč je prochází v pořadí, ve kterém jsou zapsány, a první písmo, které má k dispozici, použije. Může to vypadat třeba takto:
:root {
font-family: "Fira Sans", sans-serif;
}
I v docela rozumných návodech najdete občas doporučení tohoto typu:
:root {
font-family: "Times New Roman", Times, serif;
}
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
}
Nemá smysl uvádět mezi hodnotami generická písma, jako jsou Times New Roman a další zde uvedená. Bývají v prohlížečích nastavena jako výchozí a málokdo si je změní. Takže pro drtivou většinu uživatelů se použijí, i když ponecháte jen obecný název serif či sans-serif. A některým uživatelům můžete prezentaci zhoršit.
Posloužím konkrétním příkladem: vůbec se mi nelíbilo písmo na jednom čajovém e-shopu. Pohled do CSS odhalil, že používá výše zmíněnou kombinaci Arial, Helvetica, sans-serif v kombinaci s kapitálkami. V Linuxu můj Chrome předstíral, že zná Arial, ovšem použil místo něj náhradní písmo. V něm chyběly kapitálky, takže si je vyrobil uměle a výsledek byl dost nechutný. Kdyby hodnotou byl jen obecný sans-serif, ve Windows by se nic nezměnilo (použil by se tentýž Arial) a v Linuxu by se použilo mnou nastavené písmo s mnohem lepším výsledkem. Ostatně, posuďte sami:
Porovnání obou variant ve Windows
Porovnání obou variant v Linuxu
Z toho poučení plyne: Konkrétní jméno rodiny uvádějte jen v případě, jedná-li se o rodinu neobvyklou. Jako záložní hodnotu za ni přidejte obecný název písma stejného charakteru. Tedyserif jako zálohu pro rodinu serifovou,sans-serif pro rodinu bezserifovou amonospace pro rodinu neproporcionální. Nemáte-li na rodinu konkrétní požadavky, ponechte jen obecný název. Čili použijte buď něco jako
font-family: "Fira Sans", sans-serif;
nebo jen
font-family: sans-serif;
Nevypisujte více konkrétních rodin. To mělo smysl v dobách, kdy se prohlížeči nedalo poskytnout webové písmo, takže se autor zkoušel strefit do některého písma dostupného v uživatelově systému. Nebyly výjimkou font-family obsahující pět a více rodin. Dnes je to zbytečné. Stačí konkrétní rodina, kterou si prohlížeč může stáhnout, a obecná záložní, pokud by stažení nedopadlo.
V téhle oblasti má dost prostoru ke zlepšení i root. Zdejší základní nastavení pro články je:
font-family: "Roboto", Arial, Helvetica, sans-serif;
Prostřední dvě rodiny jsou v něm zbytečné, stejnou službu odvede:
font-family: "Roboto", sans-serif;
To ovšem zdaleka není všechno, protože pro různé třídy se na stránce nastavuje několik odlišných kombinací. Najdete tu
font-family: Arial, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, Geneva, sans-serif
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-family: "Oswald", Arial, Helvetica, sans-serif;
Týkají se většinou spodní části stránky, na první pohled je zde v nadpisech viditelné velmi úzké písmo Oswald. Ovšem účinkují i jinde. Nastavení zdejších písem jsem začal zkoumat, když mě praštily do očí uměle generované kapitálky ve jménech v článku. Tady ještě posílené podivnou praxí, kdy je kapitálkami vyznačen první pád jména, zatímco přípony pro skloňování jsou běžným písmem. Je to pracnější, ale zato ošklivější.
Synteticky generované kapitálky ve jménech na Root.cz
V tomto případě třída pro jména používá první z výše uvedených deklarací a opakuje se příběh ze začátku – prohlížeč předstírá Arial a nemá pro něj kapitálky. Upřímně řečeno zde nepomůže odstranění nesmyslného font-family pro jména, protože písmo Roboto sice kapitálky obsahuje, ale z jeho zdejší webové verze byly kvůli úspoře místa odstraněny. Takže by stále byly uměle generovány, jen by vypadaly trochu jinak. S kapitálkami zkrátka bývají na webu problémy, ještě se k nim dostaneme.
Také pro neproporcionální písmo kolísá zdejší CSS mezi několika alternativami:
font-family: monospace, monospace;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-family: "Courier New", Courier, monospace;
Pokud vám vrtá hlavou, jaký význam má opakování monospace v první deklaraci, tak žádný.
Celkem se font-family ve zdejším CSS vyskytuje čtyřicetkrát. To se dost dobře nedá udržet pod kontrolou a nekonzistentní hodnoty jsou poukázkou na problémy. Kapitolu o rodinách bych shrnul do následujících doporučení:
- Vlastnost
font-familypoužívejte vzácně. Pro:rootnastavte výchozí rodinu a případně ji doplňte odlišnou rodinou pro nadpisy, záhlaví nebo jiné bloky, které chcete odlišit. - Obecně není dobrý nápad měnit rodinu uvnitř odstavce. Může to mít smysl, například k odlišení příkazů nebo názvů kláves od běžného textu, ale každou takovou situaci důkladně zvažte.
- Překročí-li počet výskytů
font-familyve vašem CSS desítku, měli byste zpozornět a zamyslet se, jestli jsou opravdu všechny nutné. - Hodnoty
font-familyby měly být jednoduché a vždy končit obecným názvem (serif,sans-serifnebomonospace).
Další vlastnosti
Když je rodina vybrána, zbývá ještě několik dalších vlastností ze staré gardy, které upřesní podobu písma.
Začněme velikostí, alias stupněm podle typografického názvosloví. Řídí ji vlastnost font-size. Má dost širokou nabídku jednotek, ve kterých ji lze zadávat. V praxi jich ale stačí jen pár.
Na obrazovku nepatří absolutní jednotky. Žádné body nebo pixely. Sice už není pravda, že takto definovanou velikost písma nelze v prohlížeči zvětšit či zmenšit, ale pořád platí, že o jeho prostředí nic nevíte. Proto je rozumné držet se jednotek rem a em. Ta první odpovídá výchozí velikosti písma prohlížeče. Lze předpokládat, že uživatel v ní má hodnotu, která mu vyhovuje. Většina si nechá tu, která zde byla po instalaci, ale pokud uživateli výrazně nesedí, nejspíš si ji upravil podle své potřeby.
Všechny „absolutní“ velikosti písma je vhodné odvozovat od této výchozí velikosti a zadávat v jednotkách rem. Má-li být hlavní nadpis stránky trojnásobný a nadpisy druhé úrovně dvojnásobné proti výchozí velikosti, vložte do CSS
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
Jednotka rem je ostatně vhodná i pro jiné rozměry než jen velikost písma. Například obvykle dává větší smysl definovat v nich zlomové body pro změnu responzivního designu než v často používaných pixelech. Je-li okno široké 500px, ale uživatel si nastavil velké výchozí písmo, může se na řádek vejít mnohem méně znaků, než byste očekávali.
Vřele nedoporučuji měnit základní velikost běžného textu, tedy dělat věci jako
:root { font-size: 0.9rem; }
Je to opět stejná písnička: uživatel má prostředí nějak nastaveno a vy nevíte, jak a proč. Jasně, obvykle „protože to tak bylo“, ale těch pár procent uživatelů, kteří si výchozí nastavení změní, to dělá z nějakého důvodu. Nesahejte jim do něj, pokud nemusíte.
Jednotka em odpovídá aktuální velikosti písma v místě, kde je použita. Bude-li platit výše uvedená deklarace, bude uvnitř <h1> platit 1em=3rem, zatímco uvnitř <h2> bude 1em=2rem. Čili hodí se pro konstrukce, jejichž velikost se má přizpůsobovat písmu, které se momentálně používá.
Pro tisk lze vzít na milost absolutní jednotky, pro velikost písma zpravidla typografické body. Dá se předpokládat, že tisknout se bude na papír formátu A4 a rozměrům cílového média přizpůsobit velikost písma. Je proto v pořádku mít v CSS třeba
@media print {
:root {
font-size: 12pt;
}
}
Tučnost aneb duktus písma ovládáte pomocí vlastnosti font-weight. Obvykle si vystačíte s klíčovými slovy normal a bold, ale dá se zadávat i číslem v rozmezí od 1 do 1000. Menší číslo znamená menší duktus, tedy tenčí tahy. Klíčové slovo normal je ekvivalentní hodnotě 400, zatímco bold odpovídá 700.
Číselné hodnoty jsou zajímavé zejména pro variabilní písma s osou pro duktus. Vlastností font-weight ji ovládáte a máte k dispozici rozmezí hodnot které autor písma vytvořil. Můžete například odstupňovat duktus podle úrovně nadpisu. Na následujícím obrázku jsem použil variabilní písmo Inter. Vlevo vidíte standardní podobu všech nadpisů bold, zatímco vpravo jsem duktus hlavního nadpisu zvětšil na 900 a duktus poznámky zmenšil na 200.
Porovnání duktů písma Inter
Kurzíva se nastavuje jednoúčelovou vlastností font-style . Kromě hodnoty normal , která znamená vzpřímené písmo, máte k dispoziciitalic pro přechod na kurzívu. Existuje ještě hodnota oblique , ale raději se jí vyhněte. Umožňuje vybírat z několika skloněných variant, protože za ní lze uvést požadovaný sklon svislé osy písma, například
font-style: oblique 20deg;
Přípustné hodnoty jsou od –90deg do 90deg, výchozí hodnotou je 14deg. Ovšem písma s několika skloněnými řezy se téměř nevyskytují, stejně jako variabilní písma s osou pro sklon. Doporučuji nekomplikovat si život a držet se zavedené hodnoty italic.
Kapitálky, pro něž tak ohyzdně selhal falešný Arial v mém Linuxu, zapnete pomocí font-variant: small-caps. Tato vlastnost ve skutečnosti umí ještě jiné věci, podíváme se na ně později. U tučného písma, kurzívy i kapitálek si hlídejte, aby byl příslušný řez k dispozici. Jinak jej prohlížeč vytvoří synteticky a nebývá na něj pěkný pohled, což jsme ostatně již viděli. Ještě se dostaneme k tomu, jak mu to zakázat. Kapitálky jsou v tomto směru nejnebezpečnější. Jsou celkem exotické a kvůli úspoře místa bývají odstraněny i z písem, která je normálně obsahují. Raději se jim vyhýbejte.
Volitelná šířka písma je spíše vzácná, nicméně v některých rodinách jsou k dispozici i rozšířené nebo naopak zúžené řezy. V CSS se vlastnost pro jejich výběr jmenuje font-stretch. Podle CSS Fonts Module Level 4 má dojít k přejmenování na výstižnější font-width s tím, že původní název zůstane zachován jako synonymum. V současnosti se ale prohlížeče k novému jménu neznají a podporují původní font-stretch.
Pro hodnoty je k dispozici devět klíčových slov. Nejzajímavější jsou základní normal, condensed pro zúžený řez a expanded pro řez rozšířený. Kromě toho lze hodnotu zadat i procentem, přípustný rozsah je od 50% do 200%. U variabilního písma s šířkovou osou tímto způsobem měníte šířku, u statických písem se vybere nejbližší řez. Na rozdíl od kurzívy či kapitálek si prohlížeč nesmí generovat zúžené a rozšířené řezy uměle. Smí používat jen ty, které má k dispozici.
Písmo Inter nemá variabilní šířku, proto jsem v následující ukázce přešel na Noto Sans. Vlevo vidíte základní verzi s maximálně tučnými nadpisy a odlehčenou poznámkou. Vpravo mají tyto části navíc nastaveno font-stretch: 80%. Nadpisům zúžené písmo často sluší.
Porovnání základního a zúženého řezu Noto Sans
Poslední ze základní sady písemných vlastností je řádkový proklad, tedy vzájemné vzdálenosti řádků. Určuje jej vlastnost line-height , opět s dost širokou nabídkou použitelných jednotek. Většinou jej ale definujete vůči aktuální velikosti písma. K tomu lze použít buď procenta, nebo bezrozměrná čísla, kde hodnota 1 odpovídá aktuální velikosti písma.
Z obrazovky se obecně hůře čte, proto se doporučuje používat spíše větší proklad, který lépe vede oko při přesunu z konce jednoho řádku na začátek následujícího. Pro běžný text s dlouhými řádky se doporučuje proklad 1.5 (nebo 150%, pokud dáváte přednost procentům). U nadpisů s velkým písmem nebo vícesloupcového textu, kde jsou krátké řádky, lze uvažovat o menších hodnotách, raději ale ne pod 1.2. Například následující nastavení definuje základní proklad 150% a pro nadpisy jej sníží na 120%:
:root {
line-height: 1.5;
}
h1, h2, h3 {
line-height: 1.2;
}
Zmíněné vlastnosti písma se často nastavují najednou. Abychom nemuseli psát několik vlastností, máme k dispozici souhrnnou vlastnost font, která pokrývá všechny výše uvedené. Její hodnota musí být uspořádána v následujícím pořadí:
výběr_řezu velikost rodina
Velikost a rodina jsou povinné, za velikostí může následovat řádkový proklad oddělený lomítkem. Jednotlivé hodnoty jsou navzájem oddělovány mezerami. Výběr řezu může obsahovat celkem libovolnou směs hodnot vlastností font-weight, font-style, font-variant (přípustná je jen hodnota small-caps) a font-stretch (nelze používat procenta, jen klíčová slova). Vlastnostem, jejichž hodnota není ve výběru řezu uvedena, se nastaví výchozí hodnota, což je u těchto vlastností normal.
Například následující deklarace nastaví na stránce jako výchozí písmo Noto Serif v obvyklé velikosti s řádkovým prokladem 1.5. Žádná hodnota pro výběr řezu zde není obsažena, písmo proto zůstane ve své základní podobě.
:root {
font: 1rem/1.5 "Noto Serif", serif;
}
Pro hlavní nadpis použijeme písmo Noto Sans zvětšené na trojnásobek výchozí velikosti, řádkový proklad zahustíme na 1.2 a nastavíme zúžený řez s maximálním duktem 900:
h1 {
font: 900 condensed 3rem/1.2 "Noto Sans", sans-serif;
}
Pro výrazné změny zahrnující změnu rodiny bývá výhodnější použít souhrnnou vlastnost font. Dílčí úpravy velikosti či jednotlivých parametrů písma je lépe provádět pomocí konkrétních vlastností, aby ostatním zůstaly jejich aktuální hodnoty.
Ještě se vrátím ke strojovému generování chybějících řezů písma, které notoricky nedopadá dobře. Vřele doporučuji je zakázat. Umožňjí to čtyři specializované vlastnosti: font-synthesis-weight pro generování chybějících duktů, font-synthesis-style pro kurzívu, font-synthesis-small-caps pro kapitálky a font-synthesis-position pro horní/dolní indexy. Mají jen dvě hodnoty, výchozí auto, která generování povoluje, nebo none pro zákaz.
Kromě toho existuje ještě souhrnná vlastnost font-synthesis, kterou lze řídit všechny čtyři najednou. Její hodnotu lze poskládat z klíčových slov weight, style, small-caps a position, která povolují generování příslušných řezů, ale vystačíte si s jednoduchým none, které celé tohle zvěrstvo zarazí:
:root {
font-synthesis: none;
}
Prohlížeč v takovém případě smí používat jen existující řezy písma a nesmí si vymýšlet další.
(Autorem obrázků je Pavel Satrapa.)
ČLÁNKY DO MAILU