Typografie

Písmo

Jaké písmo, jak velké a jak tučné. Čtyři vlastnosti, které rozhodnou o tom, jak text působí.

Vysázíme krátký článek z tábora. V náhledu vidíte, kam se dostaneme.

Začátek

Výchozí písmo

Článek zatím nemá žádná pravidla pro písmo. Prohlížeč použije své výchozí písmo a výchozí velikosti nadpisu a odstavců.

Jediné pravidlo je max-width, aby řádky nebyly přes celou obrazovku.

Vlastnost · 1

Rodina písma font-family

Písmo se zadává seznamem. Prohlížeč vezme první, které v počítači najde. Když nenajde žádné, použije poslední položku: obecnou rodinu.

Obecné rodiny jsou tři hlavní: serif (patkové), sans-serif (bezpatkové) a monospace (neproporcionální). Název s mezerou patří do uvozovek.

Vlastnost · 2

Webfont

Georgia je v počítači skoro všude. Když chceme jiné písmo, musí si ho prohlížeč stáhnout. Nejsnáz z Google Fonts: jeden <link> a pak už jen název ve font-family.

Na skutečné stránce patří <link> do <head>. Fallback písma v seznamu nechte: kdyby se stažení nepovedlo, text se zobrazí aspoň v nich.

Vlastnost · 3

Velikost font-size

Text článku trochu zvětšíme, nadpis výrazně a úvodní odstavec (perex) někam mezi. Velikosti píšeme v rem, tedy jako násobky výchozích 16 px.

Proč rem a ne px? Když si čtenář v prohlížeči zvětší písmo, rem se zvětší s ním. Víc v lekci Jednotky.

Vlastnost · 4

Tloušťka font-weight

Nadpisy jsou ve výchozím stavu tučné. Velký nadpis ale působí lehčeji a elegantněji tenký.

Hodnoty jsou od 100 (vlasové) do 900 (černé). normal je 400, bold 700. Tloušťka musí být stažená, proto má odkaz na písmo v sobě wght@300;700.

Vlastnost · 5

Kurzíva font-style

Perex odlišíme kurzívou. Čtenář hned pozná, že jde o úvod, ne o běžný text.

Zpět na rovné písmo vrátí font-style: normal. Hodí se třeba u <em>, který je ve výchozím stavu kurzívou.

Responzivita

Na telefonu menší nadpis

Nadpis velikosti 2.75rem se na úzký displej skoro nevejde a láme se po jednom slově. Na mobilu ho zmenšíme, perex také.

Běžný text zmenšovat nemusíte. Na telefonu ho čteme zblízka, 18 px je tam akorát.

Shrnutí

Málo písem, jasné rozdíly

Ano

• font-family s fallback písmy a obecnou rodinou na konci
• nejvýš dvě písma: jedno na nadpisy, jedno na text
• font-size v rem
• stáhnout jen tloušťky, které opravdu použijete
• menší nadpisy na mobilu

Ne

• pět různých písem na jedné stránce
• tučný nebo kurzívou celý odstavec

Další lekce: Text →