A legjobb webes betűtípusok. A legjobb ingyenes betűtípusok a tervezők számára

  • 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:

  1. 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.
  2. De ne válasszon túl hasonlót - összeolvadnak, és a befejezetlenség érzését keltik.
  3. 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.
  4. 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.
  5. 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:

  1. Betűtípusok, amelyek a felhasználók túlnyomó többsége számára probléma nélkül megjelennek.
  2. 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:

  1. 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.
  2. Á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).
    Az általános családnevek kulcsszavak, és nem kell őket idézőjelbe tenni.

Í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.