Typografie

Text

Písmo už máme. Teď ho rozložíme tak, aby se dobře četlo: řádkování, šířka řádku, zarovnání a odkazy.

Upravíme článek s radami na cestu. V náhledu vidíte, kam se dostaneme.

Začátek

Těžko čitelný text

Článek má písmo i velikosti, ale čte se špatně. Řádky jsou natěsno a táhnou se přes celou šířku. Oko se na konci řádku těžko trefí na začátek dalšího.

line-height: normal je výchozí hodnota prohlížeče, zhruba 1.2. Pro delší text je to málo.

Vlastnost · 1

Řádkování line-height

Text potřebuje mezi řádky vzduch. Pro odstavce je dobrá hodnota kolem 1.6. Velký nadpis naopak potřebuje řádkování těsnější.

Pište číslo bez jednotky. 1.6 znamená 1,6násobek velikosti písma, a to u každého elementu zvlášť: u textu i u nadpisu.

Vlastnost · 2

Čitelná šířka

Nejlépe se čtou řádky dlouhé 60 až 75 znaků. Jednotka ch je šířka jednoho znaku, takže to zapíšeme přímo. margin: 0 auto sloupec vycentruje.

Na velké obrazovce tak vznikne úzký sloupec uprostřed. Celý layout je v lekci Úzký sloupec.

Vlastnost · 3

Zarovnání text-align

Hlavičku článku dáme na střed. Odstavce necháme zarovnané doleva: každý řádek pak začíná na stejném místě.

Hodnoty: left, center, right a justify (do bloku). Do bloku se na webu nehodí: prohlížeč nedělí slova, a tak mezi nimi vznikají velké díry.

Vlastnost · 4

letter-spacing

Štítek nad nadpisem převedeme na velká písmena. Velká písmena vedle sebe působí natěsno, proto je trochu prostrčíme.

text-transform mění jen vzhled, v HTML zůstane „Rady na cestu“. Proklad dávejte jen krátkým textům, odstavec by se s ním četl hůř.

Vlastnost · 5

Podtržení text-decoration

Odkaz je ve výchozím stavu modrý a podtržený. Podtržení necháme, aby šlo poznat, že je to odkaz. Jen ho obarvíme, zesílíme a odsuneme od písmen.

text-decoration: none podtržení úplně zruší. U odkazů v textu to nedělejte, čtenář by je přehlédl.

Responzivita

Na telefonu doleva

Na úzkém displeji se nadpis i perex zalomí do několika řádků. Na střed zarovnané řádky pak začínají každý jinde a těžko se čtou. Na mobilu proto hlavičku zarovnáme doleva a nadpis zmenšíme.

Šířku 65ch řešit nemusíte. Telefon je užší, takže max-width se vůbec neuplatní.

Shrnutí

Text, který se čte sám

Ano

• line-height kolem 1.6 pro odstavce, těsnější pro nadpisy
• max-width: 65ch pro sloupec textu
• odstavce zarovnané doleva
• letter-spacing u krátkých textů velkými písmeny
• podtržené odkazy v textu

Ne

• text-align: justify na webu
• dlouhé texty na střed
• řádky přes celou šířku obrazovky

Další lekce: Flexbox →