Szeretem a könyvet, mert holt betűiben benne van minden, ami elmúlt, és minden, ami lesz.
Fekete István

író

A weben található tartalmak tetemes része olvasnivaló, azaz bekezdésekre tagolt szöveg. Az emberek azonban a szó klasszikus értelmében nem olvasni jönnek az internetre, hanem böngészni. Ez az olvasásnál felszínesebb, kevésbé koncentrált tudatállapotot jelent, amelyben nagy hangsúly van a szórakozáson akár az információ rovására is. A klasszikus tipográfia, a nyomtatott szövegek művészi elrendezéséről szól, azonban a webes tipográfiának van egy plusz feladata is emellett. Segítenie kell az információ átjutását a webes környezetben szórtabb figyelmű felhasználók számára. Ez jóval tagoltabb, kontrasztosabb, színesebb megoldásokat követel, mint amit egy könyv tördelésénél megszoktunk. A képes webes tartalom mellett hangsúlyosabbá válnak a cím feliratok, és a betűtipusok stílusa, hangulata is fontos szempont lett.
Tartalom
2
3

FELADATOK

VIDEÓK

LETÖLTENDŐ

LINKEK

KAPCSOLÓDÓ

KÜLSŐ VIDEÓK

Szöveges tananyag

Sokan egyenesen úgy tartják, hogy az írásbeliséggel kezdődött a klasszikus kultúra az emberiség történetében. Az írás elsődleges célja mindig is az volt, hogy valamilyen üzenetet juttasson el az író a feltételezett olvasók felé. Ugyan már a régi kódexírók is törekedtek az esztétikus megjelenésre, és illusztráció-számba menő iniciálékkal díszítették az oldalak kezdőbetűit, a szövegek tördelésének nem volt olyan fontos szerepe. Arról nem is beszélve, hogy az olvasás tudománya csak kevesek kiváltsága volt. A könyvek művészi értéke így nem lehetett túl nagy hatással a tömegekre.

Ma azonban az egész társadalom az írásbeliségen alapszik. Vannak, akik az internet kialakulását a könyvnyomtatásnál is jelentősebb kultúrális forradalomnak tartják. Az biztos, hogy alapjaiban rendezte át az emberi szokásokat. Nincs olyan terület, amire ne lett volna hatással. Máshogy tájékozódunk, máshogy tanulunk, máshogy tartjuk a kapcsolatot, és máshogy olvasunk. A digitális világban, ahol a betűk akármilyen alakot ölthetnek, sokkal fontosabbá vált a forma. Az olvashatóság különösen a rövidebb feliratok, címek és logók esetében szorulhat háttérbe a betűtipussal, a stílussal, a hangulattal szemben.

Nem véletlen, hogy a legtöbb honlapkészítéssel foglalkozó szakmai oldal a legfontosabb webdesign trendek között említi meg a tipográfia alapú weboldalakat. Ezek azok az első pillantásra is nagyon elegáns, kifinomult hatást keltő website-ok, amelyeknek a gondosan összeválogatott betűtípusok határozzák meg a stílusát. Bár rendkívül népszerűek a képek és a videós tartalmak is a neten, a keresőoptimalizálás miatt a szöveges tartalom létjogosultsága soha nem kérdőjeleződhet meg. A modern weboldalak esetében a betűtípusok, a tipográfia, és a szövegek tagolása kiemelt jelentőséggel bír. Az alábbi példában egy mobil alkalmazást népszerűsítő oldal használja a könyvszerkesztésben megszokott tipográfiai és illusztrációs megoldásokat ezzel a klasszikus értékeket és az igényességet hangsúlyozva. Nézz meg további tipográfiai weboldalakat is inspirációként.

Tipográfiailag igényes honlapok trendje – nagy a kereslet a különleges betűtípusokra

Régen is létezett a pixeles ábrázolás

Betűtípusok

A felületes szemlélő számára minden betű egyformának látszik. Egy átlag felhasználó talán csak a díszes, vagy a kézírásos betűtipusokat tudja megkülönböztetni egymástól. Éppúgy, mint a színek és a webdesign stílus esetében a betűtípus segít a hangulat kialakításában, egyfajta meg nem fogalmazott érzetet kelt.

Egy leendő webdesigner azonban nem rekedhet meg ezen a szinten. Vegyük most elő a képzeletbeli nagyítót, és vizsgáljuk meg az egyformának tűnő hangya-méretű betűket egy kicsit közelebbről.

A betűk formája folyamatosan együtt fejlődött a betűk papírra vetésének technológiájával. A kézírás esetében a szabályos formájú betűk tették lehetővé az olvashatóságot. A változó vonalvastagság a lúdtoll szerkezetéből, működéséből adódott. A nyomtatás feltalálásakor pedig olyan betűkészlettel dolgoztak, amely a lúdtollal való írás jellegzetességeit hordozta. Az újabb és újabb nyomdagépek szintén alakítottak a betűkészleteken, míg végül a XXI. századra eljutottunk a korlátlan lehetőségek korába.

A fonttípusok négy nagy családja

nagy felbontású digitális kép

Manapság egy betűtípusnak nincs a fizikai valóságban megfelelője. Bármilyen formájú kacskaringós vagy túldíszített betűkészlet könnyedén felépíthető a grafikai programok segítségével. A tervezők nem is fogják vissza magukat, több ezer különböző fontípus érhető el a neten.

A mai betűtípusok leginkább egy szoftverre hasonlítanak. Első hallásra talán kicsit furcsának tűnik ez az állítás. Pedig lehet őket telepíteni egy számítógépre, majd törölni onnan, beintegrálódnak a szövegszerkesztő és grafikai programokba, a legújabb változataik pedig a felhő technológia segítségével érhetőek el. Nemrégiben megjelentek az animált, a több színű és a paraméterezhető fonttípusok is.

Természetesen a betűtípusok is nagyon sok szempont szerint csoportosíthatóak. Én most négy nagy, viszonylag könnyen megkülönböztethető kategóriát szeretnék bemutatni.

Talpas és talpatlan betűtípusok

A tipográfiában a betűk vízszintes talpát serif-nek nevezik, ezért a talpas betűtípusok sokszor a nevükben viselik ezt a kis szócskát (míg a talpatlanokat sans-serif-nek, azaz talp-nélkülieknek nevezik). A talpas betűtípusok a régebbiek, a könyvnyomtatás kezdetekor ilyen fontkészletekkel dolgoztak. Azt azonban már mai kutatások bizonyítják, hogy a talpas betűtípussal papírra nyomtatott szöveg olvashatóbb. Még érdekesebb, hogy a webes szövegeknél, a képernyőn éppen ellenkező jelenséget tapasztaltak a kutatók. A talpatlan fontokat olvassuk könnyebben és gyorsabban.

Felül is van talp

nagy felbontású digitális kép

A talpas betűtípusok sok esetben a klasszikus értékeket szimbolizálják. Utalhatnak a szöveg tudományos igényességére, hitelességére, magára a könyv vagy az újság formátumra. Igényességet és időt-állóságot sugallnak. A részletgazdag grafikus illusztrációk fokozhatják ezt a hatást.

A fontok használata azonban inkább művészet, mint tudomány. Szinte minden szabályhoz tudnék olyan példát mutatni, ami vele ellentétes, mégis szép, vagy használható. Itt van mindjárt a Wired magazin honlapja, ami bizony az online felületeken is megőrizte a talpas fontokat. Talán azért, hogy utaljon a nyomtatott eredetre, és megőrizze a magazin-jelleget. Általában mind a talpas, mind a talpatlan betű típusok alkalmasak a hosszabb szövegek megjelenítésére.

Régen is létezett a pixeles ábrázolás

Az olvashatósági kutatások során utólagos kérdőívekkel vizsgálják, hogy ugyanolyan képanyaggal illusztrálva, ugyanakkora betűtípusokat használva, melyik esetben tudnak több információt felidézni a részt vevők az olvasott anyagból. Ezek után statisztikailag kielemzik a kapott eredményeket, tehát viszonylag pontosan kimutatható, hogy egy szöveg melyik betűtípussal szedve olvashatóbb.

Kézírást utánzó fonttípusok – kézírásos betűtipus

Érdemes megjegyezni, hogy angolul a „script” kifejezést használják ezekre a fonttípusokra, mert sok font-család elnevezése őrzi is az angol kifejezést (pl. Coneria Script). Folyékony szöveg írásához általában nem ajánlott, de mivel erős hangulatteremtő ereje van kihagyhatatlan a mai weboldalakról. Erősebb, torzítottabb változatai jól jöhetnek logó tervezéskor, míg az olvashatóbb típusok akár egy recept hozzávalóihoz is felhasználhatóak. Körültekintően kell alkalmazni, mert gyerekes, gyermeteg hatást is el lehet vele érni. Gyakran használják a kézműves termékekkel kapcsolatos arculati elemekhez, csomagolásokhoz, vagy a nyári akciókat megjelenítő hirdetésekhez. Az alábbi példában megfigyelheted, hogy a kézírásos fonttípusok esetében sem kötelezőek az indák és a kacskaringók. Elég, ha egy pici szabálytalanságot visz az összképbe. Nézd meg a blogban, hogy melyik az a 12 terület, ahol mindenképpen érdemes a kézírásos fonttípusokban gondolkodni.

Régen is létezett a pixeles ábrázolás

Az egyediség akár odáig is fokozható, hogy a saját kézírásodat használod a honlapodon. Nem ajánlom, csak érdekességként mutatom meg a Fontifier honlapját, ami képes elkészíteni a saját írott betűidből kialakított font-készletet. Úgy működik, hogy minden egyes betűt beírsz egy a honlapról letölthető sablonba, beszkenneled, feltöltöd, és a Fontifier legenerálja neked a kért formátumban a font-készletet.

Kézírásos fonttípusok webdesignereknek

Ezen az oldalon találsz néhány olyan kézírásos betűtípust, amelyet kifejezetten webdesignereknek ajánl a cikk írója. Érdemes leellenőrizni, hogy a magyar ékezetes karaktereket tartalmazza-e az adott fonttípus.

Díszbetűk – különleges betűtipusok

Ez az a terület, ahol bármi lehetséges. Logókhoz, címekhez, érzékletes plakátokhoz kiváló választás. Sokszor olyannyira elrugaszkodottak lehetnek a díszfontok, hogy már-már az illusztrációkat helyettesítik a betűk. Nincs új a nap alatt, a díszfont tulajdonképpen az iniciálé rokona. Az sem ritka, hogy jóformán olvashatatlan egy díszfonttal leírt teljes mondat, és csak sejteni lehet a leírt szót, vagy a környezet segítségével kitalálni. Erősebb a képi megjelenítés hatása, mint a szóba szorult információ. A betűknek nem csak a körvonalaik élnek, hanem anyagszerűek, akár három dimenziósak is lehetnek.

Photoshop felbontás nyomtatáshoz

Betűtípusok párosítása

Ez az a terület, ahol a szabályszerűségeket nem lehet matematikai precizitással meghatározni. Az alábbi szabályok megvédenek az eget verően nagy bakiktól. Különösen jó szolgálatot tesz ez a kis sorvezető azoknak, akik nem a webdesign-ból szeretnének megélni, és sem idejük, sem kedvük alaposabban belemerülni a tipográfia rejtelmeibe. Ha „csak” a saját honlapodhoz keresel valamilyen kiemelkedő megoldást, akkor az alábbi szabályokat alkalmazd a honlapodon, és meg fogsz lepődni, mennyivel igényesebb lesz az összhatás.

1

Két betűtípus elég. A harmadikat már indokolni kell.

Az egyik leggyakoribb kezdő hiba a fonttípusok halmozása, a tobzódás. Különösen gyermeteg hatást tud kelteni a több fajta kézírásos font használata egy oldalon, vagy az egymástól elütő stílusú díszfontok. De a többféle talpas, és talpatlan betűtípusok keverése is előidézhet egyfajta hirdetőoszlop hatást. Jobb megoldás, ha a fonttípusok minél bővebb verzióit használod, és a különböző vastagságú, dőltségű szövegeket kombinálod tetszésed szerint. A szöveg betűinek távolságával és a sortávolsággal is lehet játszani, ha egy jól elkülönülő szöveg-blokkot szeretnél létrehozni.

2

Következetes fonthasználat

Minden címhez ugyanazt a fonttípust használd a teljes munka során. Az idézetek, a táblázatok, egy recept hozzávalói, illetve a linkek mind indokolhatják esetleg egy eltérő betűtípus használatát. A fontos az, hogy a felhasználó már a betűtípusból és a színből tudja, hogy egy kattintható elemmel találkozott. Ennek a rendszernek a megtervezéséhez a megvalósítandó honlapot érdemes tartalmi szempontból elemezni. Mit szeretnél megkülönböztetni? Látszanak felhasználók, dátum, hozzászólások, idézetek, címkék, kategóriák, stb. Az, hogy csak két fonttípust használsz, nem jelenti azt, hogy csak kétféle feliratod lesz, hiszen a méret, a font vastagság vagy a szín is bevethető megkülönböztető elemként.

3

Kontraszt-hatás a betűtipusok kombinálásánál

Minél nagyobb a két használt fonttípus között a különbség, annál jobb. Ha a címet a talpas fontok közül választod, akkor legyen a hosszú szöveg talpatlan, vagy fordítva. Kézírásos cím esetén bármelyik jól olvasható fonttípus mellett dönthetsz, kivéve egy másik kézírásosat.

Ugyanaz a betűtípus működni fog címként és szövegblokként is, ha nagy méretbeli különbséget alkalmazol, és a címben a karakterek távolságát kicsit megváltoztatod, vagy a betűk vastagságával erősítesz rá a különbségre.

Figyeld meg, hogyan játszanak a színbeli, betűméretbeli kontrasztokkal a New York Times izgalmas tartalomjegyzékében. A szöveg iránya is különbözik bizonyos bekezdésekben, ami szintén egyfajta kontrasztnak tekinthető. Ha rákattintasz a képre, a jobb alsó sarokban megjelenik egy nyilakból álló nagyítási lehetőség, hogy alaposan megfigyelhesd a részleteket.

Amíg bizonytalan vagy az összeillő fontpárok megtalálásában és felismerésében, érdemes a fontpárosítással foglalkozó blogbejegyzések ajánlásait is szem előtt tartani.

Responsive képkezelés -  adaptív képek

Kötelező eszközök a betűtipusok kezeléséhez és megismeréséhez

WhatFont

Nagyon fontos lenne a fejlődéshez, hogy minden weboldalon meg tudd állapítani, milyen fontot használnak. Ehhez tökéletes eszközt jelent a WhatFont Chrome böngésző plugin, amit innen tölthetsz le. Így egyetlen gombnyomással le tudod ellenőrizni, milyen fontokat használnak az általad nagyon szépnek, követendőnek ítélt honlapok, vagy éppen a ronda font-összetételeknél is nevesíteni tudod, hogy mit nem szeretnél. Elég egy hónapig használnod ahhoz, hogy magabiztosabban mozogj a fonttípusok témakörében.

Telepítés után a jobb felső sarokban megjelenik egy kis ikon. Ha rákattintasz az ikonra, akkor a weboldal bármely betűje fölé viszed a kurzort, ki fogja írni, hogy azt a szöveget milyen fonttípussal írták. Ha most rá is kattintasz a szövegre, akkor az alkalmazott font minden lényeges tulajdonságát is ki fogja írni, például a fontméretet. Ha meguntad a vizsgálódást, és befejezésképpen rákattintasz a WhatFont ikonra, akkor újra normál üzemmódban használhatod a weboldalt.

Betűtipusok kezelése, tárolása

Rengeteg font nézegető, kezelő, kategorizáló szoftvert lehet találni a piacon, és néhányat ki is próbáltam már. Legjobban a FontBaset szeretem mert gyors, és egy pillanat alatt felméri a számítógépemen telepített betűtípusokat. Majd meg fogod látni, hogy a címkézési lehetőség aranyat ér. Hasonlóan a Google Fonts-nál megszokott szolgáltatásoknál, meg tudod nézni a teljes karakterkészletet, és az “árvíztűrő tükörfúrógép tesztet” is eltudod végezni. Ez azt jelenti, hogy ha egy fontkészletet le szeretnél ellenőrizni a magyar ékezetes karakterekre is, akkor ez a kifejezés tartalmaz minden lehetséges ékezetes betűt.

Tipp webdesignereknek

A “Lorem ipsum dolor sit amet” kezdetű latin szöveg a XVI. század óta a nyomdászok, tipográfusok, és újabban a tervezőgrafikusok töltelék szövege. Akkor használjuk, ha még nem áll rendelkezésre a konkrét tartalom, de már szeretnénk látni a szöveg vizuális képét. Ha megrendelésre készítesz weboldalakat, egyáltalán nem fog profi benyomást kelteni, ha Liptai Klaudia aktuális szerelméről másolsz be szövegeket egy bulvár oldalról, vagy ha az előző megrendelőd honlapjáról kerülnek át szövegek az éppen készülő munkádba. Vannak olyan Lorem Ipsum generátor oldalak, ahol könnyedén generálhatsz magadnak ilyen feltöltő szövegeket, amivel a grafikai tervezés is könnyebb lesz.

A Drupal tartalomkezelő rendszerhez pedig létezik egy olyan modul, amely tetszőleges számú és típusú tartalmat le tud generálni, hogy ne kézzel kelljen felvinni például a blogbejegyzéseket a teszteléshez.

Itt pedig megtalálod az 5 legnépszerűbb WordPress plugint ami teszt tartalom előállítására alkalmas.

Ha esetleg eddig abban az illúzióban ringattad magad, hogy a honlap tervezésekor már rendelkezésre állnak a feltöltendő tartalmak, ki kell ábrándítsalak. A legtöbb esetben nem így van.

Rendszer fontok

A webes tipográfiában azokat a betűtípusokat nevezzük rendszer fontoknak, amelyek minden operációs rendszerben (Windows, Mac, Linux…) rendelkezésre állnak. Ez azt jelenti, hogy bármely felhasználó gépén, ugyanúgy megtalálhatóak. Web safe fontoknak is nevezik őket, mert az ezekkel tervezett weboldalak biztosan ugyanúgy fognak kinézni minden környezetben. A rendszerfontok száma azonban eléggé korlátozott, és nem is túl elegánsak.

Responsive képkezelés -  adaptív képek

Betűtipusok a helyi gépen, a webszerveren, és a felhőben

A fontkészletek egyik lehetséges helye a felhasználói számítógépeken van. Amikor egy weboldalon a böngésző kiolvassa, hogy az adott feliratot milyen fontkészlettel kellene megjelenítenie, akkor először megpróbálja az adott felhasználó gépén megtalálni a szükséges font-file-okat. Ezekből a file-okból tudja a megjelenítési szabályokat kiolvasni. Természetesen minden egyes felhasználó más-és más operációs rendszerrel rendelkezik, és a telepített fontkészletek is minden felhasználó esetében különbözőek lehetnek.

Ennek a technológiai problémának a kiküszöbölésére két megoldás is lehetséges. Az egyik esetben a webszerverre, a honlapod file-jai közé helyezed a fonttípusokat megvalósító file-okat. Ekkor ugyanis a böngésző ugyanúgy hozzáfér az általad használt fonttípusokhoz, mint ahogy a weboldalad más elemeihez is. Az alábbi videó azok számára lesz hasznos, akiknek már van honlapjuk, és szereztek némi tapasztalatot a tartalomkezelő rendszerekkel (pl. WordPress, Drupal, Joomla).

1. VIDEÓ – Hogyan telepíthetsz betűtípusokat a webszerverre?

A videóban lépésre lépésre megmutatom, hogyan tudod a tárhelyedra másolt betűtípusokat használatba venni a honlapodon.

A másik esetben egy külső felhő alkalmazásban tárolt fontokra hivatkozol, mint amilyen a Google vagy az Adobe font szolgáltatása.

Font formátumok

A fonttípus tulajdonképpen egy szoftver, amit a megfelelő eszközök kezelni, illetve olvasni tudnak. A fonttípusok megjelenítéséhez szükséges információkat egy speciális formátumú file tartalmazza. Itt ellenőrizheted le, hogy aktuálisan melyik böngésző melyik file-formátumokat támogatja. Ez azt is jelenti, hogy ha böngésző függetlenül szeretnél egy fonttípust használni, akkor több file-formátumban is rendelkezésre kell állnia.

True Type (.ttf)
Történetileg a legrégebbi font formátum, ezért sok esetben nem működnek az aktuális operációs rendszerekkel, programokkal. Így előfordulhat, hogy hiába van telepítve egy betűtípus a gépeden, mégsem tudod használni, vagy bizonyos ékezetes betűket nem jelenít meg.

Postscript Type (.pfb és .pfm)
Windowson és Macen egyaránt működnek.

Open Type (.otf)
Egy viszonylag új font formátum, amely afféle szabvány lett. Az OpenType betűtípusok bővített karakterkészletet, gazdagabb nyelvi támogatást és speciális tipográfiai beállítási lehetőségeket is biztosítanak.

Betűtipusok telepítése a helyi számítógépre

A kívánt fonthoz tartozó file-t másold a c:\windows\fonts alkönyvtárba. A Control Panel -> Appearance and Personalization -> Fonts alatt tudod a feltelepített fonttípusokat nézegetni, törölni, vagy rendszerezni.

2. VIDEÓ – Betűtípusok telepítése a számítógépedre

Hogyan tudsz új betűtípusokat telepíteni a számítógépedre, és hogyan nézheted meg Windows alatt, milyen betűtípusokkal dolgozik a géped jelenleg?

Google fontok

Óriási változást hozott a font felhasználók életébe a Google kezdeményezése, amely több száz fontot tett mindenki számára elérhetővé ingyen. A Google Fonts egy olyan paraméterezhető gyűjtőoldal, ahol bizonyos kategóriák alapján választhatsz a fontcsaládok között.

Ha a Google fontokat használod, akkor függetlenítetted magad a rendszerfontoktól. Egy központi helyről, a Google „felhőjéből” fognak érkezni a betűk, és ez biztosítja a weboldal böngésző függetlenségét.

Különböző beállítások segítenek abban, hogy pontosan a neked megfelelő fontkészletet sikerüljön megtalálnod. A kézírásos fontok között például a „Handwriting” szűrőfeltétel beállításával tudsz megfelelőt keresni. Az alábbi képernyőképen megmutatom a jobb oldali lehetséges beállítási lehetőségeket.

Responsive képkezelés -  adaptív képek

Nagyon hasznos lehetőség, hogy már a választás fázisában megnézheted az adott fonttípussal írt szavakat, vagy akár leellenőrizheted, hogyan fog kinézni egy egész bekezdés. Ehhez fontos tudni, hogy bizonyos funkciók csak akkor válnak elérhetővé a számodra, ha az adott fonttípusra kattintasz, vagy csak fölé húzod az egeret. Ilyenkor az alábbi ábrán látható plusz funkciók fognak megjelenni. Ezek mindegyike arra vonatkozik, hogy hogyan szeretnéd az adott fontot megjeleníteni. Beállíthatod a fontméretet, és választhatsz a fontcsalád különböző tagjai között (például megnézheted a dőlt, a vastagított vagy a vékonyított változatot is). Megjeleníthetsz egyetlen mondatot, egy bekezdést, az ábécét, vagy éppen a számjegyeket is, de saját szöveget is begépelhetsz.

Responsive képkezelés -  adaptív képek

Nem minden fontkészlet tartalmazza a magyar ékezetes betűket. Ha erre van szükséged, akkor be kell állítanod egy másik szűrőfeltételt: a Languages részben a „Latin Extended” feliratot kell választanod. Ha látni szeretnéd az ékezetes betűket, írd be a megjelenítendő példamondat helyére: Árvíztűrő tükörfúrógép az alapban felugró angol példa mondatok helyett.

Az eddigi beállítások után így néz ki a képernyő. Vedd észre, hogy hiába állítottuk be a „Latin extended” szűrőfeltételt, a képen ellenőrizheted, hogy nem mindegyik fonttípussal jelenítődnek meg jól az ékezetes betűk. Tehát, ha helyes magyar ékezetes szövegeket kell megjelenítened egy honlapon, akkor nem elég szűrnöd, ki is kell próbálnod egy ékezetes szöveggel, ha biztosra akarsz menni.

Responsive képkezelés -  adaptív képek

3. VIDEÓ – Hogyan építsd be a weboldaladba a Google fontokat?

Nézd meg a videóban, hogyan tudod a Google fonts rendszeréből kiválasztott fonttípusokat egy html oldalon használatba venni.

Hogyan használhatod a Google fonttípusokat?

Válaszd ki a fonttípusokat

A fő oldalon válaszd ki azokat a fonttípusokat, amikre szükséged van. A Collection-höz kell adnod őket a kis piros plusz jel segítségével, amely minden egyes fonttípus jobb felső sarkában található. Olyasmi ez, mint a webshopokban a kosár. Ugyan nem lesz szem előtt a lista, de a végén egyben fogod tudni kezelni a paraméterezésüket és a letöltésüket, illetve a weboldalba való beágyazáshoz szükséges kódot is egyben másolhatod ki.

Testreszabás

Ezek után alul egy felugró ablakban láthatod a kiválasztott fontokat. Ha rákattintasz, feljön egy kisebb ablak, amelynek a segítségével újra megnézheted a kiválasztott fonttípussal a beírt szöveget mindenféle méretben. Még a letöltés előtt utoljára itt is ellenőrizheted, hogy valóban erre van-e szükséged. A jobb felső sarokban az első kis nyíl a Preview, a másodikkal pedig már le is töltheted a fontcsalád használatához szükséges file-okat.

A CUSTOMIZE funkció lehetővé teszi, hogy csak annyit tölts le a fontcsaládból, amennyire valóban szükséged van. Ha nem fogod a dőlt betűket használni, akkor csak ki kell ikszelned az „italic” családtagokat.

Másold ki a kódokat

Végül szintén az EMBED fülre kattintva kapod meg azt a két soros kódot, amelyből az egyiket a megfelelő stíluslapra kell másolnod (ez valamelyik központi CSS file, amely meghatározza a weboldalad stílusát). A másikat pedig oda kell beírnod, ahol ezt a fonttípust szeretnéd használni a HTML-ben. Egy pontos útmutatót is találsz ugyanennek az ablaknak a jobb alsó sarkában, amely a fontok felhasználására vonatkozik.

Kiemelt jelentőségű fontok, szövegek a weboldalakon

Van néhány olyan eset a weboldalakon, ahol nagyobb odafigyelést igényel a fontok kiválasztása. Az alábbi szituációkban reflektor-fénybe kerül a használt fonttípus. Általában ezek egyszavas vagy egymondatos feliratokat jelentenek tipikusan erőteljes háttér elé helyezve. A blogban találsz egy nagyon jó cikket arról, hogyan válassz fonttípusokat a weboldaladra, és néhány tipikus hibára is mutatunk példákat.

A jó plakátok művészi módon építik be a tipográfiát

nagy felbontású digitális kép

A művészi grafikai tervezés különleges módokon használja a fontokat. Sok esetben a képek és a feliratok szerves egységet alkotnak. A betűk lehetnek átlátszóak, vagy a térbeliség látszatát keltve, akár a képelemek közé is keveredhetnek.

  1.  Kártya-típusú oldalakon, ahol egy háttérkép és egy címsor adja meg a weboldal karakterét.
  2. Videó háttér, címlapra kerülő slide-show
  3. Plakátok, képeslapok
  4. Bannerek, hirdetések
  5. Logó
  6. Szlogen
  7. Kattintható elemek: menük és gombok

VIDEÓK

FELADATOK

  1. Válassz ki egy tetszőleges magyar ékezetes betűket is tartalmazó fonttípust a Google Fonts kínálatából. Ki tudod próbálni, hogyan működik?Ahogy ígértem, érkezik a segítség. Az alábbi tömörített zip file két másik file-t tartalmaz: elsohtml.htm és elsostiluslap.css. Ki kell tömöríteni a zip file-t. Ha most kétszer rákattintasz a html file-ra, akkor az alapértelmezett böngészőben megnyílik egy html oldal. Láthatod, hogy a címsorokat kézírásos Google fontokkal írtam ki.

    Ha azonban jobb egérgomb után „Open with” funkcióval megnyitod mind a két file-t szerkesztésre, akkor látni fogod, hogy csillagos sorokkal megjelöltem azokat a részeket, amelyekre oda kell másolni, amit a Google Fonts megjelenít a font-választásotok után. Ha most itt a megfelelő két sort kicseréled, akkor az általad választott Google fonttal fog kiíródni a címsor.

    Itt töltheted le a segítséget a Google fontok kipróbálásához

  2. Az alábbi feliratok közül, melyik szó melyik fonttípussal íródott? Csak a kategóriát kell megállapítanod, és nem a konkrét font nevét.
  1. Tervezz meg egy címsorból és egy bekezdésnyi szövegből álló egységet két összeillő fonttípusból. Használd az éppen elérhető szövegszerkesztődet! Tudsz diszharmonikus párost is bemutatni?
  2. Emlékszel a belvárosi Platán nevű étteremre? (Az étterem Budapest belvárosában található. A célközönség: a világban sokat utazó 40 év körüli városi értelmiség. Könnyű, egészséges fogásokat kínálnak. Az étterem onnan kapta a nevét, hogy az egyik falát egy népszerű kortárs festőnő „Platán” című alkotása borítja be.) Tegyük fel, hogy logót szeretnének készíttetni veled, de ragaszkodnak a tipográfiai logóhoz. azaz a logó az étterem nevét fogja tartalmazni. Keress hozzá megfelelő fonttípust.
  3. Állapítsd meg, milyen fontokat használtál a weboldaladon. Hogyan választottad ki őket? A WordPress sablon szállította őket? Tudod-e, hogyan lehet a weboldalad adott pontján megváltoztatni a fonttípust? Például meg tudnád-e változtatni a címsorok feliratában szereplő betűtípust?
  4. Töltsd le a leckében szereplő WhatFont eszközt a böngésződre. Nézz meg hármat ezek közül a díjnyertes tipográfiai alapú website-ok közül, és állapítsd meg a használt fonttípusokat. Hány különbözőt találsz egy website-on?
  5. Készíts motivációs posztert az alábbi idézetekhez. A motivációs poszter általában egy erős képet tartalmaz háttérként, előtte pedig valamilyen szép tipográfiai megoldással a tömör, valamilyen motivációs célt szolgáló idézet, vagy mondat áll. Most bármilyen interneten elérhető képet felhasználhattok, hiszen csak gyakorlunk, az sem baj, ha rajta van a vízjeles stock fotó felirat. Inspirációként nézzétek meg a Pinterest-en az eddigi gyűjtésemet.

    „Semmilyen szél nem kedvező annak, aki nem tudja, milyen kikötőbe tart – Seneca”

    „Ha nem tudom irányítani az eseményeket, hagyom, hadd irányítsák magukat. – Henry Ford”

    „Az élet olyan, mint a biciklizés. Ha meg akarod tartani az egyensúlyt, mozgásban kell maradnod. – Albert Einstein”

    „Ne sikeres ember próbálj lenni, hanem értékes. – Albert Einstein”

    „Egy fénykép meg egy évmilliók óta halott csillag most ideérő fénye között túl nagy különbség nincs.-Bartis Attila”

LETÖLTENDŐ

Töltsd le a 3 ingyenesen használható ékezets fonttípust! A fonttípusok személyes használatra ingyenesek, kereskedelmi használatuk nem megengedett. Forrás: http://www.abstractfonts.com/language/29/Latin+Extended+Additional

ingyen letölthető nagy felbontású képek tömörítéshez

Ha nem boldogulsz a Google fontok beillesztésével, akkor töltsd le ezt a két segéd file-t, amibe előkészítve beírtam, mit hova kell másolnod a fonttípus kiválasztása után.

ingyen letölthető nagy felbontású képek tömörítéshez

KAPCSOLÓDÓ BLOGBEJEGYZÉSEK

Fonttípusok választása weboldalakra

Hogyan válassz betűtípust a honlapodra?

A szövegek olvasása közben talán tudatosan nem is érzékeljük, hogy milyen fonttípusokat használt a tervező. Pedig a betűtípusoknak erős hangulatkeltő hatása van, amit érdemes a honlapodon is maximálisan kihasználni.

Tovább olvasok

KÜLSŐ VIDEÓK

Bevezetés a tipográfiába

Tipográfiai tippek kezdőknek

Képméret és képfelbontás