Typografia a sadzba

Používateľské rozhrania a používateľský zážitok

Typografia a sadzba

Sergej Chodarev

Typografia

Typografia — vizuálna artikulácia textového obsahu pomocou písma

— Typografický slovník

Väčšina UI je text

Prečo?

Ľahkosť čítania
Štruktúra
Dojem

Typografia

Písmo
Font
Znaky
Formátovanie
Typografická úprava (layout)

Text a znaky

"úvodzovky" „úvodzovky“

Úvodzovky

Rôzne konvencie v rôznych jazykoch
“angličtina”
„slovenčina“
«francúzština»
"strojopisné" úvodzovky

Ďalšie znaky

spojovník (-) vs pomlčka (–) vs dlhá pomlčka (—)
2x2 vs 2×2

Formátovanie

Zvýraznenie

tučný rez
italika
veľkosť
minuskuly, VERZALKY, Kapitálky
podčiarknutie

Princíp minimálneho dostatočného rozdielu

Písmo

serif
sans-serif

proporcionálne
neproporcionálne

Matthew Butterick: Times New Roman alternatives

Rozloženie

Odseky

Medziriadková medzera (leading)

For most text, the optimal line spacing is between 120% and 145% of the point size. Most word processors, as well as CSS, let you define line spacing as a multiple. Or you can do the math—multiply your point size by the percentage. (The text in this paragraph has line spacing of 110%. It’s too tight.)

For most text, the optimal line spacing is between 120% and 145% of the point size. Most word processors, as well as CSS, let you define line spacing as a multiple. Or you can do the math—multiply your point size by the percentage. (The text in this paragraph has line spacing of 135%. It looks fine.)

Line spacing

Dĺžka riadku

45–90 znakov

Rozdelenie

Zarovnanie

Naľavo
Na stred – iba výnimočne
Do bloku

Rozdeľovanie slov

Rieky

Ďalej

Zoznamy
Tabuľky
Ilustrácie
atď.

Sadzba (layout)

Gestalt psychológia

Pravidlo vnútorného a vonkajšieho

vnútorné ≤ vonjakšie

MUSEUM

MUSEUM OF NATURAL SCIENCES

MUSEUM
OF NATURAL SCIENCES

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.