Tipográfia: hierarchia és hang magyarul
Day 7 of 30 · The Playbook 2026 – Mesterkurzus Designereknek
Felépíted a tipórendszert: szerepek, méretek, súlyok, sorhossz (karakterszám), ritmus, hang.
Tanulási cél
- Definiálsz tipó szerepeket (display, h1–h6, body, caption, code).
- Beállítod a ritmust (line-height, spacing, max sorhossz).
- Összekötöd a Visual Intenttel (hang, formalitás, sűrűség).
- Dokumentálsz jó/rossz példákat.
- Alkalmazod egy képernyőre.
Miért fontos
- A tipó teremti meg a hierarchiát.
- Hangot és bizalmat közvetít.
- Sorhossz és ritmus hat a használhatóságra.
Magyarázat
Szerepek
- Display/Hero (kiemelés, ritkábban).
- H1–H6 (struktúra, 1.2–1.4 line-height).
- Body (14–16px, 1.5–1.7 line-height, 60–75 karakter sorhossz).
- Caption/Label (12–13px, kontraszt erősebb).
- Code/Mono (fix-szélesség, kisebb sorhossz).
Hang
- Súly: mennyire merész?
- Kerek vs szögletes betűforma.
- Spacing: mennyire levegős?
Példák
Rossz: Ugyanaz a méret mindenhol, nincs kontraszt.
Jó: H1 32/40, H2 24/32, body 16/24, caption 12/16, max 70 karakter, konzisztens margin-top/bottom.
Gyakorlat (vezetett, 10-15 perc)
- Hozd létre a tipó-mátrixot: szerep, méret, sor-köz, súly, letter-spacing.
- Állíts be max sorhosszt (60–75 karakter) és title spacinget.
- Kapcsold össze a VIS-sel (pl. formális → kisebb spacing, nagyobb súly).
Gyakorlat (önálló, 5-10 perc)
Alkalmazd egy képernyőre (landing szekció), készíts jó/rossz összevetést.
Önellenőrzés
- Tipó szerepek definiálva.
- Sorhossz, line-height rögzítve.
- Hang kötve a VIS-hez.
- Jó/rossz példa dokumentálva.
Opcionális mélyítés
- Better Web Type: https://betterwebtype.com/articles/
- Material 3 Type roles: https://m3.material.io/styles/typography/overview