- Fordítás
Itt az ideje, hogy webes betűtípusokkal emelje ki a terveit.
Nem túlzás azt állítani, hogy a webes tipográfia életének izgalmas időszakát éli jelenleg. A közelmúlt technológiai ugrásai egy lépéssel közelebb vittek minket a weben megjelenő tipográfiai nirvánához. A lépés, amire mindenki várt.A biztonságos listán kívüli webes betűtípusok használatának szabadságát minden nagyobb operációs rendszeren nagyrészt három fő, szinte egyidejű technológiai tényező tette lehetővé: a @font-face szabály széles körű támogatása a böngészőkben; olyan "betűkészletek" megjelenése, mint a Typekit és a Fontdeck; új fontformátum létrehozása - egy archivált WOFF betűtípusfájl.
* Ezek közül a betűtípusok közül kevés érhető el cirill betűtípushoz, így ez a választék inkább a "kihelyezőknek" alkalmas. Reméljük, hogy ezek közül legalább néhány, és nem csak a szláv nyelvek cirill betűtípusa hamarosan megjelenik. Címkék hozzáadása
A szöveg megjelenítésére használt betűtípus befolyásolja annak érzékelését. Ezért ebben a cikkben összegyűjtöttük a 2016-os év legjobb ingyenes betűtípusait webes tervezők számára, amelyek segítenek a nyomtatott anyagok és webhelyek professzionális megjelenésében.
A 10 legjobb cirill betűtípus
A jó minőségű cirill betűtípusokat nem könnyű megtalálni, de még mindig sokkal több van belőlük, mint korábban. Az alábbi lista a közönséges serifeket és a sans-serifeket, valamint a különleges alkalmakra szánt rendkívül elegáns betűtípusokat egyaránt tartalmazza.
5. Oswald- klasszikus, enyhén tömörített sans-serif betűtípus, amely bármilyen eszközön jól mutat:
6. A Jura egy elegáns ferde, kerek formájú serif betűtípus, amely alcímekhez vagy törzsmásolathoz a legalkalmasabb:
7. Az Exo 2 egy univerzális technológiai betűtípus többféle stílussal, így elegendő lesz az oldal legtöbb szöveges elemének díszítésére:
8. pompiereÖnnek megfelelő, ha elegáns, de nem túl komoly betűtípust keres:
9. Az Aclonica egy másik élénk betűtípus a fülbemászó címsorokhoz és a nyomtatott promóciós cikkekhez:
10. A Museo egy sans-serif betűtípus, amely kicsiben és nagyban is jól mutat, vagyis alkalmas menüpontok megjelenítésére és az oldal törzsszövegére is. Ingyenesen elérhető a Museo Sans 500 és a Museo Sans változatban:
Ebben a cikkben professzionális grafikusok számára kínálunk betűtípusokat, amelyek segítségével oldalakat vagy nyomtatott anyagokat tervezhetnek. A rendelkezésre álló betűtípusok nagy száma gyakran zavaró, mivel ugyanakkor helyesen kell kombinálni őket. Íme a betűtípusok kombinálásának szabályai, amelyek segítenek ebben a feladatban:
- Ne használjon túl kontrasztos betűtípusokat - előfordulhat, hogy mindegyik felhívja magára a figyelmet, elvonva az olvasó figyelmét a tartalomról.
- De ne válasszon túl hasonlót - összeolvadnak, és a befejezetlenség érzését keltik.
- Hozzon létre egy vizuális hierarchiát – ne feledje, hogyan néznek ki általában a nyomtatott újságok: egyértelműen mutatják a címsorok szerkezetét.
- Ne feledkezzünk meg a kontextusról - elvégre a design nem csak így készül, hanem egy adott cég igényeinek megfelelően.
- Ne használjon háromnál több különböző betűtípust egy oldalon.
2018-ban a kiváló minőségű ingyenes betűtípusok száma lehetővé teszi a tervezők számára, hogy habozás nélkül dolgozhassanak a feladatokon. Ezért a legjobb ingyenes betűtípusokról írtunk.
A stúdió weboldalakat és alkalmazásokat tervez Androidra és iOS-re, mi pedig örömmel segítünk vállalkozásának egyedi és felismerhető dizájnnal vonzani a felhasználókat.
- Fordítás
Itt az ideje, hogy webes betűtípusokkal emelje ki a terveit.
Nem túlzás azt állítani, hogy a webes tipográfia életének izgalmas időszakát éli jelenleg. A közelmúlt technológiai ugrásai egy lépéssel közelebb vittek minket a weben megjelenő tipográfiai nirvánához. A lépés, amire mindenki várt.A biztonságos listán kívüli webes betűtípusok használatának szabadságát minden nagyobb operációs rendszeren nagyrészt három fő, szinte egyidejű technológiai tényező tette lehetővé: a @font-face szabály széles körű támogatása a böngészőkben; olyan "betűkészletek" megjelenése, mint a Typekit és a Fontdeck; új fontformátum létrehozása - egy archivált WOFF betűtípusfájl.
* Ezek közül a betűtípusok közül kevés érhető el cirill betűtípushoz, így ez a választék inkább a "kihelyezőknek" alkalmas. Reméljük, hogy ezek közül legalább néhány, és nem csak a szláv nyelvek cirill betűtípusa hamarosan megjelenik. Címkék hozzáadása
A fejezet első része a CSS betűtípusok megismerésének szenteljük. Ezen az oldalon megtudhatja, hogyan kell betűtípusokat beilleszteni a CSS-be, mik azok a webes betűtípusok és hogyan kell velük dolgozni, milyen betűformátumok érhetők el, és hogyan kell használni a Google Fonts szolgáltatást. Először nézzünk meg egy egyszerű példát egy CSS-betűtípus beépítésére:
P (betűcsalád: Verdana; )
Ez a kis kódrészlet azt jelenti, hogy az összes címkét
Verdana betűtípus alkalmazva. A font-family tulajdonság határozza meg, hogy melyik betűtípust vagy font-family-t használja a rendszer. Ennek a stílusnak a helyes megjelenítése a felhasználó böngészőjében attól függ, hogy a megadott betűtípus telepítve van-e a felhasználó számítógépére. Esetünkben, ha a felhasználó számítógépe nem rendelkezik Verdana betűtípussal, a böngésző az alapértelmezett betűtípust jeleníti meg.
Egy időben a tervezőknek több tartalék betűtípust is meg kellett adniuk arra az esetre, ha a fő hiányzik a felhasználó számítógépéről. Tegyük fel, hogy a szöveg stílusát a Verdana nyelven szeretné beállítani, és tartalékként a Trebuchet MS-t, a Geneva-t és bármely sans-serif betűtípust szeretné használni. Így van írva:
P (betűcsalád: Verdana, "Trebuchet MS", Genf, sans-serif; )
A kód feldolgozásakor a böngésző először ellenőrzi a Verdana betűtípus jelenlétét a felhasználó számítógépén. Ha a betűtípus jelen van, akkor a címkék tartalma
Ebben a betűtípusban jelenik meg. Ha a betűtípus hiányzik, a böngésző ellenőrzi a következő betűtípust a listában, a Trebuchet MS-t. Ha ez a betűtípus is hiányzik, akkor a következő betűtípus, a Geneva megléte kerül ellenőrzésre. Ha a felhasználó számítógépe nem rendelkezik Geneva-val, akkor a böngésző kiválaszt egy másik elérhető sans-serif betűtípust, és abban jeleníti meg a szöveget.
Jegyzet: a kódban idézőjelbe írtuk a Trebuchet MS betűtípus nevét. A betűtípus nevét dupla vagy szimpla idézőjelbe kell venni, ha szóközt tartalmaz.
A Wikipédia oldalán olvashat arról, hogy mi az a betűtípus serifekkel (serif) és anélkül (sans-serif).
Webes betűtípusok
A fenti betűtípus-használati módnak van egy hatalmas hátránya - korlátozott a betűtípusok száma. Csak azokkal a lehetőségekkel kell megelégednie, amelyek valószínűleg a legtöbb számítógépen telepítve vannak.
Hogyan lehet növelni a betűtípusok választékát, hogy az oldal dizájnja egyedi legyen, eredeti legyen? A webes betűtípusok segítenek. Olvassa el tovább a fejezetet, és megtanulja, hogyan kell velük dolgozni.
Tehát ahhoz, hogy a felhasználó böngészőjében megjelenjen a kívánt betűtípus, ezt a betűtípust le kell töltenünk a számítógépére. Ezt elég könnyű megtenni. A betűtípusok CSS-hez való csatlakoztatásának ez a módszere igazán széles lehetőségeket nyit meg a tervezők előtt. De érdemes megemlíteni egy légy pofont: először is, nem minden böngésző támogat egy bizonyos betűtípust (ami azt eredményezi, hogy a betűtípus nem jelenik meg), másodszor, ha a font fájl nagy, lelassulhat oldal betöltése.
Formátum támogatás
Hogyan lehet kezelni a fájlformátum eltérési problémáját? Vessünk egy pillantást a táblázatra, amely a legnépszerűbb betűformátumokat mutatja, és nézzük meg, mely böngészők támogatják őket:
Jegyzet: A betűtípus-támogatásról mindig naprakész információkat talál a caniuse.com oldalon. A keresősávba be kell írnia a formátum nevét (például ttf).
Ha a modern böngészőket célozza meg, akkor elegendő a TTF betűtípus használata - a leggyakoribb és használt. Abban az esetben, ha több formátumra van szüksége ugyanannak a betűtípusnak, speciális online konvertereket használhat egyik formátumról a másikra, majd egyesével csatlakoztathatja az összes fájlt. Így a böngésző kiválaszthatja azt a betűformátumot, amellyel működik.
Webes betűtípus a @font-face használatával
Tegyük fel, hogy saját egyedi betűtípusa van MyUniqueFont néven TTF formátumban, és szeretné, hogy weboldala törzsszövege ebben a betűtípusban jelenjen meg. Az első dolog, hogy másolja a fontfájlt abba a mappába, ahol az összes többi webhelyfájl található. Annak érdekében, hogy ne okozzon rendetlenséget, létrehozhat egy külön mappát a betűtípusok számára, például fontok elnevezéssel.
@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )
A font-family tulajdonság ebben az esetben más szerepet tölt be: ezzel adunk nevet a fontnak, hogy később ezt a nevet tudjuk használni stílus írásakor:
P (betűcsalád: MyUniqueFont; )
A második sor a fontfájl elérési útját adja meg. Példánkban a MyUniqueFont.ttf fájl a fonts mappában található. Az Ön URL-je eltérő lehet.
Google Fonts
A Google megkönnyíti a Google Fonts gyűjtemény bármely betűtípusának felvételét. Csak annyit kell tennie, hogy elkezdi használni a kívánt betűtípust, hogy megad néhány beállítást a Google betűtípus-oldalán, majd másolja a speciális hivatkozást ehhez a betűtípushoz, és adja hozzá a webdokumentumához.
Jegyzet: a Google teljes betűkészlet-gyűjteménye elérhető az oldalon Google Fonts. Az oldalon különféle szűrőkkel kereshetünk betűtípusokat kategória, vastagság, ábécé szerint.
Az alábbiakban leírjuk a Google-tól származó betűtípus csatlakoztatásának minden lépését. Ahhoz, hogy megértse, miről beszélünk, válasszon ki egy betűtípust a Google Fonts oldalon, és nyissa meg a Gyors használat gombra kattintva.
1. lépés: válasszon stílust
Először is, a kiválasztott betűtípus oldalán megjelennek a stílusának beállításai, valamint egy sebességmérő ikon, ami nem jelent mást, mint a betűtípus betöltési sebességét. Minél több betűstílust választ ki, annál tovább tart a betöltés. Ezért ajánlatos csak azokat a stílusokat kiválasztani, amelyeket használni kíván.
2. lépés: válasszon ábécét
Az oldalon további karakterkészlet választható: latin, cirill, stb. A betűtípustól függően előfordulhat, hogy az ábécé nem minden változata érhető el benne. Az előző bekezdéshez hasonlóan jobb, ha csak a szükséges ábécé előtt jelöli be a négyzetet.
3. lépés: adjon hozzá kódot a webhelyhez
Az első módszer egy hivatkozás hozzáadása a Google szerverére a HTML-kódban, ahonnan a betűtípus letöltődik. A már kész kódrészletet ki kell másolni, és a címkék közé kell helyezni
a HTML-dokumentumban. Példa:...
A második mód a betűtípus felvétele az @import direktíva használatával. A kész kód a 3. pont második fülén található a kiválasztott Google betűtípus oldalán. Hozzá kell adni a stíluslap legtetejéhez (ellenkező esetben a fájl nem importálódik). A kód valahogy így néz ki:
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cirill);
Az első módszer sajátossága, hogy minden oldal fejlécében hozzá kell adni egy hivatkozást a betűtípushoz, ahol használni kívánja. Ez könnyen megvalósítható kis oldalszámú webhelyeken, de problémás nagy erőforrások esetén. A második módszer kényelmes, mivel a kódot egy külső stíluslap elejére lehet helyezni, majd minden oldal, amelyhez ez a táblázat kapcsolódik, megkapja a szükséges betűtípust, amelyet az @import direktíva segítségével töltenek be.
4. lépés: Stílus
Az előző lépések elvégzése után megkezdheti a betűtípus alkalmazását. Láttad már, hogyan íródnak egy ilyen CSS-szabály:
P (betűcsalád: "Roboto", sans-serif; )
Ha az első lépésben több betűtípust választott (például hozzáadta a Bold 700 félkövér betűtípust), akkor a harmadik lépésben a kód kissé megváltozik:
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cirill);
A betűtípus félkövérré tételéhez írja be a CSS-stílust a következőképpen:
P (betűcsalád: "Roboto", sans-serif; betűsúly: 700; )
Jegyzet: A Google Fontsban csak 100-tól 900-ig terjedő szabványos mértékegységeket használnak a betűtípusok súlyának jelzésére. Például a normál (alapértelmezett) a 400-nak (normál), a normál félkövér pedig a 700-nak (félkövér) egyenértékű.
A Google Fonts szolgáltatás fő előnyei:
- könnyű kezelhetőség (még egy kezdő is képes foglalkozni a szolgáltatással, és az összes szükséges kód automatikusan generálódik - csak másolni kell);
- betűtípusok elérhetősége (nem kell fizetni értük);
- minden használt betűformátum rendelkezésre áll (ez azt jelenti, hogy minden böngésző pontosan azt a betűformátumot tudja betölteni, amellyel működik).
A szolgáltatás hiányosságai között szerepel a nem túl sok betűtípus, különösen a cirill betűtípusok. Egyébként vannak más hasonló szolgáltatások az interneten, például a TypeKit (fizetős).
Eredmények
Ma már több lehetőségünk is van arra, hogy eredeti és nem szabványos betűtípusokat kapcsoljunk a weboldalakhoz. Ezen módszerek mindegyikének megvannak a maga előnyei és hátrányai. Melyik opciót jobb használni, magának kell meghatároznia. Ez gyakran a helyzettől függ, és a különböző esetekben különböző megközelítések hasznosak lehetnek. Ezen a ponton már csak tudnia kell, hogyan kell használni a betűtípusokat a CSS-ben.
Az elrendezés szedésének megkezdésekor különösen meg kell adni a CSS-ben az oldalon használt betűtípusokat. A tervező gyakran különböző betűtípusokat használ az oldal fő szövegének beírásához, hanem különféle címsorok, logók és monogramok beírásához is:
A jó tervező, akárcsak a jó elrendezéstervező, tudja, hogy a böngésző csak azokat a betűtípusokat tudja használni, amelyek a felhasználó számítógépére vannak telepítve az oldal megjelenítéséhez. Vagyis a betűtípusok nagyjából két kategóriába sorolhatók:
- Betűtípusok, amelyek a felhasználók túlnyomó többsége számára probléma nélkül megjelennek.
- Betűtípusok, amelyekkel a felhasználók kellően nagy csoportja nem rendelkezik.
Ha egy tervező 2. kategóriájú betűtípusokat használt például logó vagy nagy statikus fejléc létrehozásához, akkor nyugodtan használja a . Ennek a technikának a hátránya a rugalmatlanság. A szöveg változása esetén újra kell készítenie a képet és módosítania kell a CSS-t (például ha az új kép mérete nem egyezik a régivel).
Azt mondhatjuk, hogy a technika használatának veszélye közvetlenül függ a szöveg megváltoztatásának valószínűségétől. Ezért például az oldal általános szövege nem készíthető nem szabványos betűtípusokkal! Egy jó tervező soha nem tenne ilyet. És ha egy tervező zöldre vált, a jó tördelőnek egyszerűen ki kell javítania a hibáját - az elrendezésben cserélje ki ezt a betűtípust a leginkább hasonló szabványos betűtípusra.
De hogyan lehet megkülönböztetni az első csoport betűtípusait a másodiktól? Nyilvánvaló, hogy nem támaszkodhat közvetlenül a számítógépére telepített betűkészletekre! Találjuk ki.
Szabványos betűtípusok
A szabványos betűtípusok az operációs rendszerrel telepített betűkészletek. Mivel az operációs rendszerek eltérőek, a betűkészletük is eltérő. A Windows különböző verzióihoz tartozó szabványos betűtípusok listája megtalálható például a Szabványos Windows-betűkészletek cikkben, a szabványos Mac OS betűtípusok listája pedig a Mac OS-hez szállított betűtípusok oldalon. Ami a Unix/Linux operációs rendszereket illeti, nincs egyetlen betűkészletük sem. Sok Linux-felhasználó használja a DejaVu betűkészletet, különösen az Ubuntuban, ezek alapértelmezés szerint telepítve vannak. A http://www.codestyle.org statisztikái szerint sok Unix/Linux felhasználó rendelkezik az URW, Free és egyéb betűkészletekkel is. Ugyanezen statisztikák szerint a Unix/Linux felhasználók több mint 60%-a rendelkezik a számítógépén a Core fonts for the Web betűkészletével, amely 2002-ig hivatalosan is ingyenesen letölthető volt a Microsoft weboldaláról.
Annak érdekében, hogy az oldal a tervező szándéka szerint jelenjen meg, bármely operációs rendszerben lehetőség van a CSS tulajdonságban több betűtípus beállítására, vesszővel elválasztva.
Ez a tulajdonság a betűtípuscsaládnevek és/vagy általános családnevek prioritási listáját adja meg. A CSS2 specifikáció szerint kétféle betűtípus családnév létezik:
- A választott betűtípuscsalád neve. Például "Times new Roman", "Arial" és mások. A szóközt tartalmazó betűcsaládneveket idézőjelbe kell tenni. Ha nincsenek idézőjelek, a rendszer figyelmen kívül hagyja a betűtípus neve előtti és utáni szóköz karaktereket, és a betűtípus nevében szereplő szóközök sorozata egyetlen szóközzé alakul.
- Általános (közös) család. A specifikáció a következő általános családokat határozza meg:
- serif - betűtípusok serifekkel a végén;
- sans-serif - sans-serif betűtípusok;
- kurzív – dőlt betűtípusok;
- fantasy — dekoratív betűtípusok;
- monospace - monospace betűtípus (ugyanolyan szélességű betűkkel).
Így egy szabványos betűtípust veszünk az OS Windows-ból a tervezéshez, egy hasonlót Mac OS-hez és Unix/Linuxhoz kiválasztunk, beállítunk egy közös betűtípust, és kész.
De nem minden ilyen egyszerű. Ássuk részletesebben.
Webbiztonságos betűtípusok keresésében
Az interneten történelmileg létezett olyan dolog, hogy "biztonságos" webes betűtípus. A biztonságos betűtípus minden operációs rendszerben szabványos betűtípus. Mivel ilyen állapotról csak álmodni lehet, hát Teljesen biztonságos betűtípusok nem léteznek!
Egyes betűtípusok bizonyos fenntartásokkal biztonságosnak nevezhetők.
A "biztonságos" betűtípusok meghatározásának alapja a legelterjedtebb Windows operációs rendszer betűtípusai volt, amelyeket más operációs rendszerekben is használnak. Példa erre a felhasználásra a már említett Core fontok a Web font csomaghoz, amelyet a statisztikák szerint sok Unix/Linux felhasználó töltött le.
Ez a csomag a következő betűtípusokat tartalmazza: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Mindegyik támogatja a cirill ábécét, ami fontos Runet számára.
A Mac OS X szabványos szállításában található betűtípuskészlet (ez az operációs rendszer a legelterjedtebb a Mac OS felhasználók körében) tartalmazza a Core fonts for the Web készlet összes betűtípusát.
Így a más operációs rendszerekben használt Windows-betűkészletek alapján a következő lista jött létre az úgynevezett "biztonságos" webes betűkészletekről:
- Arial
- Arial Black
- Comic Sans MS
- Futár Új
- Grúzia
- Hatás
- Times New Roman
- Trebuchet MS
- Verdana
A Webdings betűtípus ikonkészletet tartalmaz, ezért nem használható tartalomhoz. Az Andale Mono-t nem használják széles körben, mert nem alkalmas mindennapi képernyőolvasásra, és nem minden Windows-felhasználó rendelkezik vele.
Minden Windows-felhasználó, Mac OS X-felhasználó és a Unix/Linux-felhasználók túlnyomó többsége (vagyis azok, akik telepítették a Core fonts for the Web csomagot) rendelkeznek ezekkel a betűtípusokkal.
De mi van a többivel? Végül is azt szeretném, ha a tervező ötletét minél több felhasználó látná!
Erről a kiadvány második részében olvashat.