Hlavní strana Články o typografii Typografická příručka Reference Odkazy Diskuse

Typografie a kaskádové styly (CSS)

CSS? Jak?

CSS (kaskádové styly), a to už ve své první verzi, nabízejí široké možnosti definice konkrétního fontu. Ve stručnosti:

• font-family - rodina fontů
• font-style - sklon písma
• font-variant - kapitálky
• font-weight - tloušťka (duktus) písma
• font-size - velikost (stupeň) písma

Některými dalšími vlastnostmi pro práci s textem se zabývám v kapitole Sazba. Další pokročilé CSS vlastnosti (font-size-adjust, font-stretch) a direktivy (@font-face) pak záměrně opomíjím, v praxi se využívají minimálně. V případě Vašeho zájmu Vás odkážu na precizního Petra Staníčka.

font-family

O této vlastnosti pojednávala celá minulá kapitola, proto jen v maximální stručnosti. Vlastnost font-family definuje množinu fontů, kterými může být text vykreslen. Nejvyšší prioritu pak má řez uvedený jako první, není-li v systému přítomen, použije se druhý, třetí… Je dobrým zvykem uzavírat seznam řezů obecnou rodinou fontů. Nevyhovuje-li žádný font našemu zadání, použije se výchozí font daného systému.

font-style

Vlastnost font-style nastavuje sklon písma. Může nabývat tří hodnot - normal (výchozí), italic a oblique. Hodnota normal znamená, že písmo bude vykresleno bez sklonu, resp. se svým přirozeným sklonem. Italic vykreslí písmo kursivou, není-li verze s kursivou k dispozici, pokusí se vykreslit písmo s umělým sklonem. Oblique vykreslí daným řezem uměle skloněný text.

Např.

Příklad 1 - normal; Příklad 2 - italic; Příklad 3 - oblique;

font-variant

Font-variant může nabývat dvou hodnot: normal a small-caps. V případě druhé hodnoty vykreslí text tzv. kapitálkami, což jsou snížené verzálky (nižší velká písmena). Například:

Příklad 1 - celý text je vysázen kapitálkami.

font-weight

Vlastnost font-weight je první, která začne dělat neplechu. Jejími hodnotami jsou normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 a 900. Zádrhel je v tom, že prohlížeč v drtivé většině případů dokáže vykreslit pouze dva stupně - písmo normální a tučné. Násobky sta označují tučnost fontu, 100 je tedy nejtenčí a 900 nejtučnější, avšak v praxi se tohoto zápisu většinou nepoužívá, neboť je závislý na daném typeface, nikoliv na prohlížeči. Hodnotu bolder pak většina prohlížečů vezme rovnu hodnotě bold a lighter raději nijak nerealizuje. Tyto relativní hodnoty (bolder a lighter) jsou také závislé na dodaném typeface.

Příklad 1 - v bold textu je začleněna hodnota lighter.

Příklad 2 - v normal textu je začleněna hodnota bolder.

font-size

A je to tady. Definice velikosti písma je metaforickou Mekkou všech amatérských typografů. Méně poeticky řečeno, je to problém. Vlastnost font-size může nabývat hodnot absolutních a relativních, stejně tak dobře může být vyjádřena délkovou jednotkou či procentuální velikostí.

Mezi absolutní hodnoty řadíme xx-small, x-small, small, medium, x-large a xx-large. A už zde vzniká první rozpor – takto definovaná velikost bude v Mozille (či přesněji řečeno v prohlížečích založených na jádru Gecko) o jeden stupeň menší než v Internet Exploreru, který běží v quirk módu (více zde). Například velikost small odpovídá v Internet Exploreru 16px písmu, zatímco v Mozille pouze 13px. Není to chyba, je to jen použití rozdílných převodních tabulek. Pakliže se chcete vyhnout odlišnému vykreslení, používejte validní DOCTYPE (viz. zde), které bude na první řádce dokumentu či pro deklaraci použijte nějakého CSS hacku, který zajistí, že pro Mozillu bude definována velikost o stupeň větší. Například tedy:

Druhý řádek vidí pouze, neubráním se pojmu „pokročilejší“, prohlížeče. Pravá špičatá závorka je totiž selektorem přímého potomka, kterýžto zápis však IE nezná a tudiž jej ignoruje.

Relativní hodnoty jsou dvě: smaller a larger. Je-li například definována velikost small, tak po použití larger bude nová hodnota medium. Nejsnáze si ukážeme na příkladu:

Obsah tagu p následovaný obsahem tagu span

Třetí možností je použít jednotky px, pt, em, ex, mm, cm, pc či in. Pixel (px) je jeden obrazový bod, typografický bod (pt) je 1/72 palce, jinak též platí přibližná rovnost 3pt = 4px, čtverčík (em) je definován jako šířka velkého písmene M, ex je výška malého písmene x, milimetry a centimetry určitě znáte, cicero, neboli pica (pc) je rovno dvanácti typografickým bodům (tedy přibližně šestnácti pixelům) a konečně palec je roven 2,54cm (při rozlišení 96dpi je samozřejmě roven i 96px). Taková přehršel jednotek je pro běžné užití k ničemu. Často se používají pixely a čtverčíky, zřídka pak typografické body, ostatní jednotky živoří či mají význam ve stylování dokumentů pro alternativní média jiná než obrazovka.

Písmo, jehož velikost je definována v pixelech, nelze v Internet Exploreru zvětšit. Toho se často využívá pro konstrukci prvků, vyžadujících fixní výšku textu. Obecně ale platí, že layout libovolné stránky by měl bez potíží unést zvětšení textu alespoň na 200% jeho původní velikosti. Využití jednotky pixel je v tomto případě přinejmenším spekulativní, nehledě na fakt, že alternativní prohlížeče si servítky neberou a takový text bez potíží (a správně) zvětší.

Čtverčíky se příliš nehodí pro definici velikosti písma (při změně velikosti příliš „skáčou“), ale mnohem spíše například pro odsazení textu od okraje stránky. Takové odsazení pak bude vždy přímo uměrné velikosti použitého písma.

Poslední možností je použití procent. Velikost fontu se pak počítá z velikosti rodičovského prvku. Má-li tedy prvek velikost písma 20px, pak vnořený prvek s velikostí 110% bude odpovídat 22px. Procenta se nejvíce hodí všude tam, kde je třeba zachovat možnost změny velikosti textu a přitom mít jistotu, že rozdíly mezi jednotlivými stupni nebudou propastné jako v případě čtverčíků. Pro jednodušší projekty však postačí absolutní hodnoty zmiňované výše.

Shrnutí

Na závěr tabulka, ve které naleznete přehled vlastností pro definici fontu a jejich možných hodnot.

V další kapitole si povíme něco o sazbě na internetu.