Typografie a sazba na webu, proč je důležitá, jak nastavit základní vlastnosti.

1. Typografická sazba
Václav Kijonka
frontend designer/developer
vaclav.kijonka@gmail.com
twitter: @vaclavkijonka
facebook: vaclav.kijonka
instagram: vaclav.kijonka

2. Písmo
je nejvýznamnější projev sdělení už 5000 let
tvoří
90 %
obsahu na webu

4. Čím více člověk čte,
tím více dává
textovému obsahu váhu.

5. https://i.iinfo.cz/files/iac/463/iac-2017-netmonitor-rocenka-2016-1.pdf

6. Čitelná, harmonická
(první dojem, návratnost)
Adaptivní
(uživatel, zařízení)
Jednoduchá
(tvorba, úpravy)

7. Základní nastavení
Typografická mřížka
Layout + responsive

8. Základní velikost písma
:root {
font-size: 16px;
font-size: 100%;
}
Definováním základní velikosti písma v absolutních jednotkách ničíme
možnosti uživatelského rozhraní v jeho vybraném prohlížeči.
V ČR je cca 74 zrakově postižených lidí, ve světě 285 miliónů
(http://poslepu.cz/kolik-je-v-ceske-republice-zrakove-postizenych-lidi/).

9. Sekané přizpůsobení
html {
font-size: 100%;
@media (min-width: 40em) {
font-size: 110%;
}
@media (min-width: 60em) {
font-size: 120%;
}
}

10. Dynamicky
html {
font-size: calc(1em + 1vh);
}
Testujte 320 px — 3840 px.
320 px: 16 + 3.2px = 19,2 px
3840 px: 16 + 38.4 px = 54,4 px

11. „Jednoduchý vzoreček“
@font-size-base: calc(
@fs-min-u
+ ((100 / @fs-min * @fs-max) - 100) // 50%
* ((100vw - @fs-min-ss-u) / (@fs-max-ss - @fs-min-ss))
// 320px = ((100vw - 20em) / (3520)) = 0
// 3840px = ((100vw - 20em) / (3520)) = 1
);
@fs-min-u: 100%; // Min. FS with unit
@fs-min: 16; // Min. FS (like px)
@fs-max: 24; // Max. FS (like px)
@fs-min-ss-u: 20em; // Min. SS unit
@fs-min-ss: 320; // Min. SS (like px)
@fs-max-ss: 3840; // Max. SS (like px)

12. Bez @media queries
html {
font-size: 100%;//Opera Mini, < IE 11
font-size: @font-size-base;
}
320 px (16 px) — 3840 px (24 px)
https://css-tricks.com/snippets/css/fluid-typography/

13. Každé písmo je jiné
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

14. Velikostní sada písem
@font-size-h1: 2.60(em);
@font-size-h2: 1.80(em);
@font-size-h3: 1.40(em);
@font-size-h4: 1.20(em);
@font-size-h5: 1.10(em);
@font-size-h6: 1.00(em);
@font-size-large: 1.15(em);
@font-size-base: 1.00(em);
@font-size-small: .85(em);
https://www.modularscale.com/

15. Výška řádku
Excepteur sint
occaecat cupidatat
non proident
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Excepteur sint
occaecat cupidatat
non proident
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua.

16. Rovnoměrný přírustek
@line-height-base: 1.5;
.font(@font-size) {
font-size: unit(@font-size, em);
line-height: (1 + ((@line-height-base - 1) / @font-size));
// fs: 16px = lh: 24px, přírustek 8px, lh: 1.5
// fs: 32px = lh: 40px, přírustek 8px, lh: 1.25
}
h1 {
.font(@font-size-h1);
}
.size-lg {
.font(@font-size-lg);
}

17. Harmonický grid systém

18. Vertikální rytmus
@gap: (1rem * @line-height-base);
@gap-200: (@gap * 2);
@gap-175: (@gap * 1.75);
@gap-150: (@gap * 1.5);
@gap-125: (@gap * 1.25);
@gap-75: (@gap * .75);
@gap-50: (@gap * .5);
@gap-25: (@gap * .25);

19. Typografické bloky
Body text
Nadpisy
Zmenšené a „featured“
Interakční (navigace, odkazy,
tlačítka, formuláře, …)
Tabulkové
Technické
Značky, labely (UI), …
Reklamy

20. Ukázka
h1 {
margin-top: @gap-200;
.font(@font-size-h1)
}
h2 {
margin-top: @gap-150;
.font(@font-size-h2)
}
… {…}
:root {
font-size: 100%;
}
body {
font-size: @font-size-base;
line-height: @line-height-base;
}
p,
ul,
table, … {
margin-top: @gap;
}

21. Formulářové prvky
@form-padding: unit(@gap-25, em) unit(@gap-50, em);
button,
.button,
input[type="abc"],
optgroup,
select,
textarea {
border: .0625em solid gray;
border: 1px solid gray;
.font(@font-size-base);
padding: @form-padding;
}

22. Komponenty
.card {
margin: @gap auto 0;
padding: @gap-50 @gap;
}
.card > *:not(:first-child) {
margin-top: @gap-50;
}
<article class=“card”>
<header class=“card-header”>
<h2 class=“card-title”>Karta produktu</h2>
</header>
<div class=“card-content">
<figure>
<img src=“produkt.jpg" alt="Ipsum">
<figcaption>Lorem</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet…</p>
</div>
<footer class="card-footer">
<a class="button size-lg" href="#">Koupit</a>
</footer>
</article>

23. Layout & responsive
Pokud respektujeme uživatelské
nastavení velikosti fontu, definujeme
layout i breakpointy v pružných
jednotkách em.
https://zellwk.com/blog/media-query-units/
https://adamwathan.me/dont-use-em-for-media-queries/

24. Layout
@container-width: 60em;
.container {
width: @container-width;
max-width: 100%;
}

25. Responsive
.card {
@media (min-width: 40em) {
width: percentage(1/2);
}
@media (min-width: 60em) {
width: percentage(1/3);
}
}

26. Doporučení
https://practice.typekit.com/lesson/caring-about-opentype-features/
https://www.zachleat.com/web/font-checklist/
Vytvářejte si systém
Používejte proměnné

27. Jak interpretovat
grafický návrh?
PSD je drahá skica — velká míra improvizace.
Figma/Sketch + InVision — high-fidelity prototyp.
Ani jedna z aplikací není browser.
Finální design laďte na frontendu, ne podle pixelů z návrhu.

28. Vzdělání
Typografická pravidla na ÚJČ
Matematika jako vzorec harmonie
HCD + UX

29. Koho sleduji?
Heydon Pickering
Paul Boagh
Sara Soueidan
Amber Weinberg

30. Díky,
těším se na diskuzi
:-)