Javítottunk egy régi cikket a tipográfiáról, aki még nem látta, annak hasznos lesz áttekintéshez

Tipográfia- a webdesign egyik legfontosabb szempontja, mert alapvető információkat közvetít. Sajnos sok tervező és vásárló tart a merész kísérletektől, és egy-két „tesztelt” betűtípust választanak projektjeikhez.

Tehát ez a cikk azoknak szól, akik elvesztek a tipográfia óceánjában. Szó lesz a tipográfia alapjairól, a betűtípusokról és a betűtípusok szerkezetéről.

Betűtípusok és betűtípusok – Mi a különbség?

Sokan felváltva használják a betűtípus és a font szavakat. Valójában ezek nem ugyanazok, most elmagyarázom, miért.

Fejhallgató stilisztikailag hasonló karakterek halmaza, amelyek írhatók/nyomtathatók. Ezek számok, betűk, szimbólumok. Betűtípus- Ez egy szűkebb fogalom, amit több tényező is meghatároz, például a méret és a stílus. Alapvetően az Arial betűtípus, az Arial Bold pedig egy betűtípus.

Osztályozás

A betűtípusok több csoportra oszthatók - serif (serif), sans-serif (sans-serif), kézzel írott (script), megjelenítés (megjelenítés). Vannak azonban más típusú besorolások is.

Serif betűtípusok, Antiqua (Serif)

Azért hívják így, mert minden betűnek kis serifjei vannak. Ha webdizájnban nagy szövegtömböket nyomtat, akkor ezek használata nem ajánlott, mivel nehezen olvashatók. Ezeket a betűtípusokat általában címsorokhoz használják.

A Serif betűtípusoknak jó néhány altípusa van – pl. régi stílus (« régi stílus"- humanistának is nevezik, humanista antikva) - ennek az osztályozásnak a legelső betűtípusai, már a távoli 1400-as években is használták őket. Őket megkülönböztető vonás- hogy a szimbólumnak azt a részét, amely ferdén helyezkedik el, vékonyra szabják. Betűtípusok például az Adobe Jenson, a Centaur és a Goudy Old Style.

Átmeneti serifek (Transitional serifs)- az 1700-as években használták. Ide tartoznak az olyan betűtípusok, mint a Times New Roman és a Baskerville, valamint a Caslon, a Georgia és a Bookman. Náluk a betűk vastag és vékony részei közötti különbség jobban észrevehető, mint az Old Style-nál, de kevésbé észrevehető, mint a Modernnél.

Modern serifek (New Style Antiqua)- már az 1700-as évek után használatosak, és erős kontrasztot mutatnak a karakterek vastag és vékony részei között. Ide tartoznak az olyan betűtípusok, mint a Didot és a Bodoni

És végül , Slab serifek (Slab betűtípusok)- általában azonos vastagságú minden vonal, és nagy serifek a végén

Fogazott betűtípusok, groteszkek (Sans Serif)

A serif betűtípusokat azért nevezték így el, mert nem rendelkeznek serifekkel.) Modernebbnek tűnnek, ráadásul a 18. században kezdték használni.

Íme a sans-serif betűtípusok 4 fő típusa: Groteszk (régi groteszk), neogroteszk (új groteszk), humanista (humanisztikus) és geometriai (geometriai).
Régi groteszkek- a legelsők, hasonlóak a serif fontokhoz, de serifek nélkül.
Például a Franklin Gothic és az Akzidenze

Új groteszkek a régi groteszkekhez képest leegyszerűsített megjelenésűek. Napjainkban a legnépszerűbb betűtípusok közül sok új sans serif, mint például az MS Sans Serif, Arial, Helvetica és Univers.

Humanisták- kalligrafikusabb, mint az összes többi sans serif betűtípus (vagyis megváltoztatják a vonalak vastagságát). Ide tartozik például a Gill Sans, a Frutiger, a Tahoma, a Verdana, az Optima és a Lucide Grande – ezeket gyakran használják a webhely törzsének kitöltésére.

Geometriai szabályos alakzatok alapján például az "O" egy kör stb.; a legmodernebb sans-serif betűtípusok. Ilyen például az ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Kézzel írt (forgatókönyv)

A kézzel írt betűtípusok a kézíráson alapulnak. Kétféle ilyen betűtípus létezik - formális (formális) és Kezhl (alkalmi). Formálisan, mintha kézzel írták volna, a XVII-XVIII. Egyes betűtípusok olyan híres mestereken alapulnak, mint George Snell és George Bickham. Vegyük a Kuenstler Scriptet példaként a modern betűtípusokra. Szép és elegáns, nem illik az oldal törzsszövegéhez.

A Kezhl betűtípusok modernebb változata, a XX. századból származik. Kevésbé formális, gyakran merész vonásokkal és ecsetvonásos hatással. Ezek a betűtípusok közé tartozik a Mistral és a Brush Script.

Betűtípusok megjelenítése (megjelenítés)

A megjelenítési kategóriába azok a betűtípusok tartoznak, amelyek általában nem alkalmasak szövegírásra. Leggyakrabban akcentusként szolgálnak. Általában a nyomdaiparban használják őket, bár kezdenek megjelenni az internetes oldalakon is. A kijelzők között megtalálható például a blackletter – az első nyomdagépek eredeti betűtípusai.

Nem alfabetikus betűtípusok (Dingbats)

Nem alfabetikus betűtípusok- ezek azok a betűtípusok, amelyek egyáltalán nem tartalmaznak betűket, de szimbólumokat és díszeket tartalmaznak.

Arányos vs monospace

Az arányos betűtípusoknál egy karakter annyi helyet foglal el, amennyit a természetes helyesírása megkíván. Például a Times New Roman egy arányos betűtípus. De monospace betűtípusok esetén minden karakter azonos szélességű. Ilyen betűtípusok például a Courier New

Hangulat

A betűtípus hangulata nagymértékben befolyásolja, hogy az adott helyzetben megfelelő-e használni. Gyakran kontrasztokat is használnak - az üzleti stílust informális, a könnyű és a drámai stílus kombinálja. Például a Times New Roman szigorú betűtípus, és ezt a típust használják oly gyakran üzleti levelezés. De például a Helvetica általában a környező betűtípusoktól függően változtatja a hangulatát.

Vastagság és stílus

A betűtípusok vastagsága: könnyű, vékony, normál, közepes, merész, nehéz vagy fekete.

Három betűstílus létezik – dőlt, ferde és kisbetűs. A címsoroknál általában kisbetűket használnak.

A dőlt és a ferde betűk felcserélhetők, bár különböző stílusok. Az Oblique a normál betűtípusok ferde változata. Ennek eléréséhez használja a Photoshop Free Transform-torzítás funkcióját. De a dőlt már egy külön karakterkészlet, amely a betűtípus ferde változatáért felelős.

Betűtípus szerkezete

Minden karakter rendelkezik egy bizonyos jellemzőkészlettel, amelyek segítségével meghatározható, hogyan kombinálható más betűtípusokkal. Íme a főbbek:

Betűtípus (alapvonal)- egy képzeletbeli vonal, amelyen a szöveg található. Néha a lekerekített betűtípusok kissé távolodnak a típussortól.

Kisbetűs sor (középvonal) a legtöbb kisbetű magasságát jelöli, általában az "x" magassága határozza meg. Innen származik az x-magasság fogalma.

A nagybetűk felső sora (Cap)- magasság nagybetű"DE".

A fenti ábra az összes betű három közös részét mutatja.

Alapvonás, Shtamb (szár)- az egyes karakterek fő vertikuma, beleértve a ferde karaktert is.

Keresztrúd (rúd)- a betűtípus vízszintes része

Ovális (tál)- a betűtípus lekerekített része.

Felső távirányító (Ascender)- a "d", "h" és "b" betűk egy részének felragasztása.

Leszálló- a "p", "q" és "f" betűk egy részének leragasztása

serifeket- a serif betűtípusok megkülönböztető jellemzője). Egyes betűtípusoknál kifejezettebbek, míg másokban kevésbé hangsúlyosak.

Nyílás- hézagot jelöl a nyitott karaktereken, például "A", "c" vagy "m"

Fül ez egy karakter dekoratív kiegészítése, mint a fenti példában a „g”.

Összekötő vonás (hajvonal) ez a serif betűtípus legvékonyabb része.

Keresztrúd- egy vízszintes vonal, mint például az „A” és „H” szimbólumokban.

Drop (Terminál)- kerek vagy ovális (csepp alakú) körvonal, amely a betűtípus egyes karaktereinek rajzával végződik.

Hurok csak néhány kis „g” betűnél fordul elő, és lehet teljesen vagy részben zárt.

Spike (Spur)- egy apró bevágás néhány betűn, például a „G”-en.

Melléklet (link)összeköti a "g" betű felső és alsó részét.

Vissza- az „s” betű középső görbéje.

A levél farka (Tail)- dekoratív vonal, például az „R” vagy „Q” betűn.

Végelem (Terminal, Finial)- sans-serif stroke-végződés

Váll- egy lekerekített vonal, amely eltér a fő vonástól. (hogy őszinte legyek, sok orosz oldalon teljesen más definíciót adnak ennek a fogalomnak,)

Az egyik leggyakoribb tervezési probléma a probléma.

Ebben a cikkben bemutatjuk a jó tipográfia néhány alapelvét, és tippeket adunk a sok gyakori hiba elkerülésére.

A cikk nem a tipográfiáról vagy a tipográfia művészetéről szóló könyv, inkább "gyors tippek a tervezés típusalapjának javításához".

1. szabály: Minél kevesebb betűtípus, annál jobb

A tervezők egyik legnagyobb hibája az, hogy túl sokat használnak egy nagy szám betűtípusok és/vagy stílusaik. Próbáld meg kettőre vagy háromra csökkenteni őket. Vagyis a törzsszövegnek azonos betűtípusúnak és méretűnek kell lennie.

Válasszon egyet a címsorokhoz, és tartsa meg azt, esetleg még egyet az alcímekhez végső esetben. Ne féljen, ha a betűtípusok nagyon különböznek egymástól. Ha két nagyon hasonló betűtípust használ egy tervben, az olvasó azt gondolhatja, hogy csak hibázott, és véletlenül rossz betűtípust választott a gépelés során.

Ügyeljen a szín, sűrűség stb. egységére. vagy a szöveged úgy fog kinézni, mintha részeg legyek lennének szétszórva az oldalon.

2. szabály

Ügyeljen arra, hogy ne zsúfolja túl a leveleket. Ha problémái vannak azzal, hogy nincs elég hely a szöveg számára, akkor jobb, ha csökkenti a betűtípust. Igen, ez valószínűleg helyet ad a bekezdések között, de nem baj, lélegzetvételnyi idő lesz olvasás közben.

3. szabály: Helyes igazítás

Kérjük, ne állítson mindent középre (hacsak nem egy speciális tervezési lépésről van szó). Fontolja meg a rács használatát. Hiszen az oldalon minden összefügg egymással. Használjon útmutatókat és helyezzen el tárgyakat ezek szerint. Ne szórjon szét tárgyakat az oldal sarkaiban, mintha nem tudná eldönteni, hova helyezze őket.

4. szabály. Kevésbé dekoratív betűtípusok

Vannak gyönyörű dekoratív betűtípusaid? Csodálatos! De ez egyáltalán nem jelenti azt, hogy ezeket a bekezdések szövegéhez kell használni. A dekoratív betűtípusok mögött leggyakrabban egy történet van, vagy konkrét esetben használják őket, például egy címhez vagy címhez. Gyakran előfordul, hogy minél egyszerűbb, annál jobb, ezért olyan népszerűek az olyan betűtípusok, mint a Helvetica.

5. szabály: A méret számít

Ez kb akkora, mint a szöveg betűi ;). A címsorok jók, ha félkövérrel és nagy betűkkel vannak szedve, de ha túl nagy betűket használ a törzsszövegben, akkor olcsóbb lesz. Gondolkozz el róla. Elmész egy jó étterembe, és gyakran előfordul, hogy az étlap apró betűkkel van írva, jól néz ki. (Csak ügyeljen arra, hogy a betűtípus ne legyen olyan kicsi, hogy nehezen olvasható legyen.) Ne féljen a címsorokat a törzsmásolatnál jóval nagyobbra tenni.

6. szabály

Mindent úgy csinál, hogy olvasható legyen. A sötét háttéren sötét szöveg nem jó ötlet. Még rosszabb, ha kis szöveget helyez a nagy kontrasztú fotó fölé. Ne feledje, hogy ne helyezzen szöveget bármi fölé.

7. szabály Válassza ki a megfelelő színeket

Melyik a legjobb szín a betűtípushoz? Általában, akár hiszi, akár nem, gyakran a fekete vagy a fehér a legjobb. Ha a szürke különböző árnyalataitól eltérő színt használ, csökkentse a telítettséget. Az élénk színű betűtípust nehéz lehet olvasni. Ügyeljen az összetett vibrációs kombinációkra, mint például a piros a zöldre.

8. szabály. Megfelelő csoportosítás

A kapcsolódó információkat a legjobban kombinálni. Ez áttekinthetőbbé teszi a tervezést. Például: nézzen meg egy filmplakátot, az összes adat vonzó blokkokba van csoportosítva. Ma már önálló dizájnelemnek tekinthetők. Példák a rossz csoportosításra – nyissa meg a sárga oldalakat.

9. szabály. Elegendő vezetés

Ez a szövegsorok közötti távolság. Nagyon fontos a megfelelő intervallum kiválasztása. Sokkal kellemesebb olvasni, ha a sorok között van hely a szemnek pihenni. Általános szabály, hogy a betűméretnél legalább 2 ponttal nagyobb kezdőpontot használjon. Például: a maximális olvashatóság érdekében 10 pontnál a betűtípust legalább 12 pontra kell állítani.

10. szabály: Vigyázz a bevágásra

A Kerning a szó egyes karakterei közötti térköz. Fontos, hogy legyen tapasztalata a rossz levágás azonosításában, mivel az olyan programok, mint például a Photoshop, gyakran hibáznak az elrendezésben. Ezt manuálisan kell beállítani, de a lényeg az, hogy ne vigyük túlzásba. Ha nem szereti a karaktertávolságot, de nem tudja, hogyan lehetne javítani rajta, válasszon másik betűtípust.

Próbálja meg alkalmazni ezeket a szabályokat, amikor betűtípussal dolgozik. A jól megtervezett típusú blokkok jól nézzenek ki képek nélkül. A tipográfia legjobb esetben is megerősíti a tervezés pozitív benyomását. Vonzónak és könnyen olvashatónak kell lennie.

Barátok!

Ebben a cikkben folytatom a legtöbb elemzést gyakori hibák kezdő tervezők.

Ma a betűtípusok használatáról fogunk beszélni. Tudod, hogyan tudom megkülönböztetni a kezdő és a profi munkáját? A kezdő általában megpróbálja bemutatni munkájában mindazt, amit megtanult. Ez a különböző színek, mindenféle effektus és természetesen számos betűtípus bőséges használatában nyilvánul meg ugyanabban a műben. Éppen ellenkezőleg, egy professzionális tervező általában egy, szélsőséges esetekben két betűtípust használ egy projekten belül, valamint egy korlátozott szín paletta. És ha egyáltalán nem nélkülözheti a grafikus effektusokat, akkor megpróbálja minimalizálni a használatukat.

Tehát, ha a jó tervezés első számú szabálya az építés moduláris rács(lásd a cikket), akkor a kettes számú szabály: korlátozd a betűtípusok számát!

A betűtípusok minimális száma elősegíti a tervezés megfelelőségét és megfelelőségét. Minél kevésbé tartalmaz különböző stílusokat és mindenféle színt és betűtípust tartalmaz a munkája, annál tartalmasabbnak és professzionálisabbnak tűnik.

A tervezők leggyakrabban egy betűtípust választanak egy projekthez. Ezenkívül a választott betűtípus jellegének meg kell felelnie a kreatív ötletnek vagy a design hangulatának. Például ha egy füzetet készítünk, amelynek szentelt mobiltelefon harmadik generáció, akkor nagy valószínűséggel egy könnyű, modern sans-serif betűtípus illik hozzánk. De egy klasszikus, „talán szilárdan álló” serif betűtípushoz jobban megfelelne egy füzet az impresszionisták kiállításának témájában az Ermitázsban. Általánosságban elmondható, hogy a betűtípusok sikeres kiválasztása rendkívül fontos a tervezői munkában, mert a betűtípus jellegének és a projekt ötletének és jellegének ellentmondása tönkreteheti a kezdeti munkát.

Néha szükség van növekményes betűtípus használatára. Ha két betűtípussal dolgozunk, az első betűtípus kiemeli a mű hangulatát, karakterét, és gyakran egyéniséget ad. Ez a betűtípus címsorokhoz és alcímekhez használatos. Néha a tervezők szokatlan betűtípusokat használnak erre a célra. Ez egyáltalán nem az eredetiség hajszolása miatt történik, hanem azért, hogy a kontrasztot növelve kiemeljék a szöveg egyes részeit a második, ismerősebb betűtípushoz képest.

Mivel egy műben nincs annyi címsor, a kontraszt elve hibátlanul működik, főleg, hogy a címsorok jóval nagyobbak, mint a törzsszöveg.

A második betűtípus általában ismerősebb a szem számára, és feladata nem a nézők figyelmének felkeltése, hanem pusztán informatív funkció. Könnyen olvashatónak kell lennie, és nem fárasztja a szemet. A kezdők gyakran követik el azt a baklövést, hogy nagy szövegrészeket hoznak létre extravagáns, nehezen olvasható betűtípusokkal. Az ilyen betűtípusok közé sorolom az úgynevezett "kézírásos" betűtípusok túlnyomó többségét is. Az ilyen betűtípusok mondjuk kicsinek jók üdvözlőlap, de nem nagy mennyiségű szöveg kezelésére.

Íme néhány példa a betűtípus helyes használatára:

Mint látható, itt csak két betűtípust használunk. Egy a címsorokhoz és egy a törzsszöveghez. Az ilyen munka elegánsnak és következetesnek tűnik.

És itt van a szerencsétlen betűtípushasználat:

Itt szándékosan használok néhány szokatlan betűtípust, hogy érzékeltessem az ilyen tervezés diszharmóniáját és összeegyeztethetetlenségét. Ne használj túl sok betűtípust a munkád során! Nincs rosszabb, mint egy olyan munka, ahol 8 különböző betűtípus keveredik, és még extravagánsabb és nehezebben olvasható betűtípusok.

Íme egy példa egy ilyen munkára:

Ez nem az én képzeletem szüleménye. Nagyon sok ilyen alkotást láttam, és általában kezdő tervezők vagy amatőrök készítettek.

Ha elolvas egy tervezési tankönyvet, nagy valószínűséggel találhat ajánlásokat a címsorok nélküli betűtípus használatára, a törzsszöveg esetében pedig a serifek használatára.

Ez a szabály azonban túl általános, és a gyakorlatban gyakran meg kell kerülni.
Szóval egy utolsó tanács. Ha a címsor betűtípusa modernnek tűnik, akkor jobb, ha fő betűtípusként egy sans-serif betűtípust választ. Ha az első betűtípus régimódi, akkor a fő betűtípusnak serifnek kell lennie.

A betűtípusok használatának témája kimeríthetetlen, így lehetetlen mindent egy kis cikkben lefedni. Amennyire csak lehetséges, megosztom veletek a fontokkal való munkával kapcsolatos ismereteimet. Mellesleg az enyémben Indesign képzés, nagy figyelmet szentelek ennek a fontos témának.

Az esetlegesen felmerülő zavarok tisztázása érdekében azonnal tisztázni kell néhány kulcsfogalom jelentését. Az első fontos készlet kulcsszavakat határozza meg a "betűtípus" és a "betűtípus" fogalmát.

A betűtípus meghatározott méretű és mintázatú karakterek halmaza. A betűtípus ugyanúgy meghatározza a betűtípus-családokat, a kulcsszó itt a stílusok, amelyek a különböző betűtípusokat csoportokra vagy családokra osztják. Lehet például serif, sans-serif, kézírásos, kijelző, monospace és mások. Azt mondhatjuk, hogy a betűtípus különböző stílusú és méretű betűkészletek halmaza, amelyeket egy közös végrehajtási stílus egyesít. Mint látható, a betűtípus szűkebb fogalom.

A weboldal elrendezésének megtervezésekor a betűtípus kiválasztása nagyon fontos. Természetesen a legjobb a szabványos betűtípusok használata Windows készlet vagy Mac. De néha ez a készlet nem elég ahhoz, hogy a tervező ötletét életre keltse, és akkor a teljes teher a tervező vállára hárul. Szerencsére, Google webes betűtípusok nagyon elegáns megoldást kínál erre a problémára.

Vannak olyan kifejezések is, mint a "súly" és a kerning. Mindegyik módosítható CSS-sel, és alkalmazható bekezdésekre, címsorokra vagy más szövegelemekre. A betűtípus "weight" tulajdonsága határozza meg a vonalak vastagságát rajzoláskor. Ez egy 100 és 900 közötti értéktartomány, ahol minden szám a betűtípus súlyának megfelelő súlyt jelöl. A normál betűtípus "normál" a 400-as számnak felel meg, a félkövér "félkövér" - 700. Kerning - a betűk közötti térköz megváltoztatása azok alakjától függően. Ez a szimbólumok helyes elhelyezésének folyamata, a köztük lévő távolságok beállításával a harmónia elérése érdekében. Bár sokan nem fordítanak nagy figyelmet a kerningre, mégis az apróságok segítenek a nagyon jó eredmények elérésében.

Megszegni a szabályokat

Ésszerű lenne megvitatni az új betűtípusok létrehozásának szükségességét. Az utóbbi időben sok webhely elavulttá vált. Szabványos betűtípusokat használnak, amiket már eléggé elfáradtunk.

Ma több száz betűtípus létezik, de eltérőek Operációs rendszer saját csomagokat kínálnak. És ezek a csomagok csak néhány betűtípust tartalmaznak. Ha olyan betűtípust választ ki, amely esetleg nem rendelkezik valakivel a rendszerben, akkor a betűtípus az alapértelmezett betűtípusra cserélődik. Ezen okok miatt javasolt az alapbetűtípusok használata. De néha az alapvető betűtípusok nem tudják teljesen megragadni a tervező fantáziáját. Ezért, ha biztos benne, hogy egyedi betűtípusra van szükség a tervezéshez, akkor egyéni betűtípusát képpé alakíthatja, és feltöltheti webhelyére. A fejléceket, fejléceket vagy menüket grafikussá tegye, és használja őket.

Ügyeljen arra, hogy a címsorok megfeleljenek az oldal témáinak. Különböző színeket, aláhúzásokat, háttérikonokat vagy grafikus szöveget tartalmazhatnak. Végső soron a döntés rajtad múlik.

Ezenkívül biztosítania kell, hogy a webhelyen minden szöveges hivatkozás azonos betűtípussal rendelkezzen. A különböző betűtípusú és kialakítású hivatkozások használata jelentős navigációs nehézségeket okoz a felhasználónak.

A megfelelő betűtípus kiválasztása

Azt is meg kell jegyezni, hogy a különböző betűtípusok különböző módon befolyásolhatják az olvasók hangulatát. A serif betűtípusok általában jobban megfelelnek a nyomtatott anyagokhoz. A serifek segítenek helyet teremteni a betűk között, valamint elválasztani az egyik karaktert a másiktól. A serif betűtípusok gyakran a személyesség, a tisztelet, az intelligencia és a professzionalizmus érzetét keltik.

A Sans-serif betűtípusok a legalkalmasabbak weboldalakhoz. Az alacsony felbontású képernyők miatt a serifek homályosnak tűnnek, és ezáltal rosszul érzékelhetők. A Sans-serif betűtípusok általában a racionalitás, a stílus, a fiatalság és a modernség érzéseit fejezik ki.

Például a serifek kiválasztása a professzionalizmus érzetét és a hiteles tájékoztatást adja. Gyakran láthatja ezt a mainstream médiában, például a New York Times-ban. A kisebb blogok nagy sormagasságú sans-serif betűtípust használhatnak. Ezzel a felhasználók gyorsan megtekinthetik a blog szövegét.

Mindig át kell gondolni, hogy milyen információkat kíván átadni a látogatónak. A betűtípus kiválasztásakor ne feledje, hogy az örömteli üzenetekhez világos, szellős és lágy betűformák társuljanak, míg a sötétebb témájú üzenetekhez, mint például a Halloween, jobb lenne a kemény szélű betűtípus.

olvashatóság

A tipográfia, és gyakrabban csak olvashatatlan, nagyon károsíthatja a szemet. Természetesen vannak kivételek, amikor Funky vagy más olvashatatlan betűtípusok használhatók, például éjszakai klub promócióihoz.

De mégis, ha szeretne például Soda, Bored vagy Akka használatára, akkor jobb, ha megtagadja ezt az ötletet. Ha a vágy még mindig elég erős, akkor ezeket a betűtípusokat takarékosan kell használni. Például címként. De akkor a törzsszövegnek jobban olvashatónak kell lennie. Ez lendületet adhat webhelyének. És ne feledje, hogy az ilyen betűtípusok használata tervezési előny, nem pedig hátrány.

tájékoztató

A tervezésnek ki kell egészítenie az információkat. A felhasználónak nem kell kitalálnia, hogy pontosan mire gondolt a tervező. A tipográfia rossz megválasztása hozzájárulhat ahhoz, hogy a felhasználó félreértse a céget és annak szolgáltatásait.

Az üzleti projektek tervezésénél elsősorban hagyományos sima betűtípusokat kell használni. Ezt akkor is figyelembe kell venni, ha nem rendelkezik hivatalos tervvel. Főleg, ha azt szeretné, hogy az emberek komolyan vegyék webhelyét.

Elhelyezés és méretek

Nagyon fontos a hatékony tervezéshez - hol kell elhelyezni a szöveget, és milyen méretű. Senki sem akarja megerőltetni a szemét, hogy információkat olvasson, vagy hihetetlenül hatalmas szavakat lásson egy webhelyen. Az alkotás célja jó design az egyensúly megtalálása. Ehhez pedig az első lépés az, hogy kitaláljuk, melyik információ lesz a fontosabb.

Általános szabály, hogy a figyelmet igénylő szavakat egy kicsit többet kell tenni. Vagy fordítva - a jelentéktelennek kisebbnek kell lennie. Minden a fontosságtól függ. Más szóval, létre kell hoznia a szavak hierarchiáját.

Ami a betűtípusok elhelyezését illeti, próbálja meg tartani az egyensúlyt. Nem kell a szöveget szétszórni a négy sarkon. Ez jelentősen elvonhatja a felhasználók figyelmét.

Szín

Ez az egyik legegyszerűbb szempont. Olyan színt kell választania, amellyel a szöveg kiemelkedik a háttérből, és olvasható marad.

Az asszisztensek kontrasztos színek lesznek, valamint olyan effektusok, mint a vonások (stroke) és a ragyogások (glow). Ez segít vonzóbbá és könnyebben olvashatóvá tenni az oldalt. Olyan színt kell választania, amely arra készteti az embereket, hogy megálljanak és nézzenek, és az információt a tervezés domináns részévé tegye.

Következtetés

A betűtípusok használata a Photoshopban nagyon különbözik a weboldalakon való használattól. Ez megmagyarázza, hogy egyes tervezők számára miért olyan nehéz a tipográfiával dolgozni. Az internetes tipográfia tág téma, és sok kutatást igényel. Mindig emlékeznie kell arra, hogy nagyon fontos olyan megközelítést találni a tipográfia használatához, amely megfelel a tervezés hangulatának és esztétikájának. Ne féljen keverni és párosítani a különböző típusú betűtípusokat, csak győződjön meg arról, hogy működnek.

Tipográfia kulcsszerepet játszik a webdesignban, a statisztikák szerint a weboldal tartalmának 95%-a szöveges tartalom. A betűtípus kialakítása szabályozza a hangulatot, és bizonyos hangulatot teremt a weboldalak szöveges tartalmának olvasásakor.

A modern webes tipográfia a CSS-stílusokon alapul. A böngésző alapértelmezett stílusértékeinek módosításával vonzóbbá teheti a szöveges tartalmat.

Ez a cikk a modern webes tipográfia főbb szempontjait ismerteti, amelyek segítenek eldönteni a betűtípus és a szövegstílus kiválasztásakor.

CSS-tulajdonságok a megfelelő webes tipográfiához

1. Betűtípuscsalád (font-family property)

A betűtípus kiválasztása a betűtípus kiválasztásával kezdődik.

Fejhallgató- egy vagy több betűtípus, amelyek stílusilag egységesek. Karakterkészletből áll (általában számok, betűk, írásjelek, speciális karakterek, de állhat kizárólag nem alfabetikus karakterekből is). Például a Times New Roman betűtípusa normál, dőlt, félkövér és sok más, a családba tartozó betűtípusból áll.

A fejhallgatók két fő kategóriába sorolhatók: serif(antikva és szögletes betűtípusok) és sans serif(groteszkek).

A Sans Serif betűtípusok egyszerűek és világosak megjelenés. A Serif betűtípusok viszont komolyabb és formálisabb hangot kölcsönöznek.

Az olvasás során a szem megszokja a fő betűtípust, és elfárad, ha a címsorokat, a tartalomjegyzéket és a másodlagos szöveget más, a fő betűtípussal nem harmonizáló betűtípussal írják. Ezért a betűtípusok kiválasztásakor elegendő egy vagy két betűtípusnál megállni, és ékezeteket helyezni a méret, szín, stílus stb.

Mikor használható több betűtípus:

• Nincsenek speciális stílusok a betűtípusban (félkövér, félkövér, dőlt);
• El kell érni a hasonlóságot egy bizonyos korszakkal;
• Különféle szövegek vizuális elkülönítésére (például megjegyzések a szövegben, kódsorok, képletek, más nyelvű szövegek);
• Esztétikai célokra.

TypeTester szolgáltatás a betűtípus kiválasztásához

2. Serif és sans-serif betűtípusok kombinációja

Van egy kimondatlan szabály a betűtípus-kombinációra vonatkozó ajánlásoknál - a címsorokhoz a sans-serif betűtípust, a törzsszöveghez pedig a serif betűtípust használják. Ez a megközelítés azonban nem olyan népszerű, mint amilyennek látszik.

Valójában ez a szabály elsősorban a nyomtatott kiadványokra, a könyvnyomtatásra vonatkozik. Ez annak köszönhető, hogy a serif betűtípus (a fő vonalak végén kis vonalak) simán sorakozik egy sorban, így a szöveg könnyebben olvasható és olvashatóbb.

Más a helyzet a szöveg kijelzőnkénti megjelenítésével. különféle eszközök. Probléma van a simítással és az egyenetlen serifekkel. Ezért a kisbetűs karakterek enyhén megnövelt magasságával rendelkező sans-serif betűtípus jobban megfelel a törzsszövegnek.

3. Betűszín (színtulajdonság)

A szín tisztaságot és kifejezőt ad a szövegnek. A szövegben található színes címsorok és apró ékezetek több figyelmet vonzanak, mint a fekete szöveg.

Azonban ne felejtsük el, hogy minden szín magában hordozza a saját hangulatát, és mindenkinek vannak személyes érzései, amelyeket ez vagy az a szín vált ki belőle.

A meleg szín aktívan felhívja a figyelmet a szövegre, ami vizuálisan nagyobb méretűvé teszi, mint egy hasonló méretű, hideg árnyalatú betűtípus. A kisméretű szövegelemekhez az élénkebb színek megfelelőek, az oldal oldaltartalma a weblap fő tartalmának szövegszínénél 20-30%-kal világosabb színnel kiemelhető.

A szövegszínek számának kiválasztásakor célszerű két kellően kontrasztos színre korlátozni (nem számítva a feketét és fehér szín). A fehér alapon fekete szöveg klasszikus, rengeteg kontraszttal.

4. Betűméret (font-size tulajdonság)

A böngésző alap betűmérete 16 képpont, a címsorok pedig az alap betűmérettel arányosan vannak beállítva (h1 - 2em, h2 - 1,5 em, h3 - 1,17 em stb.).

A betűméret változtatásával vizuális jelentőséget adhat a szövegnek, és felhívhatja a látogatók figyelmét a legfontosabb szövegrészekre. Általános szabály, hogy minél nagyobb az elem, annál fontosabb.

A böngészőablakban megjelenő szöveg méretét befolyásolja a felhasználó monitorának felbontása: a nagyobb felbontású monitoron az azonos méretű szöveg kisebbnek tűnik, mint a kisebb felbontású monitoron az azonos méretű szöveg.

Az azonos méretű, különböző családokból származó betűtípusok tényleges mérete is eltérő lehet.

A képernyőfelbontások és a monitorméretek növekedésével át kell gondolni a megszokott 12-14px-es szövegméretet. Egyszerű szöveg esetén a 14-18 képpontos betűtípust már széles körben használják. A betűméret beállításakor nem szabad megfeledkezni az alkalmazkodóképességről, pl. a betűméretnek a képernyő méretétől függően változnia kell.

5. Szöveg igazítás (text-align tulajdonság)

Az igazított szöveg jól néz ki a nyomtatott oldalon, mivel a szavakat egyenletesen osztja el a sorok között. A weboldalak ilyen formázása CSS-szel nem lehetséges, és a szöveg szélességben való igazítása nagy, kellemetlen hézagokat hoz létre a szavak között. Ezért a webes tipográfia általában balra igazítást használ.

6. Betű- és karakterköz (szóköz és betűköz tulajdonságai)

A betűköz befolyásolja a szöveg olvashatóságát. A szöveg sűrűségének változtatása (sűrített és ritka szöveg) lehetővé teszi az észlelés ütemének változatosságát, egyensúlyt teremtve a webhely szövegösszetételében.

A Serif betűtípusok kifejezőbbek a csökkentett betűközökkel .

7. Sortávolság (sormagasság tulajdonság)

Az optimális sortávolság a betűméret 1,4-1,6-szorosa.

Ezenkívül ne tegyen túl nagy behúzást a címsorok és a hozzájuk tartozó bekezdések közé.

8. Vonalhossz

A folyamatos olvasásra szánt sornak 30-75 karakterből kell állnia (körülbelül 7-10 szó soronként). Minél szélesebb a szövegsor, annál nagyobbnak kell lennie sorköz. A sorköz nem lehet kisebb, mint a szavak közötti szóköz.

9. Betűstílus (betűstílus tulajdonság)

Gyönyörű tipográfiát készíthet a betűstílus szabályozásával. Például a dőlt betű bizonyos ünnepélyességet ad a szövegnek. A félkövér stílus és a megnövelt betűméret lehetővé teszi a kívánt tartalom kiemelését, de csak akkor, ha az ilyen szöveg kiemelkedik a közeli objektumok hátteréből.

Tulajdonság font-változata: kis-nagybetűs; tipográfiai kifinomultságot ad a szövegnek azáltal, hogy a szöveget úgy alakítja át, hogy minden betű kis nagybetűvel jelenjen meg. Ez a technika kis szövegtöredékekhez alkalmas.

10. Szövegstruktúra és vizuális hierarchia

A weboldal szerkezetében a következő objektumok különböztethetők meg:

• Weboldal logója / neve;
• Címek/címek;
• Másodlagos címsorok;
• Fő szöveg;
• Navigáció;
• Hiperszöveg hivatkozások;
• Hosszú idézetek;
• oldalsó panelek;
• Aláírások / feliratok táblázatokban, ábrákban.

Minden listaelem az oldal alapvető része, és indokolja annak kiemelését.

A HTML-ben hat szintű címsor található, kezdve a legfontosabbal

és befejezve a kevésbé jelentős

. fejléc

első helyen kell lennie a dokumentum szerkezetében és a címsorokban alacsonyabb szintek kövesse őt, és részletezze az információkat. A címsorok kiemeléséhez használhatja azt a technikát, hogy a címsor egy részét színnel jelölje ki.

A könnyebb asszimiláció érdekében a szöveget részekre kell osztani, és minden részhez válassza ki a megfelelő szintű címsort. Minél magasabb a címsor szintje, annál tartalmasabbnak kell lennie a szakasznak.

NÁL NÉL átfogó szerkezet szöveg Speciális figyelem linkekhez kell adni, könnyen kitűnjenek a környező tartalomból.

A vizuális hierarchia létrehozza a helyes szerkezetet az oldalon, így a szöveg könnyen érthető és olvasható. A legtöbb szövegben a szöveget jelentés szerint osztják fel. Számos módja van, a legegyszerűbb, ha a szöveget bekezdésekre bontja.

• Főváros;
• Dőlt;
• Merész/merész stílus;
• A méret;
• Szín;
• Headset csere;
• Karakterek helyzetének megváltoztatása a szövegsávon (kis- és nagybetűk, behúzások);
• Karakterek kiemelése grafikus elemekkel - mutatók, keretek, ikonok stb.

A túlzott kiemelés nemcsak túlhangsúlyozza a töredékek figyelmét, hanem az olvasást is megnehezíti.

11. Biztonságos betűtípusok

Windows betűtípusok / Mac betűtípusok / betűtípus család

Arial, Arial, Helvetica, sans serif

sans serif

kurzív

monospace

Georgia 1, Georgia, serif

sans serif

Lucida konzol, Monaco 5, monospace

sans serif

serif

Tahoma, Genf, sans serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans serif

Verdana, Verdana, Genf, sans serif

Szimbólum, Szimbólum (2. szimbólum, 2. szimbólum)

szövedékek, szövedékek (hálókötések 2, hálók 2)

Wingdings, Zapf Dingbats

MS Sans Serif 4 Genf sans serif

MS Serif 4, New York 6, serif

Arial, Arial, Helvetica, sans serif

Arial Black, Arial Black, Gadget, sans serif

Comic Sans MS, Comic Sans MS 5, kurzív

Courier New, Courier New, Courier 6, monospace

Georgia 1, Georgia, serif

Impact, Impact 5, Charcoal 6, sans serif

Lucida konzol, Monaco 5, monospace

Lucida Sans Unicode, Lucida Grande, sans serif

Palatino Linotype, Book Antiqua 3, Palatino 6, serif

Tahoma, Genf, sans serif

Times New Roman, Times, serif

Trebuchet MS 1, Helvetica, sans serif

Verdana, Verdana, Genf, sans serif

Szimbólum, Szimbólum (2. szimbólum, 2. szimbólum)

szövedékek, szövedékek (hálókötések 2, hálók 2)

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4 Genf sans serif

MS Serif 4, New York 6, serif

1 A Georgia és Trebuchet MS betűtípusokat a Windows 2000/XP rendszerrel szállítják, és az IE betűkészlet-csomag része (és valóban sok Microsoft-alkalmazás is tartalmazza), így sok Windows 98-as számítógépre telepítve vannak.

2 A karakter-betűtípusok csak a következőben jelennek meg internet böngésző, más böngészőkben általában szabványos betűtípusra cserélik őket (bár például az Opera alatt a Symbol betűtípus, a Safariban pedig a Webdings jelenik meg).

3 A Book Antiqua szinte azonos a Palatino Linotype-val; A Palatino Linotype a Windows 2000/XP, a Book Antiqua pedig a Windows 98 rendszerrel érkezik.

4 Kérjük, vegye figyelembe, hogy ezek a betűtípusok nem TrueType, hanem bitmap betűtípusok, így bizonyos méreteknél rosszul tűnhetnek (8, 10, 12, 14, 18 és 24 pt 96 DPI-vel való megjelenítésre tervezték).

5 Ezek a betűtípusok csak szabványos betűtípusokkal működnek a Safariban, de nem félkövér vagy dőlt betűkkel szedve. A Comic Sans MS is félkövérrel van szedve, de nem dőlt betűvel. Úgy tűnik, hogy a többi Mac-böngésző önmagában is jól emulálja a hiányzó betűtípus-tulajdonságokat (köszönet Christian Fecteau-nak a tippért).

6 Ezek a betűtípusok csak a klasszikus telepítés során kerülnek telepítésre a Mac rendszeren