A webes tipográfia megértése
A Web Design-ban a tipográfia témája fontos, ha figyelembe vesszük a felhasználói élmény minden területét. Minden webhelynek szüksége van szövegre, és vannak iránymutatások, amelyeket követhet, hogy kivételesen lenyűgöző elrendezéseket készítsen. Figyelembe kell venni a rácsvonalakat, a betűket, a betűmagasságot, a szövegtávolságot, a színsémákat és más hasonló tulajdonságokat.
Ebben a cikkben a webes tipográfia birodalmába szeretnék ásni. Megnézzük népszerű ötletek a hiteles weboldalak szövegének megtervezése mögött. Útközben bemutatom néhányat hasznos CSS3 tulajdonságok a tervezők gyakran elfelejtik.
Megpróbáltam nagyobb hangsúlyt fektetni az internet elméletére és ideológiájára. Ez szélesebb körű hangsúlyt fektet a digitális szövegre általában, és Ön, a webes tervező választhatja ki, hogy mely stílusokat alkalmazza. A kontextus mindig kulcsfontosságú, és ezt megfelelően meg kell határoznia minden egyes projektnél, amelyen dolgozik. Tekintsük ezt az útmutatót a tipográfiai újítóktól a világ minden tájáról származó modern webes trendek referenciacsomagjához.
Mérje meg a bekezdéseket
Nem kell az udvari botot lezárnia az ilyen mérésekhez. Valójában a tipográfiával kapcsolatos intézkedés az oldal bármelyik bekezdésének szélességét (vízszintesen) jelenti. Ez nem olyan téma, amely mindig megvitatásra kerül, de befolyásolja a tartalom olvashatóságát. Általános szabályként a 75-85 karakter hosszúságú egyetlen sort (nem feltétlenül a szóközökkel együtt) korlátozni.
Ez egy kicsit tágabbnak tűnhet néhány szélesebb elrendezés számára. Különösen akkor, ha a tervezési folyamata folyik, és alkalmazkodni kíván a felhasználónak a böngészőablakuk méreteihez. Mindig beállíthat egy CSS-t max-width tulajdonság a fő tartalomban div. A margók és a betűméretek méretezhető egységekben (százalékban, ems) történő kódolása a képpontok helyett lehetővé teszi az ilyen rugalmasságot bármely elrendezésben.
Nincs maximális mértékegység, ami óvatos lenne. A tartalom és a szavak szavakba történő írása sokkal fontosabb, mint az egyes vonalak szélessége. Ne feledje azonban, hogy a rövidebb, tömörebb állításokhoz képest hosszabb mondatokat sokkal nehezebb olvasni.
Vezető magyarázat
A tervezés során, a bekezdésméréssel együtt, meg kell fontolnia az ötletet is vezető. A szó kimondott “ledd-nek”, például a ceruzákban használt ólom. Ez a név a régebbi napokból származik, amikor a szövegsorok között ólomcsíkok helyezkedtek el.
A vezetés még mindig nagyon fontos fogalom a webes tervezésben, és a bekezdés intézkedésekkel együtt jár. Ahogy a bekezdésszélessége növekszik, egyenlő növekedést kell alkalmaznia a vezető értékére, vagy szóköz a szöveg sorai között. Ez az extra hely sokkal könnyebbé teszi az olvasást a szemeden.
Ha nagyon szorosan megérintett szöveget szeretne áthúzni, nehéz lehet egyetlen sorra összpontosítani. Ebben az esetben próbálja meg növelni a CSS-ben lévő vezetői mennyiséget line-height ingatlan. Mindig több helyet szeretne a szövegsorok között, mint a szavak között. Ellenkező esetben a szövegblokkok megjelennek újságnyomtatásként, és nem lesznek nagyon felhasználóbarátak az áthidalásra.
A szilárd technika az, hogy több helyet kell alkalmazni, mint amennyire az eredetileg szükséges, és szükség esetén csökkenteni kell. Nem minden szöveg egyenlő, és biztosan szükség lesz a különböző belső formázással rendelkező bekezdésekre, például merész szavakkal, horgonyzó hivatkozásokkal, aláhúzásokkal stb..
Használjon természetes betűméreteket
Még mindig van egy maroknyi weboldal, amely az átlagosnál kisebb betűméreteket választja. Úgy tűnik, hogy a 11px-12px sokkal több “standard szakember” üzleti elrendezésekhez. Ezek a méretek azonban nem segítik a látogatók többségét, akik konkrét információkat keresnek.
Általában a webböngészők alapértelmezés szerint 16px-ot tartalmaznak, ha nem alkalmaz CSS-szabályokat. Ez még egy kicsit kicsinek is tekinthető, ha az extra elrendezésben van a nagyobb szöveg a nagyobb szöveghez. A nagyobb betűméretek csak szebbnek tűnnek, és sokkal könnyebbek a relatív kulcsszavakhoz. A Serif betűkészleteket gyakran nem választják bekezdésanyagként, de még mindig el tudnak menni velük. Az olvashatóság javítása és a figyelem felhívása érdekében a serif alapú betűkészletekhez sokkal nagyobb szövegméreteket javaslom.
Válaszoljon a felhasználó környezetére
A különböző betűtípuscsaládok és -méretek kipróbálásakor a tartalmi területet ennek megfelelően kell módosítani. Az a standard egység, amivel ragaszkodok ems mivel könnyen átméretezhetők a rendelkezésre álló hely és a képernyőfelbontás alapján. Ez optimalizálja a felhasználó teljesítményét, ami a legfontosabb.
De ha olyan rugalmas a tartalom, hogy az elrendezés hajlamos a hibás eredményre. A láblécben vagy az oldalsávban lévő tartalom egyes böngészőkben esetleg ferde vagy kiegyensúlyozatlan. Vagy lehet, hogy nehézséget okoz a képek vagy más médiaformák felhelyezése a fő szövegben. Vannak más alternatívák az ems használatára, ha fix stílusú elrendezésre van szükséged - de próbáld meg mindkét megoldást, hogy lássuk, melyik tetszik a legjobban.
Ne feledje, hogy a rögzített szélességek és a bekezdésméretek számos tervezési beállításban fognak lezárni. Nagyszerű olyan tartalomhoz, amely sok helyhez kötött esztétikai hatást tartalmaz - gondoljon háttérképeket vagy sok beépített oldalsáv-widgetet. Az is egyszerű folyamat, hogy a bal oldali oszlopban egy folyadéktartalmú területet építsünk jobb oldali rögzített oldalsávokkal.
Stílus a kontextus alapján
Néhány más nagyon szép CSS trükköt elrejtettek a mainstream design-tól. Pontosabban vannak olyan trendek, amelyeket a nyomtatási munkákból másolnak át, és amelyeket a megfelelő kontextusban lehet alkalmazni.
Sok webes tervező még soha nem használta a szöveg-francia CSS tulajdonságot. Egy értéket ad meg, amely a jelen szabály által érintett bekezdés első sorának bevitelére szolgál. Az egységek követik a szabványos szövegopciókat, például a pixeleket, a pontokat, az ems-t, a százalékokat… Ez természetesen nem a legtöbb blogban megtalálható trend. De ez egy szép oldalritmusot biztosít a szöveg nagy blokkjainak olvasása közben.
Egy másik típusú CSS-szelektor is ismert, mint a pszeudo elem. Ez egy adott tartalomválasztó egy bizonyos részét célozhatja. A CSS3: első betűs pszeudo-választó tökéletes képzelet stílusok létrehozására a fontos bekezdésekben. Az egyes bekezdések nyitó betűit jazz-up - hasonlóan egy meglehetősen mesés mesekönyvhez - félkövér, dőlt vagy akár a betűtípust is módosíthatja. Nézze meg ezt a gyönyörű csepp sapkát, amely tartalmaz néhány extra CSS kódot, amit ki tud használni.
Lejátszás betűközzel
Biztos vagyok benne, hogy sokan hallották a követés kifejezést, még mielőtt még soha nem jött volna rá, hogy ugyanaz az elképzelés, mint a CSS levél-távolság tulajdonság. Ez a két fogalom azonos a nyomtatás és a digitális tipográfia között. Az egység a betűk közötti helyhez kapcsolódik egyetlen szövegsorban. Ez egy igazán szép hatás a webhely fejlécére és még néhány kisebb tartalomblokkjára.
Fontos, hogy ne keverjük össze a betű-távolságok kifejezéseket. Mindkettő tipográfiához és a betűk közötti távolsághoz kapcsolódik. A kerning azonban kifejezetten a szóban lévő két egyedi betű közötti távolságra utal. A betűközköz tulajdonsága érvényes egy teljes elem szöveg vagy bekezdés vagy fejléc vagy horgony kapcsolat. Ne feledje, ha új stílusokkal játszol.
Gyakran használok néhány pixelt / pontot a betűk között a fejlécekben minden nagybetűvel. Ez feleslegessé teszi az egyes karaktereket, és nagyon jól definiáltnak tűnik “cím” néz. A negatív levél távolságok is jól működnek a megfelelő kontextusban. Általában a kisebb egységekhez, legfeljebb -0.03em vagy -0.1em-hez ragaszkodok.
A betűképek kombinálása és egyeztetése
A webes tipográfia mögötti tervezési koncepciók természetesen nem a tudomány, hanem a művészet egyik formája. Vannak iránymutatások, amiket követhetsz, de nincsenek határozott szabályok, amelyekkel Ön korlátozott. Ez azt jelenti, hogy hatalmas szabadságod van ahhoz, hogy kísérletezzen a keverésre és a különböző betűtípusokhoz, amelyekhez hozzáférhetsz.
A betűtípusok legnépszerűbb kombinációja magában foglalja a fejléc és a bekezdés tartalom Serif / sans-serif megosztását. Szeretem mindkettőt bekapcsolni, de gyakrabban fogom használni a serif betűtípusokat a fejlécrészekben. Az egyes betűk extra jelölései és vonásai a hihetetlenebbnek tűnnek, mint a domináns oldalszöveg.
Emellett a sans-serif betűkészletek tisztábbak és könnyebben összefűzhetők mondatokban. Ez azt jelenti, hogy a serif betűtípusok nem fognak működni a bekezdésekben. Valójában rengeteg nagyszerű példa van! Azonban egy kevéssé ismert x-magnév fogalma döntő fontosságú a betűtípus összetettségének megkülönböztetéséhez. Néhány szó alapvonalának megnézése után felveszi a figyelmet az ilyen betűkészletekre “beilleszkedni” egymással.
Érdemes megemlíteni a tér közötti fontosságot ezen különböző elemek között. Valószínűleg 2 vagy 3 különböző fejlécstílust használ, így ezek mindegyike eltérő megjelenésű lesz. A h2 / h3 elemeket egy kicsit közelebb tartom a következő bekezdésblokkhoz, mivel ez azt jelenti, hogy a tartalom között korreláció van.
Ez a korreláció különösen akkor hasznos, ha két teljesen különböző betűtípust használsz egymás mellett. Legfeljebb 3 különböző betűtípuscsaládot ajánlok a tartalomkészletenként. Túl sok testreszabás után a szavai összezavarodnak, és az egész oldal úgy néz ki, mint egy hibás betűkészlet..
Következtetés
Remélem, ezek a fogalmak megvilágítják a digitális tipográfia bonyolult témáját. Nehéz lehet igazán a tervező munkájába jutni, különösen, ha az egész téma idegen neked. De folytassa a tanulást, és győződjön meg róla, hogy egy egész csomót gyakorol!
Jövő héten: Maradjon hangolva, ahogy megnézzük néhányat hasznos eszközök és források a jobb webes tipográfia érdekében.
Több…
Itt több tipográfiával kapcsolatos hozzászólás:
- A szép tipográfiai webes tervek bemutatása
- Jobb tipográfia a modern weboldalak számára
- A tipográfia gyors útmutatója: Ismerje meg és inspirálja
