Köszöntő

Köszöntelek kedves Látogató!

Kathryne vagyok, és most kreativitásom és fantáziám világába nyertél belépést. Több éves szerkesztés után rengeteg technikát sajátítottam el, lelkesen gyártom a kinézeteket, melyeket itt osztok meg veletek. Emellett amolyan mindenes aloldalként működik a DBK, ajánlókkal, tippekkel és kritikákkal is szeretnék foglalkozni a későbbiekben.

Kellemes időtöltést, és hasznos böngészést kívánok!♥

Bejelentezés a szerkesztői felületre

 

 
Címkefelhő

 

 
Chat
 
Partnerkapcsolat

A cserék eléréséhez kattints ide

♥ Megtalálsz még ♥ 

 
Jelenlegi munkálatok
  • Alexandra Daddario kinézet
  • Autumn Vibes kinézet
  • Mountain Vibes kinézet
  • Projectdobozok
  • Menüstílusok
 
Design rendelés

x Információk a rendelésről

Dolgozok rajta:

x Mari-chan

x Nathalie

x

 
Szavazás
Milyen tartalmat készítsek?

Kinézet
Fejléc
PSD színezés/brush/kiegészítő
Betűtípus
Kódolások
Elite csere/navigáció kódolás
Szavazás állása
Lezárt szavazások
 
Home

A betűtípusokról általánosságban

2019.08.22. 22:06, Kathryne

Talán az egyik legmeghatározóbb része egy honlapnak a rajta használt betűtípus(ok), valamint ezek összhangja a kinézettel, a tartalommal, a színekkel és az egész lap megjelenésével. Manapság rengeteg olyan felület található az interneten, ami lehetőséget ad arra, hogy egyéni betűtípust alkalmazzunk a kódolás során, erre a legismertebb példa talán a Google Fonts.

Mégis, sokan belesnek abba a hibába, hogy össze nem illő betűtípusokat alkalmaznak, vagy szinte minden egyes modul más-más formában íródik. Ez lényegesen ront az oldal minőségén, teljesen mindegy mennyi időt töltöttél a kódolással. Nem véletlen, hogy az ismertebb oldalakon, hírportálokon mindössze 2-3 betűtípust alkalmaznak.

A mai nap 10 tippet hozok arra, hogyan használjunk a betűtípusokat az oldalunkon!

1. Kevés betűtípust használj

Mint ahogy említettem, az egyik leggyakoribb probléma az, hogy minden egyes szekció (pl: oldalmodul cím, középmodul cím, linkek, félkövér, aláhúzott, dőlt, stb) más-más betűtípust kap. A túl sok típus és méret elronthatja az összhangot. Célszerű 2-3 típus használata egy honlap elkészítése során, ugyanis ekkora mennyiségnél kicsi az esélye, hogy átláthatatlanná válik a szöveg.

Ha mégis több típust szeretnél használni győződj meg arról, hogy kiegészítik egymást, mégis figyelemfelkeltők (ha címsornak használod).

 2. Használj szabvány betűtípusokat

A Google fonts segítségével könnyedén tudjuk szűkíteni a kört a betűtípusok között, válasszuk ki a Sans Serif családot. Ebben a csoportban olyan típusokat találsz, amelyek nem tartalmaznak semmilyen díszítő elemet, hosszabb szövegben is lehetővé teszik a gyors és könnyed olvasást.

Természetesen én is támogatom, hogy a címsorokat kiemeljük valamilyen szinten, ám ez nem mehet az összhang rovására. A modulcímek részére is érdemes olyan típust választani, amely valamilyen szinten kapcsolódik az oldal tematikájához (egy rajongói oldalra ne válassz kézzel írt szövegre hajazó betűtípust, hiszen ott a hangsúly a minőségen van, te sem olvasnál szívesen egy olyan ismeretterjesztő magazint, ahol a szabvány betű mellett egy handwritten stílusú sor is bekerül. Nem odavaló.).

3. Korlátosság

Szintén egyik alapköve az igényes oldalnak az, hogy a sorok nem lógnak ki a modulból, és nem is érnek a modul szélégi. Ez olyan, mintha egy könyv szövege egészen a lap széléig érne, zavaró és kicsi igénytelenség érzését kelti az olvasóban. A CSS formázás segítségével könnyedén be tudod állítani, hogy mekkora legyen a távolság a modulok széle és a szöveg között (padding: érték px;).

4. Olyan karakterek válassz, amely jól alkalmazkodik a formázáshoz

A látogatóid különböző felbontású monitorokról, esetleg tabletről vagy telefonról fogják látogatni az oldalad, így neked muszáj tekintettel lenni rájuk. Telefonról teljesen más felbontásban jelenik meg a szöveg (gyakran az általad kiválasztott típus nem is kompatibilis telefonnal, így lecseréli egy szabványra), ezért olyan típust válassz, amely ha kicsinyítik sem válik olvashatatlanná.

Ide tartozik még, ha betűformázást végzel ezeken a szövegeken, szintén legyen olvasható és ne zavaró a megjelenés. A Google fonts erre remek lehetőséget ad, ha rákattintasz a betűtípus nevére egy olyan lapra navigál, ahol megnézheted különböző formázások mellett hogy néz ki a betű.

5. Használt könnyen értelmezhető betűtípust

Sok olyan betűtípus van, amely megkönnyíti a szöveg olvashatóságát. Erre a legjobb példa a nagy I betű és a kis l betű közötti hasonlóság. Bár nem hiszem, hogy ez egy jól felépített kódolású kinézetnél probléma lehet, ugyanis kicsi rá az esély, hogy az ember egy betű helyett másikat olvas (így nem is értelmes a szó) (és tudom, hogy vannak olyanok, akik olvasási nehézségekkel küzdenek, most nem rájuk gondolok). De, az előbb említett példák mellett hasonlóság jelenhet meg a r és a v, valamint az n, és az m betűnél is, ami tényleg zavaró lehet.

Ide tartozik még, hogy bár a Google Fonts-ot használjuk nagy szeretettel, nem minden betűtípus képes arra, hogy a magyar ABC-ben található összes betűt megjelenítse. A leggyakoribb nehézségek az ö,ü,ó,ő,ú,ű betűkkel adódik, de erre is van egy szuper tipp. Ha a betűtípus kiválasztás során rámész a „Customize” részre, ott (ha szerencséd van) ki tudod választani a „Latin Extended” kis négyzetet, ez a bővítés pedig tartalmazza a magyar ABC összes betűjét.

6. A nagybetűs szövegek

Szerintem a nagybetűs szövegeket célszerű címek, alcímek, menüpontok és néhány fontosabb kiemelésnél használni, de összefüggő szöveget nem érdemes ilyen stílusban megírni. Egy kutatás már bebizonyította, hogy a nagybetűs szöveg olvasása sokkal több energiát vesz igénybe, mint a kisbetűs szöveg olvasása, ez pedig okot adhat arra, hogy a látogató ne jöjjön vissza az oldalunkra.

7. A sorok közti távolság

A kódolásban a két sor közötti eltolódást line-height-nek nevezzük. Ez az érték azt mutatja meg, hogy hány pixeles rés legyen két sor között. Ha ez az érték kicsi, a szöveg összeolvad, könnyen olyanná válhat, mint egy soha véget nem érő mondat, és első ránézésre még visszataszító is lehet egy ilyen megjelenésű szöveg. Viszont, az sem jó, ha a sorok közti eltolás magas, így első ránézésre egy pár mondatos bekezdés egy fél oldalas szövegnek is tűnhet, amit lehet nem mindenki fog elolvasni. Azt mondják, hogy a jó sortávolság 1-2 px-el nagyobb, mint maga a betűméret. Tehát, ha a font-site: 10px;, akkor a line-height: 12 px;.

8. Színek, kontraszt, olvashatóság

Szintén egy alappillér, hogy hiába választasz megfelelő betűtípust, hiába állítasz be minden értéket, ha egy olyan háttérszínt vagy színt adsz a szövegnek, ami olvashatatlanná teszi azt. Én ezt elsőként egy középiskolás prezentációs feladat során hallottam, és őszintén, nem gondoltam, hogy ezt el kell mondani. De mégis, voltak olyanok, akik a fehér háttére világos színű betűket használtak, és a fekete háttérre sötétkékkel írtak. Nem szép, nem néz ki jól, olvashatatlan. Lehet játszani a modulok hátterével, de egy világos háttérhez értelemszerűen sötét legyen a betűszín, és fordítva is. Itt teljesen érvényes az az állítás, hogy: ha neked zavaró, a látogatónak is az lesz.

9. Kerüld az oda nem illő színeket

Ha már kiválasztottad a design alapszíneit (ez általában 3 max 4), még véletlenül se akarj más színeket belecsempészni a betűformázás során. Lehet játszani sötétebb-világosabb árnyalatokkal, de egy már kész kinézetet nem kell még jobban „feldobni” egy sokadik színnel, ami egyedül csak pl: a félkövér betűnél jelenik meg. A neten szerencsére rengeteg színkombináló oldal található, ahol kedvedre lehet variálni a színeket, de mégis összhangban maradnak.

10. Változatos betűméret, figyelemfelkeltés

Nem egy olyan oldalt láttam már, ahol azzal próbálják felkelteni a látogató figyelmét, hogy egy-egy sort nagyobb betűmérettel írnak, esetleg valami idióta keretet is tesznek egy sornak. Bár ezt leginkább a (szerintem) nem jól dizájnolt, valamint nagyon eladni akaró oldalak alkalmazzák, de személyes blogokon és rajongói oldalakon is láttam már hasonlót. Ha szeretnéd, hogy iratkozzanak fel a hírleveledre, esetleg töltsék le valamelyik általad tervezett kis kitölthető valamit, vagy hogy regisztráljanak az oldaladra, akkor a tartalommal akard megfogni őket, ne pedig a képükbe tolni.

Remélem valamennyire hasznosnak találtátok ezt a kis összefoglalót, és van benne olyan tipp, amin még nem gondolkoztatok el.:) Annakidején több webdesign témájú külföldi oldalt olvastam, így a java részét én is csak onnét ismertem meg. Mindenesetre, néhány aprósággal még szebbé és esztétikusabbá lehet tenni egy weblapot. Érdemes próbálkozni.:)

Címkék: cikk
Szólj hozzá te is!
Név:
E-mail cím:
Amennyiben megadod az email-címedet, az elérhető lesz az oldalon a hozzászólásodnál.
Hozzászólás:
Azért, hogy ellenőrízhessük a hozzászólások valódiságát, kérjük írd be az alábbi képen látható szót. Ha nem tudod elolvasni, a frissítés ikonra kattintva kérhetsz másik képet.
Írd be a fenti szót: új CAPTCHA kérése
 
Még nincs hozzászólás.
 

Szeretnél egy jó receptet? Látogass el oldalamra, szeretettel várlak!    *****    Minõségi Homlokzati Hõszigetelés. Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati szigetelését.    *****    Amway termék elérhetõ áron!Tudta, hogy az általános tisztítószer akár 333 felmosásra is alkalmas?Több info a weboldalon    *****    Florence Pugh magyar rajongói oldal. Ismerd meg és kövesd az angol színésznõ karrierjèt!    *****    Fele királyságomat nektek adom, hisz csak rátok vár ez a mesebirodalom! - Új menüpont a Mesetárban! Nézz be te is!    *****    DMT Trip napló, versek, történetek, absztrakt agymenés:)    *****    Elindult a Játék határok nélkül blog! Részletes információ az összes adásról, melyben a magyarok játszottak + egyéb infó    *****    Florence Pugh Hungary - Ismerd meg az Oppenheimer és a Dûne 2. sztárját.    *****    Megnyílt az F-Zero Hungary! Ismerd meg a Nintendo legdinamikusabb versenyjáték-sorozatát! Folyamatosan bõvülõ tartalom.    *****    A Cheer Danshi!! nem futott nagyot, mégis érdemes egy esélyt adni neki. Olvass róla az Anime Odyssey blogban!    *****    A 1080° Avalanche egy méltatlanul figyelmen kívül hagyott játék, pedig a Nintendo egyik remekmûve. Olvass róla!    *****    Gundel Takács Gábor egy különleges könyvet adott ki, ahol kiváló sportolókkal a sport mélységébe nyerhetünk betekintést.    *****    21 napos életmódváltás program csatlakozz hozzánk még!Január 28-ig 10% kedvezménnyel plusz ajándékkal tudod megvásárolni    *****    Szeretne egy olyan általános tisztítószert ami 333 felmosásra is elegendõ? Szeretne ha csíkmentes lenne? Részletek itt!!    *****    Új játék érkezett a Mesetárba! Elõ a papírral, ollóval, és gyertek barkácsolni!    *****    Tisztítószerek a legjobb áron! Hatékonyság felsõfoka! 333 felmosásra elengedõ általános tisztítószer! Vásároljon még ma!    *****    Hayashibara Megumi és Okui Masami rajongói oldal! Albumok, dalszövegek, és sok más. Folyamatosan frissülõ tartalom.    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    333 Felmosásra elegendõ! Szeretne gazdaságosan felmosni? Szeretne kiváló általános tisztítószert? Kiváló tisztítószerek!    *****    Ha tél, akkor téli sportok! De akár videojáték formájában is játszhatjuk õket. A 1080°Snowboarding egy kiváló példa erre