Betűtípus Copy

Betűtípusok

Alapfogalmak

Karakter: Egyetlen elem. Például betű, szám vagy írásjel.

Betűtípus/Font: Olyan betűtervsorozat, ami egy teljes ábécét alkot, és amelyet nyomtatásban vagy a számítógép képernyőjén meg lehet jeleníteni. A betűtípus család egy tagja pl.: Arial Regular. A számítógépes környezetben használt font szó is egy adott betűtípust jelent, amelynek karakterei egy közös fájlban vannak tárolva. Egy fontban minden tárolt karakter rajzolata egyazon betűtípus tipográfiai jellegzetességeit mutatja. A raszterfontok a betűképeket csak néhány méretben definiálják, a vektorfontok (TrueType, OpenType, Graphite) karakterei viszont bármilyen méretben megjeleníthetők a minőség változása nélkül. Az előbbi csoporthoz tartoznak például a fon kiterjesztésű fájlok, az utóbbiba a ttf, ttc, otf kiterjesztésűek. Egy adott font karakterei megjeleníthetők dőlt (italic), félkövér (bold) valamint további stílus változatokban is.

Betűtípuscsalád: A betűtípus terv karaktereinek teljes skáláját tartalmazza. Az Arial pélául egy betűtípuscsalád neve, amely azonos stílusú betűtípusok sorozata, és ezek a változatok mindegyike egyedi betűtípusnak minősül. Tehát például az Arial Regular, Arial Italic, Arial Bold, Arial Bold Italic és az Arial Black is mind külön betűtípus, de egy betűtípuscsalád részei.

Pontméret: A pont a tipográfia legkisebb mértékegysége, amelyet a karakterek és a térközök mérésére használnak.

Kerning: Az egyes karakterek közötti tér.

Címsorok: A tartalmak címeit jelölik. A weben H1 – H6-ig jelöljük a HTML kódban. Egy oldalon csak 1db H1 található, ami a kezdő címünk és a legnagyobb súllyal bír. Ez nagyon fontos, mert több H1 használata tilos és bünteti a Google! A fő kulcsszavunkat is tartalmaznia kell. A H2-H6-ig a további alcímeket jelöljük, fontossági, hierarchikus sorrendben.

Törzsszöveg: A bekezdések, folyószövegek a weboldalon.

Az általános betűtípus kategóriák, besorolások

Serif: A serif egy dekoratív vonás, ami a betűk végén található. Talpas fontoknak is hívjuk. Nézd meg a példa kép T betűjét. Olyan mintha talpa lenne alul, nem igaz? 🙂

Általában hosszú terjedelmű szövegrészekhez használjuk. Például könyvekhez, újságokhoz. Ennek az az oka, hogy a serif betűtípusok könnyen olvashatóak.

A weben pedig inkább a címsorokban alkalmazzuk.

Sans-serif: a sans franciául „nélkül”-t jelent, tehát a sans serif jelentése: ’betűtalpak nélküli’, talpatlan betűtípusok. Tiszta vonalakkal rendelkeznek (nincsen rajtuk dekoratív vonás). Modern és minimalista megjelenést kölcsönöznek.

A Sans-serif betűtípusok népszerűbbek a weben, mint a serifek. Címsorokhoz, feliratokhoz, törzsszövegekhez ugyanúgy használhatjuk.

Monospace: Itt minden betű azonos fix szélességű. Mechanikus megjelenést ad a betűtípusnak.

Display: Nagy méretben való használatra szánták, a címsorok díszítéséhez. Nem ajánlott a törzsszövegben használni. Ihletet merítettek a betűk más műfajaiból is. Például a kézzel festett jelekből, kalligráfiából vagy a használatuknak megfelelő esztétikából, esetleg még díszített, egzotikus, absztrahált vagy más stílusban rajzolt karaktereket tartalmaznak.

Kurzív, szkript (cursive): Eredetileg arra tervezték, hogy a kézi írást gyorsabbá és kellemesebbé tegye. Mára viszont olyan egyedi webes betűtípussá vált, ami utánozza a kézzel rajzolt írást.

Hogyan válasszuk ki a honlap betűtípusait?

Style vs. variable font

A variable (változó) betűtípus CSS-en keresztül lehetővé teszi a betűtípusok sokféle változatának egyetlen fájlba való beépítését ahelyett, hogy minden szélességhez, súlyhoz vagy stílushoz külön fontfájlt használnánk. A változó betűtípus előnye, hogy a variációk teljes skálájához hozzáférhetünk, nem csak azokhoz, amiket korábban letöltöttünk. A fájl természetesen nagyobb mintha egy betűtípust letöltöttünk volna, de ha egy statikus fontcsalád teljes arzenálját le akarjuk tölteni, akkor már kisebb.

Style (szabványos vagy statikus) betűtípus:
Régen egy betűtípuscsaládban több különálló betűtípust készítettek és minden betűtípus egy meghatározott szélesség/súly/stílus kombinációt jelentett. Tehát külön fájlokban tárolták őket. Például a „Roboto Regular”, „Roboto Bold” és „Roboto Bold Italic” azt jelenti, hogy végül több különböző betűtípus-fájlt kaptak, amik egy teljes betűtípust adtak ki.

Összegzés:
A WordPress + Divi mind a 2 változatot támogatja, így nem kell figyelned, hogy milyen kategóriából választasz majd betűtípusokat, de leírtam, hogy tudd a különbségeket.

Mit akarunk üzenni a betűtípusainkkal?

Alaposan át kell gondolnunk, hogy mit akarunk kommunikálni a választott fontunkkal. Az alaphangulat természetesen ránézésre érződni fog, de számításba kell venni a különböző hagyományokat is, hogy mit vár el a látogató egy adott típusú honlaptól. Ezért érdemes megnézni a készülő honlap témájának a konkurencia oldalait és felmérni, hogy serif vagy sans serif betűket használnak-e túlnyomó részben.

A serif betűtípusok például főként megbízható, professzionális márkákhoz kapcsolódnak. Egy kicsit régebbi stílusúak, bár itt megjegyezném, hogy jönnek vissza a retro trendek és egyre több serifet használnak a designerek a címsorokban. A könyvelőirodák, könyvesboltok, híroldalak, egyetemek, ruha márkák gyakori választásai.

A Sans serif ezzel szemben sokkal elterjedtebb választás, bármilyen kategóriát választunk. Nem lehet mellé lőni vele, csak jó párosításban kell használni. Modernséget sugároz. Ha hosszú szövegeink vannak, akkor a törzsszövegben mindenképpen a sans serif-re essen a választásunk!

A tözsszövegek és címsorok betűtípusát, stílusát sose változtassuk meg, egy honlapon belül! Ha egynél lehorgonyoztunk, akkor tartsunk is ki mellette, mert így tudjuk csak megtartani a szép összképet.

Mennyi betűtípust bír el egy honlap?

Maximum 3, de inkább 1 vagy 2 betűtípust lehet használni egy honlapon. Egyszerűen azért, mert különben nehezen olvasható, értelmezhető és zavaros lesz a végeredmény. Csak a magas, profi szinten lévő designerek szeghetik meg ezt a szabályt, akik erre specializálódtak és fontokkal feküdnek és kellnek. De azért nyugodj meg, mert így is van mozgásterünk. Az egyes betűtípusoknak lehet a vastagabb vékonyabb vagy dőlt változatait is keverni. Az első honlapjaidnál mindenképpen 1 vagy 2 betűtípust válassz.

Súly
A súly a betűtípus vastagságára vonatkozik. Light, Regular, Bold, Black. (Vékony, szabályos, félkövér, félkövér és fekete), ennél több variáció is létezik.

A súlyok közötti kontraszt elengedhetetlen a betűtípusok kombinálásakor. Egy nagyon vastag betűtípus egy nagyon vékony betűtípussal kombinálva gyakran kiegyensúlyozatlannak tűnhet. Az azonos vastagság sem szép. Meg kell találni a megfelelő egyensúlyt.

Dőlt
Az Italic (dőlt) betűtípusok, általában minden fontcsaládban benne vannak és az egyes súlyokhoz, külön készítenek dőlt verziót.

Fontpárok kiválasztása

Szinte minden honlap a Google fontokat használja, ráadásul a Divi beépítetten is támogatja, ezért mi is azokkal fogunk dolgozni.

Van lehetőség további egyedi fontokat feltölteni, de ezek lassíthatják webhelyünket, ezért csak alapos meggondolás után válasszuk, ilyen betűtípusokat. (Később majd megnézzük, hogy hogyan lehet felrakni)

Fontos, hogy csak olyan betűtípust válasszunk, aminek megvannak a magyar ékezetes karakterei!!!

GOOGLE FONTS: https://fonts.google.com/

A fontpárokat úgy fogjuk kiválasztani, hogy megnézzük, hogyan néznek ki egymáshoz viszonyítva, címsor + szövegtörzs elrendezésben.

Fontpárok esetén lehet kombinálni a Serif és Sans serif fontokat.

Gyakoribb választás: Serif + Sans serif, Sans serif + Sans serif
Ritkább választás: Serif + Serif, Sans serif + Serif

Ha ihletet merítenél és utána járnál, hogy milyen párosításokat szoktak használni, akkor a Google keresőjébe a Google fontpair szót írd be. (Ezeken az oldalakon figyelj arra, hogy nem mindegyik betűtípusnak van magyar ékezetes készlete) Ha pedig kiválasztottál már 1 betűtípust, ami tetszik, ez legyen pélsául a Roboto, akkor rákereshetsz annak a gyakori fontpárjaira is: Roboto fontpair

Itt van pár oldal, ahol nézelődhetsz:

https://reliablepsd.com/ultimate-google-font-pairings/

https://www.fontpair.co/

( Lesz majd videós gyakorlat a fontpárok elkészítésére egy későbbi leckében )

X-magasság
Az X-magasság a betűtípuson belüli egyes karakterek magasságára utal, különösen figyelve a kisbetűs x -re . Általában a hasonló x-magasságú betűtípusok jobban működnek együtt, mint a változó x-magasságúak.

Szerkezet
A betűtípus alapszerkezete magában foglalja annak összes jellemzőjét, valamint olyan dolgokat, mint a karakterek alapformája és a térközök. A betűtípusok szerkezetével való kontraszt létrehozása a betűtípusok kombinálásának bevált módszere. De célszerű olyan betűtípusokat választani, amelyek legalább néhány szerkezeti elemben közösek (például x-magasság vagy a „normál” stílus súlya), nem pedig a merőben eltérőeket.