Tipográfia üzleti weboldalon: karakteres címek, kényelmes olvasás

A betűkészlet feladata

Más követelmény vonatkozik a logószerű címre és a többperces olvasásra szánt szövegre. Határozd meg külön a cím-, törzsszöveg- és kezelőfelületi szerepeket, kevés betűcsaláddal.

A betűcsalád kiválasztásánál elsőként ellenőrizd a magyar ő és ű karaktereket, az írásjeleket, számokat és a szükséges súlyokat. Egyetlen látványos angol szó nem reprezentálja a valódi használatot. Készíts mintát hosszú szolgáltatásnévvel, többbekezdéses cikkel, gombbal, táblázattal és árakkal. A címekhez választott szűk vagy erősen karakteres betű nem biztos, hogy kis méretben is működik. A rendszer ezért szerepeket kapjon: megengedhető egy markáns címbetű, miközben a törzsszöveg nyugodtabb készletet használ. A licenc feltételeit is tisztázni kell, különösen webes beágyazásnál. A végső döntés a tényleges tartalom és használat alapján szülessen meg, ne kizárólag egy hangulati tábla alapján. A választott készletben minden magyar ékezet és szükséges vastagság elérhető.

Hierarchia és ritmus

A túl sok méret és vastagság elmoshatja a tartalom logikai szerkezetét. Alakíts ki következetes méretskálát, amely a címsorok és bekezdések viszonyát is megmutatja.

A tipográfiai hierarchiában a méret csak egy jelzés. A térköz, vastagság és sorritmus együtt mutatja meg, hogyan kapcsolódnak a gondolatok. Ha két alcímszint alig különbözik, a hosszú cikk nehezen átfutható; ha minden bekezdésben több kiemelés van, egyik sem emelkedik ki. A szemantikus címsorrend és a látvány összhangja is fontos. Egy nagy dekoratív szöveg nem feltétlenül főcím, és egy kisebb alcím sem veszti el tartalmi szerepét. A komponensekhez rögzíts szabályokat: kártyacím, szakaszcím, képaláírás és mezőcímke külön feladatot lát el. A későbbi tartalomszerkesztéshez ezek kész formaként legyenek használhatók, ne minden új oldalon kézi méretezéssel alakuljanak ki. Az oldal átfutásakor világos, melyik gondolat melyik szakaszhoz tartozik.

Sorhossz és sortáv

A teljes képernyőszélességet kitöltő szöveg követése és a szoros sorok olvasása nehézkes lehet. Korlátozd a cikkek olvasási szélességét, és valódi többbekezdéses anyaggal ellenőrizd a ritmust.

Az olvasási szélesség kialakításához ne a teljes böngészőablakot használd mérceként. A cikk szövege önálló hasábot kaphat, miközben a kép vagy kiemelt idézet szélesebbre nyílhat. A sortáv és bekezdésköz ne versenyezzen: látható legyen a bekezdések elválása, de a szöveg ne essen szét különálló sorokra. A hosszú magyar szavakat és linkeket külön nézd meg keskeny nézetben. Az elválasztás vagy szótörés ne tegye felismerhetetlenné a fontos szakkifejezést. A jó törzsszöveget több percig érdemes olvasni valódi kijelzőn; egy gyors vizuális átfutás kevés a fárasztó sorhossz felismeréséhez. A cél az, hogy az olvasó figyelme a témán maradjon. Az olvasó könnyen megtalálja a következő sor elejét.

Betöltés és helyettesítő készlet

A webfont megérkezése megváltoztathatja a szöveg méretét és az oldal elrendezését. Válassz hasonló metrikájú helyettesítő betűt, és csak a szükséges fájlokat töltsd le.

A betűfájlokhoz a szükséges karakterkészletet és súlyokat válaszd ki, fölösleges változatok nélkül. A későn megérkező webfont átírhatja a sorok törését, ezért a helyettesítő betű metrikái számítanak. A betöltési stratégiát annak megfelelően alakítsd, mennyire fontos azonnal az adott arculati betű. Nem indokolt minden betűfájlt előtöltéssel versenyeztetni a nyitóképpel. A fejlesztői hálózati nézet megmutatja, mi töltődik ténylegesen; a mérési felvételen pedig látható a szöveg váltása. Tesztelj olyan helyzetet is, amikor a betű nem érkezik meg. A tartalom ilyenkor se tűnjön el, és a gombok szélessége ne váljon használhatatlanná. A tipográfia része a hibás hálózati helyzetben adott olvashatóság is. Lassú kapcsolaton a szöveg olvasható marad, és nem ugrik jelentősen.

Rugalmas méretezés

A hosszú szolgáltatásnevek és nagy címsorok mobilon túlfuthatnak. Rugalmas méretszabályt és természetes törést használj, merev sorokra tördelés helyett.

A címsorokat ne kizárólag előre meghatározott sorokra törve kezeld. Egy szerkesztő később hosszabb szolgáltatásnevet írhat, a látogató pedig nagyíthatja a böngészőt. A rugalmas méretezésnek legyen ésszerű alsó és felső határa; a nagyon széles képernyő sem indokol korlátlan növekedést. A gombfelirat és navigáció külön ellenőrzést igényel, mert ott a szöveg hosszának funkcionális következménye van. A magyar és más nyelvi változatok eltérő terjedelme szintén próbaanyag lehet. A terv akkor ellenálló, ha nem egyetlen idealizált mondathoz igazodik. A cím tartalma maradjon szerkeszthető, a tördelés pedig a rendelkezésre álló térhez alkalmazkodjon, a fontos szó levágása nélkül. Keskeny nézetben és böngészőnagyítás mellett sincs levágott tartalom.

Kontraszt és állapotok

A halvány szürke felirat vagy vékony betűstílus fontos információt rejthet el. A szövegszíneket minden tényleges háttéren ellenőrizd, a linkek és fókuszállapotok mellett.

A bordó és szürke árnyalatoknál különösen könnyű olyan finom szövegszínt választani, amely egyes háttereken alig olvasható. A kontrasztot ne csak a fő fehér felületen, hanem képen, sötét szakaszon és halvány kártyán is vizsgáld. A linket lehetőleg ne kizárólag szín jelezze a hosszú törzsszövegben. A fókuszjelzésnek a tipográfiai környezetben is észrevehetőnek kell lennie. A vékony betűsúly és kis méret együtt különösen bizonytalanná teheti a megjelenést. A letiltott és aktív vezérlő ne legyen összekeverhető. A tipográfiai ellenőrzés végén a fő tartalmat nagyított nézetben is olvasd végig, és figyeld meg, eltűnik-e bármilyen információ vagy művelet. Az aktív és inaktív elemek színeken túl is megkülönböztethetők.

Szemléltető helyzet és gyakorlati munkalap

Szemléltető példa: egy bordó és törtfehér arculatú tanácsadói oldal nagy, tömör címeket használ, de a cikkekben levegősebb sortávval és visszafogott sorhosszal dolgozik. A nyitóoldal így karakteres marad, miközben egy hosszabb szakmai útmutató olvasása sem válik fárasztóvá.

Gyakori kérdések