A tipográfia a design system egyik alapköve, ami kényelmes olvashatóságot és egységes megjelenést biztosít a különböző platformokon és felületeken. A tipográfiai szabályok követése segít a tartalom világos és hatékony közlésében.
A tipográfiának jelentős szerepe van az információk hierarchiájának meghatározásában. A különböző méretek és vastagságok különböző fontossági szinteket közvetítenek. A nagyobb, vastagabb vagy erősebb színű elemek hangsúlyosabbak, jobban vonzzák a tekintetet.
A vizuális súly mellett az elemek pozíciója és a körülöttük lévő tér (whitespace) is segíti a kiemelést vagy az információk háttérbe szorítását.
Fontos, hogy a vizuálisan szignifikáns elemeket szemantikailag is megfelelően implementáljuk. Például minél nagyobb egy cím, annál magasabb szintű headingként kell kódolni, hogy az asszisztív technológiát használó olvasók és a keresőmotorok is értelmezni tudják a hierarchiát.
A szem és az agy már a szavak elolvasása előtt feldolgozza a betűformák funkcionális és esztétikai jellemzőit. Az olvashatóság (legibility) azt jelenti, hogy mennyire könnyű azonosítani a betűtípus egyes karaktereit.
Az olvasható betűtípus jól megkülönböztethető, felismerhető karakterekből áll, kisebb méretben is jól olvasható és sokféle használatra alkalmas.
Az érthetőség (readability) arra utal, hogy a formátum és a megjelenés alapján mennyire könnyen olvasható a szöveg. Az optikai olvashatóság a betűtípus minőségéhez kapcsolódik, az érthetőséget viszont az befolyásolja, hogy hogyan tervezzük meg a szöveget.
A tervezés során többek között a szöveg mennyiségét, a kontextust és a látásélességet is figyelembe kell venni. Ezek a tényezők határozzák meg a méreteket, a súlyokat, a térközöket és a tipográfiai tervezés egyéb szempontjait.
A design system az Inter nyílt forráskódú, variable betűtípust használja, egyedi, olvashatóságot segítő OpenType beállításokkal.
A betűtípus több mint 2000 glyphet tartalmaz, amellyel 147 nyelv támogatható. A betűméretek és vastagságok optikailag korrigáltak, így megbízható és robusztus alapot adnak a digitális felületek tervezéséhez.
A hasonló betűformák megkülönböztethetősége miatt a betűtípust a következő OpenType beállításokkal használjuk:
- A nagy “I” betű talppal ellátott, hogy jobban elkülönüljön a kis “l” betűtől.
- A kis "l" betű nem teljesen egyenes, hogyan jobban elkülönüljön a nagy “I” betűtől és az "1" karaktertől.
- A "0" karakter áthúzott, hogy jobban elkülönüljön a nagy “O” betűtől
Az Inter karakterei viszonylag magas x-heighttal rendelkeznek, ezért kisebb méreteken – például mobileszközökön – is jól olvashatóak.
A bekapcsolható “tnum” OpenType beállítással a számok fix méretűvé változtathatóak. Ez könnyebben összehasonlíthatóvá teszi a számokat például táblázatos elrendezésnél, mivel a helyiértékek egymás alá kerülnek.
Bizonyos alkalmazásoknál, ahol fontos a betöltési sebesség, indokolt lehet az operációs rendszer alapértelmezett betűtípusának használata. A design system token rendszere támogatja a betűtípusok cseréjét.
Bár az Inter betűtípusban a különböző vastagságok optikailag korrigálva vannak, alapértelmezetten csak a medium és a bold vastagságot használjuk.
Folyószövegeknél a medium vastagságot használjuk.
Címeknél a bold vastagságot használjuk. A bold vastagság kellően kontrasztos a mediumhoz képest, így a többi vastagságra nincs szükség.
A szöveg formázásával javíthatjuk az áttekinthetőséget, illetve módosíthatjuk a jelentést vagy a tónust.
- Folyószövegekben kiemelésre a félkövér (bold) vagy a dőlt (italic) stílust használjuk. A félkövér és a dőlt kombinálását érdemes kerülni.
- Javítások vagy frissítések kommunikálására az áthúzott (strikethrough) stílust használjuk.
- Aláhúzást (underline) csak linkeknél használunk.
Nagyobb méretű címeknél -2%-os betűközt alkalmazunk, hogy a betűk közötti tér kiegyensúlyozottabbnak tűnjön.
A design system színei a kontrasztcéloknak megfelelően generáltak. Ez biztosítja az olvashatóságot.
Mind a neutrális, mind a márka, mind a szemantikai skálán három színerősség használható: subtle, base vagy strong.
A kényelmesen olvasható – könnyen követhető és feldolgozható – szövegek sorszélessége 45 és 75 karakter között van.
A szöveges komponensek ennek megfelelő alapszélességgel rendelkeznek.
- Folyószövegeknél 1,5-szeres sorközt használunk.
- Címeknél 1,25-szörös sorközt használunk, hogy sortörésnél se okozzanak elrendezési problémát a nagyobb betűméretek.
A különböző befoglalójú (bounding box) elemeknél a sormagasság önmagában nem mindig eredményez optikailag helyes elrendezést. Ilyen esetekben vertikálisan középre igazítjuk a komponensek elemeit.
Az optimális vertikális ritmus és ez összetartozó információk azonosíthatósága érdekében a szöveges komponensek az eltartásaikat, margóikat is definiálják.
A folyószövegek felső margója a betűméret X-szerese, alsó margója a betűméret Y-szorosa.
A címek felső margója a betűméret X-szerese, alsó margója a betűméret Y-szorosa.
A design system tipográfiai skálái minden platformon harmonikus megjelenést biztosítanak. A tipográfiai skálából két méretváltozatot használunk, egyet mobileszközökre, egyet pedig asztali eszközökre definiálva.
Mindkét skálán belül külön cím és folyószöveg opciókat hoztunk létre, amiket a tipográfiai komponensekben összehangoltunk. A skála egy úgynevezett “major second type scale”, azaz minden betűméret az előző méret 1,125-szöröse, kerekítve.
Az így előálló méreteket szemantikai címkékkel láttuk el. A szemantikai címkék segítik a helyes használatot és a megfelelő tartalmi hierarchia elérést.
Mindig a design systemben meghatározott betűméreteket használjuk, hogy ne boruljon fel a tipográfia hierarchiája és egyensúlya a felületeken.
Ha valamilyen okból mégis felül kell írni a betűméretet, akkor is érdemes a tipográfiai skálából választani a tokent.
Az aláhúzás általában a linkeket jelöli. Összezavarhatja a felhasználókat, ha nem linkel az aláhúzott szöveg.
Általában a magyar helyesírás szabályai szerint nagybetűzünk.
- Nagy kezdőbetűvel kezdjük a mondatokat, a címeket, a tulajdonneveket és a felületi elemek (gombok, labelek, checkboxok, stb.) szövegeit. Ügyelünk rá, hogy csak az első szó kezdőbetűje nagy!
- Ha folyószövegben egy felületi elemre hivatkozunk, nagy kezdőbetűvel kezdjük. (Pl. A folytatáshoz kattintson a Tovább gombra!)
- Nem írunk nagybetűvel teljes szavakat, mert rontja az olvashatóságot. Kiemelésre félkövér (bold) vagy dőlt (italic) stílus használható.
Nem használunk behúzást a bekezdések elkülönítésére. Erre a célra a margók szolgálnak.
Nem használunk teljesen sorkizárt szövegblokkokat. A sorkizárt szövegekben lyukak keletkeznek, ami nehezíti az olvasást, különösen a kognitív zavarral vagy diszlexiával élők számára.
A középre rendezett, 2-3 rövid sornál hosszabb szövegek nehezebben olvashatóak, mert nehezen találja meg a sorok elejét a tekintet.
A szemantikai hierarchia bizonyos esetekben eltérhet a vizuálistól.
Ezeket az eseteket mindenképpen dokumentálni kell, hogy ne készüljön olyan implementáció a fejlesztés során, amely összezavarhatja az asszisztív technológiákat használókat.
