El tudnád képzelni, hogy mi lenne, ha a számítógépeden csak ezt az egy betűtípust lehetne használni? Ha ugyanaz a betűtípus szerepelne egy nagyhírű ügyvédi iroda weboldalán és a szomszéd utcában lévő játszóházén is? Szerinted akkor is ugyanolyan gyorsan meg tudnád állapítani hogy mi a fő profiljuk, mint most? Ugyanolyan könnyű lenne eldönteni, hogy melyik egy weboldal egy kezdő kisvállalkozóé, és melyik egy nagy múlttal rendelkező multié? Szinte biztos, hogy nem!
Ma már ez teljesen elképzelhetetlennek hangzik, pedig ez az egész nem csak a képzeletem szüleménye! Volt idő, amikor még csak egyetlen egy font (számítógépes betűtípus) létezett! Azt pedig, hogy ez ma nem így van, Steve Jobs-nak köszönhetjük!
Steve Jobs (amerikai üzletember, az Apple korábbi vezérigazgatója, korunk egyik meghatározó üzleti személyisége) szenvedélyesen szerette a tipográfiát. Ő volt az első, aki fontosnak tartotta, hogy az operációs rendszerben a felhasználó több betűtípus közül tudjon választani (ne csak egy alapértelmezett legyen). Sokan nem értették miért fontos ez, de ahogy sok más kérdésben is, az idő ebben ez esetben is őt igazolta. A betűtípusok hamar hatalmas népszerűségre tettek szert a felhasználók körében, olyannyira, hogy ma már többezer féle betűtípus érhető el az interneten! Használjuk őket weboldalakhoz, szövegszerkesztéshez, plakátokhoz, mindenhez! Azért imádjuk őket ennyire, mert nagyban megkönnyíti az (ön)kifejezést, ami az írásos kommunikációban néha komoly akadályokba ütközik.
“ A dizájn furcsa szó. Sokan azt hiszik, azt jelenti, hogyan néz ki valami. De ha mélyebbre ásunk, a dizájn azt jelenti, hogyan működik az a valami. (…) A jó dizájnhoz nagyon alaposan kell ismerni a terméket. Fel kell fogni mi a lényege és ehhez szenvedélyes odaadásra van szükség. Rágni kell és nem gyorsan lenyelni. A legtöbben nem veszik ehhez a fáradságot.„
Természetesen egy weboldal kifogástalan megjelenése messze nem csak a fontokon múlik, de egy rossz betűtípus miatt egészen biztosan sok remek dizájn terv veszett már el a süllyesztőben.
Egy átlagos weboldal is igazán különleges hatást kelthet, ha sikerül jól kiválasztanod az azon alkalmazott betűtípusokat. Általában az ezzel kapcsolatos gondolataikat a felhasználók nem is tudják megmagyarázni, inkább csak „érzik” a különbséget.
Tipp: Próbáld ki a http://typewonder.com/ nevű alkalmazást! A segítségével bármilyen weboldal fontjait kicserélheted az általad választott fontra (ami az ő készletükben megtalálható) és megnézheted, hogy mutatna vele. Gyakorold, hogy melyik típusú fonttal milyen hatást érhetsz el!
Egy ügyvédi iroda és egy játszóház weboldala. Ugye milyen különbözőek ezek a fontok? Biztos, hogy mind a két oldal nagyon furcsán mutatna, ha valahogy kicserélnénk őket a másikra. Nem lennének hitelesek!
Most már pontosan tudjuk, hogy miért olyan fontos gondosan kiválasztani, hogy milyen fonttípussal szerepeljenek a címsorok, a gombok illetve a törzsszöveg a weboldaladon! Viszont ha nem vagy képzett a tipográfia területén, nem biztos, hogy egyértelmű lesz számodra, hogy melyik betűtípus a kivételesen jó választás és melyik lenne ezzel ellentétben végzetes hiba!
De ahogy a webdesign minden területén, a tipográfia esetében is igaz, hogy némi alapismerettel, az ökölszabályokat betartva, már egy kezdő is elkerülheti a nagyobb csapdákat és képes jó döntéseket hozni, harmonikus kompozíciókat alkotni. A cikk végére te is fel leszel vértezve ezekkel a képességekkel!
Ha pedig logókhoz keresel igényes betűtípusokat nézd meg ezt az 50 fonttípusból álló listát, amelyet kifejezetten logókhoz ajánlanak a designerek.
Szánd rá az időt az inspirálódásra, betűtípusok megválogatására és az alapelvek betartására, mert ezek a befektetések többszörösen megtérülnek majd a számodra! Határozott javulást érhetsz el a meglévő dizájnodban, növelheted a konverziódat, és a weboldalad hitelességét is!
Mi az a font, hol találom meg és hogyan kerül a weboldalra?
A fontok egyfajta fájlok vagy fájlcsomagok, amelyek különféle kiterjesztésűek lehetnek (A teljesség igénye nélkül lehet TTF (True Type Font, elavult), OTF (OpenType Format), vagy a mostanában divatos WOFF (Web Open Font Format) kiterjesztésűek, amelyek jelenleg a leggyorsabbak és a böngészők nagy része által támogatottak.).
Ezekre a fájlokra két helyen is szükséged lehet. A számítógépeden és a weboldaladon! Ha a számítógépedre telepítesz egy betűtípust, akkor használhatod azokat pl. egy Word dokumentumban vagy a Photoshopban, de a weboldalad karakterkészletében attól még nem lesz elérhető. Ha a weboldaladra telepíted, akkor pedig pont fordítva, a saját gépeden lévő programok számára nem lesz elérhető az a betűtípus!
Fizetős és ingyenes betűtípusok
A betűtípusokat grafikusok készítik, amelyek más hasonló tartalmakhoz hasonlóan közzé tehetnek fizetős és ingyenes formában is. A betűtípusok kiválasztásánál mindig ügyelni kell a licenszre, vagyis arra, hogy milyen felhasználási lehetőségek megengedettek a letöltő számára. Vannak, amelyek csak saját felhasználásra ingyenesek (pl. az otthoni Wordben legépelt dokumentumaidat dobhatod fel velük legálisan), de vannak olyanok is, amelyeket teljesen szabadon felhasználhatsz (pl. az ügyfeled részére készített weboldalhoz).
Íme, néhány olyan megbízható oldal, ahonnan nyugodtan tölthetsz le fontokat!
Ingyenes fontlelőhelyek
- Google fonts (https://fonts.google.com/)
- Fontsquirrel (https://www.fontsquirrel.com/)
- Dafont (https://www.dafont.com/)
- Fonts2u (https://fonts2u.com/index.html)
- 1001 Free Font (https://www.1001freefonts.com/)
- Szakmai webdesign oldalakon
- Webdesigner Depot (https://www.webdesignerdepot.com/)
- Awwards (https://www.awwwards.com/awwwards/collections/free-fonts/)
- Crella (https://crella.net/free-fonts/)
Fizetős, de nagyon igényes font lelőhelyek, ahol vásárolni tudsz
Ha valami különlegesebbet szeretnél és megvan hozzá a kereted, akkor pedig érdemes körbenézni a piacon, hogy milyen fontokat árulnak (jellemzően párezer forintért).
Betűtípus telepítése a számítógépre
Nézz körül a fenti linkeken és találd meg azt a betűtípust, ami neked a legjobban tetszik! Ha megvan, akkor mentsd le úgy a gépedre, ahogy bármilyen más fájlt is szoktál!
Kattints a kiválasztott font melletti Download gombra!
Nyisd meg a lementett tömörített fájlt, majd azon belül keresd meg a TTF vagy OTF kiterjesztésű fájlt és nyisd meg!
Megnyitás után kattints a telepítés gombra! Ezzel már készen is vagy.
Egy másik lehetséges módszer szerint, a fájlokat közvetlenül a számítógéped vezérlőpultjába másolhatod. Ebben az esetben jelöld ki a másolni kívánt fájlokat (kicsomagolás után). Keresd meg a gépeden a „Vezérlőpult”-ot, azon belül pedig a „Megjelenés és személyes beállítások”-at. Nyisd meg a „Betűkészletek” mappát és illeszd be a legújabb font fájljaidat!
Betűtípusok telepítése a weboldalra
A weboldalra való telepítés már jóval összetettebb kérdés.
Ha WordPress Weboldalt használsz és valamelyik jó, minőségi prémium sablont, akkor lehetséges, hogy már alapból széles választék áll a rendelkezésedre a betűkészletekből. Például a Divi-ben (a cikk írásának az időpontjában) 851 db Google Font (https://fonts.google.com/) található meg! (A Google Fonts-ban a cikk írásának a napján 952 komplett betűkészlet található) A Google Fonts-ban pedig nem csak a választék a lenyűgöző, hanem az is, hogy a segítségével a betűtípusok között profi módon tudsz szűrni és válogatni, így hamar meg tudod találni a neked megfelelőt!
Diviben így tudod beállítani a fontokat!
Lépj be a sablonod Admin felületére és kattints a „Megjelenés” menüpont alá tartozó „Testreszabás” menüpontra! Ezután felugrik egy új képernyő, ahol a bal oldali menüben ki kell választanod az „Általános beállítások” menüpontot, azon belül pedig a „Tipográfiát”.
Itt megadhatod a teljes weboldalra vonatkozóan az alapértelmezett betűtípusokat! Egyet a fejlécekhez, egyet pedig a weboldalon található szövegeknek.
Betűtípusok beállítása WordPress esetén
Ha másmilyen sablont használsz és nincs benne egy a Diviéhez hasonló külön integrált megoldás ahhoz, hogy Google Fontkat illessz a weboldaladba, akkor a következő a teendőd:
- Menj fel a Google Fonts oldalára és válaszd ki a szűrők segítségével a számodra leginkább megfelelő betűtípust! A kiválasztás menete: A kategóriánál válaszd ki, hogy talpas (Serif), talp nélküli (Sans Serif), kézírásos (Script), display vagy monospace betűtípusokra keressen a rendszer. Utána a „Language” menüpont alatt állítsd be, hogy „Latin Extended”, amennyiben magyar weboldalt készítesz (így lesz benne minden kényesebb betű (á, é, ó, ö, ő, ü, ű) a karakterkészletben.) Jó taktika az is, ha a fenti sorba a „Type something” helyére beírod, hogy „Árvíztűrő tükörfúrógép”. Ezzel a vicces szóval szoktuk ellenőrizni, hogy tényleg minden számunkra szükséges karakter megtalálható a betűkészletben.
- Ha megvan a kiválasztott font, akkor a jobb felső sarokban lévő plusz jellel tudod a „kosárba tenni”. Válaszd ki az összeset, amire szükséged lesz, és a következő lépést csak akkor végezd el, ha már mindegyiket hozzáadtad a kosárhoz!
- Ezután a jobb alsó sarokban nyisd fel az ablakot, ahova gyűltek a fontjaid és már látod is a kódot, hogy mit kell a weboldaladba illeszteni!
A kívánt fonttípus kódját a weboldalad részébe kell illesztened és utána CSS-sel hivatkoznod rá, amikor használod!
Fontok weboldalba illesztése bővítményekkel
Persze rendelkezésedre állnak bővítmények is abban az esetben, ha a sablonod nem tartalmaz elegendő betűtípust és nem szeretnél a kódolással bajlódni.
Ilyen az
- Easy Google Fonts (https://wordpress.org/plugins/easy-google-fonts/),
- Use Any Font (https://wordpress.org/plugins/use-any-font/) vagy a
- Fonts (https://wordpress.org/plugins/fonts/),
de a teljes lista ennél sokkal hosszabb természetesen!
A megfelelő betűtípus kiválasztása
Most már tudod, hogy merre fordulj ha fontot keresel, de még nem tudod, hogy mi alapján kellene kiválasztanod a megfelelőt.
Az első, amit szinte örök érvényű szabályként ki lehet mondani, hogy két betűtípusra lesz szükséged. Ha nagyon bizonytalan vagy, akkor egy betűtípussal is elkészítheted a honlapod, ha pedig speciális, egyéni elképzeléseid vannak és elég merész vagy, akkor megpróbálhatsz hármat alkalmazni, de alapvetően a weboldalak döntő többsége két betűtípust használ!
Fontok típusai
Mindjárt kitérünk a fontok alapvető típusaira, de rögtön az elején fel szeretném hívni mindenki figyelmét a legfontosabb dologra, amire oda kell figyelnünk (nekünk magyaroknak). Mivel a magyar ABC különleges karaktereket is tartalmaz, csak az úgynevezett „Latin Extended” betűtípusok alkalmasak a számunkra, ha magyar szöveggel dolgozunk. Ez egyrészt nagyban beszűkíti a lehetőségeinket, másrészt sokszor okoz fejtörést a tapasztalatlan tervezőknek. Mivel a szövegekben gyakran elenyésző mennyiségben vannak jelen a kérdéses karakterek ( sokszor csak az ő és az ű a problémás, de vannak olyan betűkészletek, ahol már az é, á ó, í sem része a készletnek) így néha szinte észrevétlenül megbújik ez a probléma, miközben sajnos rombolja az összhatást.
Gyakran látni ezt a hibát weboldalakon vagy Facebook posztokban. A lenti képet egy ismerősöm osztotta meg a Facebook oldalán. Teljesen ledöbbentem, hogy úgy néz ki, sokak számára lehetséges, hogy figyelmen kívül hagyjanak egy ilyen mértékű hibát.
Jól látható, hogy az ő betű teljesen kiugrik a szövegből, még csak nyomokban sem hasonlít az őt körülvevő ö és o betűkre! Más a mérete, a vonalvastagsága, stílusa stb. Tehát a kép készítésekor a képszerkesztő program egy másik karakterkészletből felhasznált betűvel igyekezett pótolni a használt karakterkészletben lévő hiányosságot. Előnye, hogy így olvasható a szöveg, tudjuk mit akart közölni az író. Hátránya, hogy a kép készítője jobban járt volna egy egyszerűbb, de jól használható betűtípussal!
A fontok rengetegféleképpen csoportosíthatók. Mivel még csak most ismerkedsz meg a tipográfiával, ezért egy nagyon egyszerű csoportosítási módot mutatok be neked!
Ez alapján megkülönböztetünk
- Talpas fontokat (Serif)
A talpas fontokat arról tudod megismerni, hogy a betűknek apró kis talpacskái vannak. A talpas fontok a legrégebbiek. Nyomtatott szöveg esetén az agyunk az ilyen betűket tudja a legkönnyebben olvasni. Tradicionális, klasszikus értékeket közvetít a megjelenésével. A képernyőn minden szerepkörben remekül megállja a helyét (címsorok, gombok, folyó szöveg) - Talpatlan fontokat (Sans serif)
A talaptlan fontoknak nincsenek apró talpacskái, mint a Serif változatoknak. Modernebb megjelenésűek, a képernyőn szintén minden szerepkörben jól teljesítő betűk, amelyeket a legszívesebben olvasuk hosszabb szöveg esetén - Kézírásos fontokat (Script)
A kézírásos betűtípusokat leginkább címsorokhoz, esetleg gombokhoz érdemes használni. Hosszabb szöveg esetén olvashatatlanná válnak és szépségük is általában csak nagyobb méretben érvényesül igazán. Örökzöldek, mert remek hangulatteremtő erejük van, bizalmas hatást keltenek! Ha szeretnél többet megtudni a kézírásos fonttípusok felhasználási területeiről, olvasd el a tippjeinket a blogban. - Díszfontokat
A díszfontok esetében az olvashatóság már szinte elenyésző részletkérdés. A betű megjelenésével erősen kommunikálunk, támogatjuk a leírt szöveg megértését és hitelességét! Nagyobb méretben érvényesülnek csak igazán és érdemes mértékkel alkalmazni őket!
A törzsszöveg fontjai – legyenek tökéletesek az információ átadáshoz
Sose feledkezz meg arról, hogy az első és legfontosabb, hogy a szöveged jól olvasható legyen. Ehhez pedig kell egy jól olvasható betűtípus, egy a háttérrel kontrasztos (de nem túl kontrasztos) színnel. Fontos, hogy ne legyen sem a sortávolság, sem a betűköz túl nagy vagy túl kicsi. Mindig figyelj a szöveg tagolására, mert a jó tagolás nagyban segíti a megértést (amire aztán tényleg szükséged van ahhoz, hogy jól konvertáljon az oldalad).
Használj kiemeléseket a szövegedben és lehetőleg ne alkalmazd azt a technikát, hogy minden betűt nagybetűvel írsz, mert az egyrészt a kiabálás hatását kelti, másrészt mivel a nagybetűknél a betűk magassága azonos (a kisbetűknél pedig különböző), így sokkal kevésbé lesz olvasható a szöveg.
Te azért készítesz weboldalt magadnak (vagy éppen másnak), hogy azon információt közölj másokkal. Ha az információ nem megy át elég hatékonyan, akkor a látogató elhagyja a weboldaladat, te pedig vásárló vagy érdeklődő nélkül maradsz. Az olvasás márpedig nem megy mindenkinek könnyen (idősebb kor, látásproblémák, diszlexia, nem optimális olvasási körülmények, kapkodás), ezért amennyire csak lehetséges, meg kell könnyíteni a látogatóknak a szövegeid értelmezését.
A (képernyőn) legolvashatóbb fontok általában a legegyszerűbbek és általában a talpatlan változatok!
Ha biztosan nem akarsz hibázni és kiemelt ügyként kezeled az olvashatóságot, akkor a következő fontokat tudom javasolni:
- Georgia (https://www.wfonts.com/font/georgia)
- Helvetica(https://www.download-free-fonts.com/details/36452/helvetica)
- PT Sans (http://hu.allfont.net/download/pt-sans/)
- PT Serif (https://www.fontsquirrel.com/fonts/pt-serif)
- Open sans (http://hu.allfont.net/download/open-sans/)
- Verdana (https://www.wfonts.com/font/verdana)
- Roboto (http://hu.allfont.net/download/roboto-regular/)
- Ubuntu(https://fonts.google.com/specimen/Ubuntu)
- Quicksand (https://fonts.google.com/specimen/Quicksand)
- Montserrat (http://hu.allfont.net/download/montserrat/)
Mit kell tudni a címsorok fontjairól?
A címsoroknak az esetek döntő többségében érdemes külön betűtípust választani. Esetükben nem olyan kiemelten fontos már az olvashatóság, hiszen csak 1-1 sornál használod őket. Itt jobban előtérbe tudod hozni a hangulatkeltő hatásukat és igazán fontos, hogy szorosan illeszkedjenek a dizájnodhoz.
A címsorok egy jól felépített weboldal esetében határozottan különböznek a szövegtől. Azon túl, hogy más fontot használunk hozzájuk (a legtöbb esetben) megkülönböztetjük őket a betűk méretével is, vagy egyéb módokon igyekszünk hangsúlyos kontrasztot létrehozni. Ezáltal weboldalunk élettel telibb és mozgalmasabb lesz, miközben a felhasználó számára segítjük az eligazodást is.
Látjátok a hangulatkeltő hatást? Ahogy a címsor beilleszkedik az üzlet berendezésének a dizájnjába?
Hogyan szerepeljenek a linkek?
A weboldalon a linkek segítségével szeretnénk további böngészésre bírni a felhasználókat, úgy hogy a linkre kattintva, további releváns információkat kaphatnak az őket érintő témákról. A felhasználó persze csak akkor fog a linkre kattintani, ha felismeri, hogy az egy link. Érintőképernyőn még nehezebb webdesignerek dolga, hiszen ott nem tud érvényesülni az úgynevezett hover hatás (amikor az egérrel megállunk a gomb vagy a link felett és ennek hatására annak a színe, formája stb. megváltozik)!
Tehát ha link vagy gomb szerepel a weboldalon, akkor az legyen egyértelmű és első ránézésre is nyilvánvaló, hogy az bizony egy link vagy egy gomb! A linkeket általában kék színnel jelöljük a szövegben, és gyakran kapnak még aláhúzást vagy vastagítást a szövegen belül. Ezekkel a jelölésekkel segítjük a felhasználókat a felismerésben.
A gombok egy keretben (ami általában téglalap) elhelyezkedő, speciális dizájnnal rendelkező linkek. Gyakran pirosak, vagy figyelemfelkeltő élénk színűek, de ez semmiképpen sem feltétel. A lényeg annyi, hogy jól elhatárolhatók legyenek a környezetüktől. A gombon egy rövid szöveg hívja fel a figyelmet arra, hogy mi fog történni a gomb megnyomása után (pl.: „További információ”, „Űrlap elküldése” stb.). A gombok betűit érdemes a törzsszöveg betűtípusával szedni, esetleg azt nagyobb méretben szerepeltetni. Különleges esetben a gombokhoz használhatunk egy harmadik betűtípust is, de ebben az esetben ügyelni kell arra, hogy ne legyen összekeverhető a másik kettővel, mert akkor nem lesz előnyös az egyel több betűtípus alkalmazása.
Kiváló példa a gombok jól értelmezhető használatára. Eltéveszthetetlen a felhasználó számára, hogy mi a teendő, sőt a weboldal készítője még azt is kihangsúlyozta, hogy melyik gomb a preferált választás!
Forrás: https://www.chartblocks.com/en/
További fontok, amelyekkel nem hibázhatsz
Ha a legjobban olvasható fontok közül nem találtad meg az igazit, illetve ha egy kicsit különlegesebb betűtípust szeretnél úgy, hogy még mindig ne lépj ki a biztonságos vonalakon túlra, akkor választhatod a következőket is!
- Playfair Display (https://www.fontsquirrel.com/fonts/playfair-display)
- Dosis (https://www.1001fonts.com/dosis-font.html)
- Bebas Neue (http://hu.allfont.net/download/bebas-neue/)
- Josefin Sans (http://hu.allfont.net/download/josefin-sans/)
- Exo (http://hu.allfont.net/download/exo-regular/)
- Libre Baskerville (https://fonts.google.com/specimen/Libre+Baskerville)
- Pacifico (http://hu.allfont.net/download/pacifico/)
- Oswald (http://hu.allfont.net/download/oswald-/)
Kiválóan összeillő font párok, a harmonikus megjelenésért
Mivel nem elég csak egyszerűen két remek fontot kiválasztani a weboldaladhoz, azoknak jól együtt is kell tudni működniük, megteheted, hogy jól rögtön jól bevált font párokat keresel, a különálló fontok helyett.
Ezekből is hoztam nektek néhány példát:
Open Sans – Roboto
Playfair Display – Mostserrat
Lora – Alegreya
Cinzel – Raleway
Hibák, amelyeket soha ne kövess el!
Végezetül, ha sikerült kiválasztanod a tökéletes fontokat, még mindig van egy halom olyan tervezési alapelv, amire ügyelned kell a weboldal kialakítása közben. A következőben felsorolom azokat a gyakran előforduló hibákat, amelyeket hajlamosak vagyunk kezdő tervezőként!
Túl sok font
Soha ne használj 3-nál több betűtípust a weboldaladon, de 3-at is csak akkor, ha kivételes indokod van rá! Az esetek túlnyomó többségében akkor jársz a legjobban ha két fonttal dolgozol úgy, hogy egy fajtát használsz a címsorokhoz és egy másikat a törzsszöveghez.
Átgondolatlan betűtípusok
Mindenkivel megesik, hogy első látásra beleszeret egy gyönyörűen kivitelezett, különleges betűtípusba például egy kézírásosba, vagy egy díszfontba! De sajnos a különlegesebb betűtípusok, igazán csak nagyobb méretben tudnak érvényesülni és nagyon kevés szöveg esetén! Semmiképpen ne alkalmazd őket a weboldalad törzsszövegéhez, de még a címsoroknál is nagyon alaposan át kell gondolnod ha használni szeretnéd őket.
Bár a különlegesebb betűtípusoknak nem az elsődleges célja a jó olvashatóság, te mégis mérlegeld, hogy az egyedi dizájn, ne menjen majd a felhasználói élmény rovására. Ha a különleges címsorok mellett döntesz, válassz nagyobb betűméretet (25 px vagy nagyobb), és lehetőleg az átlagosnál rövidebb címsorokat!
Túl sok szín
A szín szintén egy döntő tulajdonsága a fontjaidnak! Egyszerre kell a színek által érvényesülnie a dizájnodnak, de megtartva a legfontosabb tulajdonságukat: jól olvasható legyen!
Választhatsz egy külön betűszínt a címsoroknak és egyet a szövegnek (amelyek természetesen amellett, hogy jól harmonizálnak egymással önmagukban is kellően erőteljesek az olvashatósághoz és nem zavarók a szemnek). Ha ügyesen játszol a színekkel, akkor lehetséges, hogy még egy színt használj a szövegben való kiemelésekhez (ami nem keverendő össze a linkekkel), de vigyázz, nehogy nagyon rendetlen legyen végül az összhatás!
Vigyázz a feketével! Soha ne használj tökéletesen fekete (#000000) színt a betűidhez, mindig árnyald egy kicsit úgy, hogy az közelítsen a palettádhoz. A tiszta fekete egy fehér háttérrel vegyítve fárasztja a szemet és a túl nagy kontraszt csökkenti az olvashatóságot.
Túl sok betűméret
Döntsd el az elején, hogy a címsorokhoz, szövegekhez, gombokhoz milyen betűméretet szeretnél használni és tartsd is magad ezekhez az értékekhez a weboldal építése során. Hatalmas káosz keletkezik abból, ha az éppen aktuális lelkiállapotod dönti el az általad használt font méretét. Egészen más hatást keltenek az ebből a szempontból jól átgondolt és következetes weboldalak, mint a spontánabb társaik.
Kevés az üres tér (white space)
Ügyelned kell arra is, hogy megfelelően szellős maradjon a weboldalad és ne akarj minden információt rögtön a kezdőképernyőre gyömöszölni. A negatív terek profi és elegáns hatást tudnak kölcsönözni a weboldaladnak, ha ügyesen alkalmazod őket. A segítségükkel azokra az információkra irányíthatod a látogatóid figyelmét, amiket te a legfontosabbnak tartasz! Javíthatod vele oldalad olvashatóságát is, így még tovább magadnál tarthatod a felhasználóidat. Vagyis néha a kevesebb több!
Gyenge kontraszt
Ha a betűk színekről beszélünk, akkor szeretjük az erős (de nem túl erős) kontrasztot. Ha magukról a fontokról beszélünk, akkor viszont a kontrasztok tekintetében igazán szabadon kell engednünk a fantáziánkat. Ha két betűtípust kontrasztba szeretnénk állítani egymással, akkor csak bátor lépésekkel fogjuk tudni elérni a kívánt hatást. Legyen mindkét betűtípus nagyon különböző egymástól és nem kell félni attól sem, hogy merőben eltérő méreteket használjunk belőlük
Hogyan tovább?
Most már tisztában vagy az alapelvekkel és azt is tudod, hogy milyen hibákat kell elkerülnöd a weboldalad tipográfiájának tervezése során. Valószínűleg mégis bizonytalanságot érzel, nem biztos, hogy tudod, hogy pontosan milyen módon állj neki a tervezésnek!
Kérlek, fogadd meg a következő tanácsokat, és ígérem, hogy napról napra magabiztosabbá válsz majd!
Inspirálódj
Minden designer folyamatosan ki van éhezve az inspirációra. A minket érő külső hatások nélkül elképesztően nagy erőfeszítések árán lehetséges csak az új ötletek létrehozása. Tetszik egy elrendezés? A másik weboldalon a színek? Mentsd le a képernyőképeket, hogy a segítségükkel létrehozhasd a saját elképzelésed.
Itt van 3 kiváló inspirációs forrás, ahol nap mint nap a legfrissebb és legprofibb weboldalakkal találkozhatsz a világ minden tájáról:
• https://www.webdesign-inspiration.com/
• https://www.thebestdesigns.com/
• https://www.awwwards.com/
Nézd át az alapelveket!
Mi a weboldal témája? Mit szeretne kommunikálni a nagyközönség felé? Fiatalos és modern? Vagy klasszikus és üzleties? Válaszd ki a megfelelő fontokat!
Olvasd át a tervezési hibákat!
Fusd át a tervezés megkezdése előtt is, és akkor is amikor már végeztél, a cikkben felsorolt tervezési hibákat. Ellenőrizd, hogy nem követtél el néhányat belőlük. Ha bizonytalan vagy, hasonlíts össze két verziót és tartsd meg a jobbat!
Végül pedig ne felejtsd el:
„Az emberek nem vesznek tudomást arról a dizájnról, ami nem vesz tudomást róluk!”