Příklad – rozteč řádků

Zde se můžete podívat, jaký dopad má rozteč řádků (nastavená vlostností font či line-height) na vzhled a čitelnost textu.

100% velikosti písma

Písmo je hodně husté a obtížněji se čte. Používejte spíše pro krátké, nepříliš důležité texty (např. informace o copyrightu a podobně).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida viverra nulla. Suspendisse feugiat. Praesent vel nisl. Curabitur ultricies ultricies odio. Suspendisse potenti. Proin blandit. Quisque varius cursus magna. Donec vel nunc. Sed justo orci, pellentesque ac, convallis quis, pharetra in, turpis. Curabitur luctus risus sit amet nulla. Etiam ac risus vel nibh egestas mollis. Maecenas wisi. Vestibulum suscipit nonummy sem. Maecenas adipiscing. Mauris blandit, tellus at iaculis fermentum, mauris arcu tristique velit, in suscipit justo massa vitae nulla. Donec adipiscing lectus. Aenean hendrerit. Pellentesque ut odio eget eros aliquam luctus. Curabitur sit amet urna. Nunc euismod faucibus erat.

120% velikosti písma

Standardní rozteč používaná typografy jako nejběžnější pro „normální text“. Řádky jsou od sebe vzdáleny tak akorát, text se slušně čte, oku při přeskoku na následující řádek nehrozí smyk, pokud ovšem řádky nejsou příliš dlouhé. Hodnotou 120% víceméně nic nezkazíte.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida viverra nulla. Suspendisse feugiat. Praesent vel nisl. Curabitur ultricies ultricies odio. Suspendisse potenti. Proin blandit. Quisque varius cursus magna. Donec vel nunc. Sed justo orci, pellentesque ac, convallis quis, pharetra in, turpis. Curabitur luctus risus sit amet nulla. Etiam ac risus vel nibh egestas mollis. Maecenas wisi. Vestibulum suscipit nonummy sem. Maecenas adipiscing. Mauris blandit, tellus at iaculis fermentum, mauris arcu tristique velit, in suscipit justo massa vitae nulla. Donec adipiscing lectus. Aenean hendrerit. Pellentesque ut odio eget eros aliquam luctus. Curabitur sit amet urna. Nunc euismod faucibus erat.

150% velikosti písma

Nadstandardní vzdálenost řádků. Text je vzdušný a působí lehce vznešeně. Nevýhodou je, že má větší spotřebu místa. Podle některých jsou hodnoty mezi 140% a 160% optimální pro WWW stránky, protože se dobře a rychle čtou, a to i pokud jsou řádky dlouhé.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida viverra nulla. Suspendisse feugiat. Praesent vel nisl. Curabitur ultricies ultricies odio. Suspendisse potenti. Proin blandit. Quisque varius cursus magna. Donec vel nunc. Sed justo orci, pellentesque ac, convallis quis, pharetra in, turpis. Curabitur luctus risus sit amet nulla. Etiam ac risus vel nibh egestas mollis. Maecenas wisi. Vestibulum suscipit nonummy sem. Maecenas adipiscing. Mauris blandit, tellus at iaculis fermentum, mauris arcu tristique velit, in suscipit justo massa vitae nulla. Donec adipiscing lectus. Aenean hendrerit. Pellentesque ut odio eget eros aliquam luctus. Curabitur sit amet urna. Nunc euismod faucibus erat.

200% velikosti písma

Řádky jsou opravdu hodně vzdáleny. Vhodné pro krátké texty, které mají vypadat reprezentativně (např. pozvánky), případně pro speciální účely (třeba menu).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida viverra nulla. Suspendisse feugiat. Praesent vel nisl. Curabitur ultricies ultricies odio. Suspendisse potenti. Proin blandit. Quisque varius cursus magna. Donec vel nunc. Sed justo orci, pellentesque ac, convallis quis, pharetra in, turpis. Curabitur luctus risus sit amet nulla. Etiam ac risus vel nibh egestas mollis. Maecenas wisi. Vestibulum suscipit nonummy sem. Maecenas adipiscing. Mauris blandit, tellus at iaculis fermentum, mauris arcu tristique velit, in suscipit justo massa vitae nulla. Donec adipiscing lectus. Aenean hendrerit. Pellentesque ut odio eget eros aliquam luctus. Curabitur sit amet urna. Nunc euismod faucibus erat.

80% velikosti písma

Druhý extrém. Řádky jsou natlačeny na sobě a text se čte velmi obtížně. Řeknu to jednoduše: hodnoty pod 100% nepoužívejte.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida viverra nulla. Suspendisse feugiat. Praesent vel nisl. Curabitur ultricies ultricies odio. Suspendisse potenti. Proin blandit. Quisque varius cursus magna. Donec vel nunc. Sed justo orci, pellentesque ac, convallis quis, pharetra in, turpis. Curabitur luctus risus sit amet nulla. Etiam ac risus vel nibh egestas mollis. Maecenas wisi. Vestibulum suscipit nonummy sem. Maecenas adipiscing. Mauris blandit, tellus at iaculis fermentum, mauris arcu tristique velit, in suscipit justo massa vitae nulla. Donec adipiscing lectus. Aenean hendrerit. Pellentesque ut odio eget eros aliquam luctus. Curabitur sit amet urna. Nunc euismod faucibus erat.

zpět: CSS – vlastnost font