13 + 1 instrukce typografie pro weblog

20.03.2024
blog janajanec
blog janajanec

95 % blogu tvoří text. Estetiku textu řeší typografie a typografické normy, kterou má v malíku grafik či webdesigner. Většinou žádného nemáme a patláme si blog amatérsky s profesionálním nadšením. Zpravidla bažíme po líbivosti článků. Přejeme si, aby se naše příspěvky dobře četly a vzbuzovaly emoce. Proto dodržíme čtrnáct pravidel:

1. Použijeme maximálně dva druhy písma

Jeden pro text a druhý pro popisky, menu, nadpisy atd. Vystačíme s jedním fontem, pokud je vhodný pro obsah a zároveň pro nadpisy. Patkové nebo bezpatkové písmo zvolíme s ohledem na podporu české diakritiky. Vybereme dobře čitelné.

2. Rozhodneme se pro větší velikosti písma

Pro obsah na webu volíme v závislosti na druhu písma velikost 15 až 22 px. Pro mobil 14 až 16 px.

3. Nastavíme řádkování (v CSS uvedeno line-height)

Doporučuje se asi o 30 % vyšší, než je velikost fontu. Zhruba platí, že čím menší písmo, tím větší řádkování.

4. Odlišujeme nadpisy, podnadpisy, popisky a běžný text

Pro jednotlivé prvky zvolíme rozeznatelnou vizuální podobu. I když bude stát element samostatně budeme orientovaní například:

Nadpis 1

Nadpis 2

Nadpis 3

Podnadpis

Běžný text

5. Uzpůsobíme šířku textu

Když jsou řádky kratší, nemusí při čtení oko čtenáře kmitat ze strany na stranu. Ideální šířka pro monitor se pohybuje okolo 60 znaků včetně mezer a maximálně 40 znaků včetně mezer pro mobil. 

Právě vidíte ukázku nedodržení ideální šířky. Zkrátka, stále je co vylepšovat.

6. Text na weblogu zarovnáme doleva

Krátké texty např. nadpisy můžeme zarovnat na střed. Musíme počítat s responzivním zobrazováním. Když zarovnáme do bloku, mohou vzniknout velké mezery. U blogu na blok zapomeneme!

7. Kontrast

Ideálně umístíme tmavý text na světlé pozadí. Obrácená varianta tzn. moderní světlý font na tmavém pozadí se čte o více než 30 % pomaleji a unavuje oči.

Kontrast zvýšíme tím, že některé části textu zvýrazníme např. tučným písmem. Zde je namístě uvážlivost. Dosáhneme u čtenáře zvýšení rychlosti čtení, ale podpoříme tendenci přeskakování zbytku textu.

Nezvýrazňujeme písmo podtržením, protože takto označený text ustáleně považujeme za odkaz.

8. Verzálky / kapitálky / majuskule

Velká písmena používáme pouze pro nadpisy případně krátké texty. Běžné řádky vylepšené Caps Lockem publikum přeskočí, protože se špatně čte.

9. Uvozovky

Pišme je česky. První mají tvar malých devítek a jsou vždy dole, ty druhé jsou naopak nahoře a mají tvar malých šestek.

Přesto, že jsem si ve Wordu připravila ukázkový příklad, jak mají uvozovky správně vypadat, editor vyrobil uvozovky "takhle." To je špatně. Ještě jsem záhadu nerozlouskla. Prozatím se smiřuji s uvedenou variantou.

10. Jeden vykřičník!

Typografie naše rozhořčení umocněné deseti vykřičníky nechápe. Takto ne!!!!!!!! Nepřipouští ani variantu vykřičníku před a po. !Tohle také ne!

11. Jeden otazník?

Za otázku vkládáme opravdu jen jeden otazník. V rámci expresivního vyjádření jich víc vidíme například
na reklamních poutačích, ale do textů nepatří.  Ani do blogových!

12. Tři tečky …

Ne dvě, také ne osm ani pět. Víc a míň puntíků výpověď nejen neumocní nýbrž ani neumenší.
Za třemi tečkami se interpunkční tečka nedělá.

13. Kombinace vykřičníku a otazníku

Varianta je možná, ale bez mezery. Často ukončuje řečnickou otázku. Nejlépe vypadá v pořadí otazník, vykřičník. Pořadí není striktně dáno, ale zvolené dodržujeme v celém textu

+ 1 "Trčkám" eventuálně koncům řádků neboli mezerám, či kde a jak vsuneme textovou přestávku se věnuji v samostatném příspěvku: Mezery jsou na blogu vědeckou typografií

Děkuji za sdílení. Přivítám váš názor na typografické i jiné normy, napište mi🖊