Web tipográfia bevált gyakorlatok egy modern weboldalhoz

Útmutató az adaptív internetes tipográfiához, amely tartalmazza a bevált gyakorlatokat & a betűstílus méretének szabályai, amelyek biztosítják webhelyének tartalmának olvashatóságát & öröm látni.


A tipográfia legjobb gyakorlatai

A festők kefékkel rendelkeznek. A szobrászoknak megvan a saját agyag. A webtervezőknek megvan a… betűkészletük? Mint Oliver Richenstein híresen írt: “Az interneten található információk 95% -a írott nyelv.” A webhely egyedi grafikáinak, ikonjainak, szép menüinek és tiszta interfészeinek minden körültekintő megfontolása után bűn lenne átvilágítani a webes tipográfia alapvető alkotóeleme felett..

Ne aggódjon – a sima és hatékony szöveg elkészítéséhez nem kell mester tervezőnek lennie. Bizonyos megbízható irányelvek és alapelvek betartásával a webes tipográfia könnyen olvasható és átgondolt módon továbbítja azokat az információkat, amelyeket a felhasználók vágyakoznak..

Vizuális hierarchia létrehozása

A jó web tipográfia legfontosabb célja a hierarchia a tartalom azon része, amely vizuálisan áramlik az egyik elemről a másikra. A fejlécek, az alcímek és a szöveg szövege megfelelő megkülönböztetése, a betűtípus-különféle súlyok és stílusok, valamint a szövegblokkok közötti elegendő fehér hely közötti tényezők mind elősegítik az erőfeszítés nélküli olvasási élményt.

Tipográfia vizuális hierarchia példa

Erős test felépítése

Az első üzleti megbízás az, hogy körbevágja webhelyének fő részét Test szöveges, mivel a látogatók ideje nagy részét olvasás közben tölti. A cél az, hogy olyan szöveget hozzon létre, amely természetesen átfolyik a nagy bekezdésekben, és egészséges ritmust inspirál az olvasás hosszú szakaszaira.

  • A törzs szöveg leggyakoribb betűmérete 16px– vagy még jobb, 1em (erről bővebben később).
  • Kerülje a szöveg középpontba állítását, mivel mindkét oldal egyenetlen szélei vonzó látványt jelentenek. Ehelyett állítsa be a bal és a jobb oldalt árrés a szöveg tárolójának kocsi kívánatosabb hatás elérése érdekében.
  • Justified a szöveg nagyszerűen működik újságokban, nem pedig weboldalakban. A folyékony elrendezések jellege kiszámíthatatlan réseket hozhat létre a szavak közötti távolságban.
  • Választ alacsony kontrasztú betűtípusok felett magas. Betűtípusok, mint a Didot szépen működik a jumbo címsoroknál vagy a nagy formátumú nyomtatásnál, de a vastag és vékony vonalok közötti nagy kontraszt miatt a kis méretű oldalakat nehéz megoldani a weboldalakon.
  • Vigyázz! olvashatóság. Sok sans-serif betűtípusban a nagybetűs „I” és az „l” betűk pontosan azonosak, ami szükségtelen zavart okozhat.
  • Az optimális line-height A bekezdés szövege 1,25–1,5 × betűméret között van. Ennek megfelelően állítsa be a választott betűtípustól függően.

Címsorok a sikerhez

Jobb vagy rosszabb szempontból a legtöbb olvasó valószínűleg átugorja az Ön oldalát rovatok anélkül, hogy még a fő szöveggel is zavarnánk. Ezért kritikus, hogy felhívják a figyelmüket, és sürgessék a további olvasást, biztosítva, hogy a címsor tipográfia figyelemre méltó.

  • A címsor szöveg átlagos betűmérete valamivel körülbelül 36pxVagy még jobb, ha körül 2.25em (erre fogunk jutni).
  • A figyelmet mindig a Test előtti fejezetre kell fordítani. Ügyeljen arra, hogy a fejléc szövegét ne tegye túl erősen a test vastag betűtípusa.
  • Ügyeljen arra, hogy a címsor megfeleljen az olvasók elvárásainak. A lényegesen nagyobb szöveg, nagy távolsággal a gyermek bekezdése között, a tárgy változását jelenti, míg a bekezdésekhez sokkal közelebb lévő kisebb címségek azt sugallják, hogy a tartalom összefügg.
  • Abban az esetben, ha a címsor a következő sorba kerül, vegye figyelembe, hogy az optimális line-height a Fejlécek számára Kevésbé mint ami a törzs szövegéhez tartozik.

A tér között

Az oldal elemeit elválasztó hely nagy sokat mond az egymáshoz fűződő kapcsolataikról, és ez egy olyan tervezési elv, amelyet nem szabad figyelmen kívül hagyni. A fehér óceán által körülvett domináns fejlécek sokkal eltérő kontextust biztosítanak, mint a bekezdésekhez szorosan kapcsolódó kisebb fejlécek (emlékezzünk, hogy egy vizuális hierarchia).

Általában jobb, ha hibázik, ha túl sok fehér hely van, mint nem elég. A tiszta elrendezések nagyvonalú fehér térrel a legfontosabb a modern webben.

Esik sorba

Képzelje el, hogy a nagyfelbontású 27 hüvelykes monitoron szöveget olvas, amely egészen a képernyő mindkét szélén húzódik. A szemed csak egy bekezdés után fáradtvá válna!

Fontos, hogy a fő szöveg minden sorát bizonyos számú karakterre korlátozza, hogy a szemek továbbra is a középpont felé összpontosuljanak. A népszerű egyetértés abban, hogy ez a varázslatos intézkedés asztali jelentése 60–75 karakter hosszú. mert mobil képernyők, ahol el akarjuk kerülni a szemek felhúzását és a túlzottan tömör szöveget, ez a szám körül van Soronként 35–40 karakter.

A mérleg billenése

Sokat írtak a test és a fejléc betűméretének méretezése tárgyában. Mi az a tökéletes H2 méret, ha a törzs szövege, mondjuk, 1em? Szerencsére sok tipográfus már dekódolta a törzsszöveg és a H1 – H6 fejezetek közötti esztétikailag legmegfelelőbb arányok meghatározását. Ezen túlmenően ezeket a matematikai arányokat a felhasználó képernyőméretének megfelelően kell adaptálni.

Jason Pamental tervező biztosítja egy hasznos diagram ami a véleménye szerint a legmegfelelőbb betűméret a különféle médiaeszközök között – és inkább egyetértek vele. Lényegében annak ellenére, hogy az asztalon az ideális H1 méret 3-szoros lehet a karosszéria méreténél, a mobil képernyőn ez túlságosan eltúlzottnak tűnik – tehát azt le kell méretezni, hogy a kisebb megtekintési területhez igazodjon.

Az optimális betűméret diagram a különféle médiaeszközök között

GYORS MEGJEGYZÉS: Hogyan lehet megmondani, hogy van-e jó vizuális hierarchiája?? Nyalj a képernyőn amíg az egész szöveg elmosódik. Ha az elrendezés amorf blobként jelenik meg, nem különböztetve a szakaszokat, akkor a hierarchiája valószínűleg kudarcot vall. Ha azonban könnyen megkülönböztetheti a szövegblokkok, a címsorok közötti elválasztást, és egyértelműen tudja, hogy a szemnek hova kell mennie, akkor nagyszerű állapotban vagy!

Tartsa a szöveget érzékenyen

A reagáló webdesign manapság nélkülözhetetlen gyakorlat – különösen mivel egyre több ember használja a mobil eszközöket elsődleges eszközként az internet böngészéséhez. Miközben a pixelek helyett a százalékos tervezés forradalmasította a képek és a szegélyek alkalmazkodását a folyadék szélességéhez, a reagáló web-tipográfia sajnos keményebb tojás maradt a repedéshez.

A betűméretek több eszközön keresztüli optimalizálása megdöbbentő lehet, mivel több médialekérdezésen át kell böngésznie a webhely teljes szövegének célzása érdekében. Azonban a választott egység gyors beállításával könnyebben felfedezheti a megfelelő betűméretet, amelyet bármilyen típusú képernyőhöz használni lehet.

Ems pixel felett

A webhely tipográfiájának egyszerűsítése érdekében rakja le a pixelt és kezdje el használni ems. Az ems lehetővé teszi a webhely betűméreteinek skálázásának könnyebb megértését, és kisebb egységeik jobban kezelhetők, mint a kétszámjegyű pixelszámok.

Ennél is fontosabb, hogy az ems-rel minden a szülőtartályhoz viszonyítva. Ha beállítja a line-height egy tárolót 1,5 méterre, akkor még akkor is, ha megváltoztatja a tároló betűméretét, a vonalmagasság a megfelelő arányban marad. A képpontokkal a vizuális konzisztencia fenntartása érdekében állandóan módosítania kell a tároló vonalmagasságát minden egyes betűméret-változtatásnál..

Ez az elv igaz árrés, párnázás, betűtávolságok, és a legtöbb más stílus, amelyet a webhely szövegére alkalmaz. Többé nem kell megkérdezni a pixeleket a tartalom kitöltésein minden médialekérdezésnél – csak állítsa be az eredeti állapotát ems-ben, és automatikusan beállítja az eredeti arányokat!

Ems használata

Az első lépés, amelyet meg kell határoznia a webhely betűméretének alap referenciáján. A te stíluslap, írja be ezt:

test {
betűméret: 100%;
}

Ez meghatározza a webhely tartalmának relatív betűméretet 1em, amelyet a legtöbb böngésző úgy értelmez 16px. Most az összes fejlécméret – 2.25em, 1.5em és így tovább – az 1em alapvonal közvetlen szorzata.

FONTOS JEGYZET: Ems vannak lépcsőzetes—Az méretük jelentése a szülő megállapított értékéhez viszonyítva. Például: Ha a Test betűméretét 1,25 em-re állítja, majd egy gyermektároló betűméretét 1,25 em-re állítja be, a két betűtípus nem lesz azonos méretű! Ehelyett a gyermektároló szövege 1,25 × az eredeti 1,25 emlős méretű lesz.

További tippek a nagyszerű webes tipográfiához

Itt található még néhány tipp a nagyszerű webtipográfiahoz:

Ne túlzásba hozza

A webhely tipográfiáját korlátoznia kell 2–3 betűkészlet leginkább. Általában ez a fejléc betűtípusa, a fő szöveg betűtípusa, és szükség esetén egy alcím betűtípusa. Túl sok betűtípus használata rendetlen és nem célzott elrendezést eredményezhet. A webhely betöltési idejét szintén befolyásolhatja, amint azt a következő pont magyarázza.

Beágyaz csak azt, amire szüksége van

Csak azt fontolja meg, ami a webhelyéhez leginkább szükséges, és hagyja ki a többit. Ha tudja, hogy szüksége lesz rá szabályos, bátor és dőlt betű stílusú egy adott betűtípust, majd csak ezeket a lehetőségeket ágyazza be, és zárja be a vékony, könnyű és fekete stílusokat. A szükséges stílusok töltse be a webhely erőforrásait, mivel minden egyes stílus külön kiszolgáló kérés.

Ha nem akarja korlátozni a kreativitását a tervezési szakaszban, akkor menjen tovább, és mindent beágyaz; csak ne felejtse el eltávolítani a felesleges stílusokat, mielőtt webhelyét életbe lépteti.

Ha nem tudja elolvasni, akkor ne használja

Ez egy nagycsibe. Míg a virágos kézzel írt betűtípus lehet, hogy csábító a használata, ha még a legkisebb zavar is van, ha ez „g” vagy „y”, akkor ne használja! Semmi sem bosszantja az olvasót, mint az olvashatatlan betűtípus megfejteni.

Kedvenc igazi szöveg a ‘Lorem Ipsum’ fölött

Minden tervező támaszkodik lorem ipsum dummy text, hogy kitöltse az üres tartalomterületeket, amikor egy projekt elrendezését tervezi. Meglepő lehet azonban, hogy a tényleges tartalom felhasználása milyen nagy hatással lehet a tipográfia megjelenésére. A „Lorem ipsum” teljesen érzelemmentes és intellektuálisan üreges; nem ad valódi ötletet, hogy a szavak és a személyiség hogyan lesznek kifejezve betűtípussal. Ezért a lehető leghamarabb csatlakoztassa a tényleges tartalmat a webhelyéhez, mielőtt a weboldal tervezésének véglegesítése megtörténne.

Kontraszt a háttérrel

A sötét betűkészlet sima fehér háttérrel mindig a legjobb olvashatóságot nyújtja. A sötét vagy homályos kép elleni fehér szöveg manapság is népszerűvé válik. Ne felejtsd el, hogy a háttéred nem túl bonyolult vagy részletesek, ami túlterheli az előtér szövegét.

Rossz tipográfiai példa a szöveg fölött a szöveges háttérbenPélda egy rossz tipográfiai gyakorlatra, a „text over text” háttér használatával.

Betűtípusok párosítása – Like vonzza

A betűtípus párosítása teljesen más személyiségekkel zavaros jeleket fog kiváltani. A kettő stilisztikailag ellentmondásos lehet, de érzelmileg ugyanazt az üzenetet kell szolgálniuk.

Betűtípusok párosítása – tartsa a családban

A legegyszerűbb megoldás gyakran a legjobb. Időnként a legjobb párosítás a variációk (serif, alternatív súly, lemez) felhasználásával származik ugyanabban a betűtípuscsaládban.

hiperlinkek

Általános és várható gyakorlat aláhúzás linkeket és távolítsa el a lebegő események aláhúzását. Az út mentén győződjön meg arról, hogy a kiemelt szöveg dőlt vagy dőlt vastagon szedett nem pedig aláhúzva, hogy elkerüljék a zavart.

Manapság azonban a lehorgonyzott szöveg inkább színes, inkább átmeneti hatással van, amikor lebeg. Tervezési szempontból ez tagadhatatlanul jobb megoldás, de ne felejtse el következetességét tartani!

Néhány CSS, amit tudni kell

Ez befolyásolja a betűk közötti távolságot. Hasznos a címsorok hangsúlyozására.

betűköz: x.xxem;

Ez befolyásolja a szavak közötti távolságot:

szóköz: x.xxem;

Ez alternatívát kínál a hangsúlyozáshoz a nagybetűkkel szemben. Hasznos a rövidítéseknél is.

betűtípus-változat: kisbetűs;

Ez ÖSSZES SZÖVEGET KAPITALIZÁLJA.

szöveg-transzformáció: nagybetűs;

Ez nagybetűkkel írja az első szöveges levelet.

szöveg-transzformáció: nagybetűs;

Ez áthúzást eredményez a szöveg felett.

szöveg-dekoráció: átmenő;

Ez javítja a betűkészletek megjelenítését a modern böngészőkben:

szöveges megjelenítés: optimizeLegibility

A betűtípus fájltípusok megértése

Nagyon jó ötlet több fájltípus beágyazására, hogy a betűkészletek helyesen töltsék be böngészők széles körét. Ezek közül a leginkább foglalkoznia kell:

TrueType

A TTF a leggyakoribb formátum Mac és Windows esetén, és minden nagyobb böngészőben támogatott.

OpenType

Az OTF szintén széles körben támogatott, és lehetővé teszi olyan kiegészítőket, mint a kisbetűk és az alternatív karakterek, anélkül, hogy külön betűtípust kellene beágyazni..

Beágyazott nyitott típus

Az EOT-ot csak az Internet Explorer támogatja – és hacsak nem aggódik az IE régi verzióival rendelkező felhasználók miatt, akkor valószínűleg a legjobb, ha ezt kihagyja..

Webes betűkészlet-formátum

A WOFF és utódja, a WOFF2 az új királyok a városban. Támogatásuk a nagyobb böngészőkben és a tömörítés képessége teszi a modern fájltípust.

Fájltípus konvertálása?

Valószínűleg bekerül egy olyan helyzetbe, amikor csak egy típusú betűtípus fájlja van, és valahogy át kell konvertálnia egy másikba. FontSquirrel és Font2Web online eszközöket kínálnak, amelyek éppen ezt teszik.

Következtetés

Ezt már tudtad tartalom az Ön webhelyének legfontosabb szempontja. A jól kidolgozott tartalom megérdemli a jól kidolgozott tipográfia; ne csalódjon a webhely látogatói számára a nehezen olvasható vagy összetéveszthető szöveggel. Egy alaposan megtervezett vizuális hierarchiával, amely megfelel a tipográfiai bevált gyakorlatoknak, kreatív gondolatai is kreatív módon bemutathatók. Boldog gépelés!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me