Lehelet

Jó, rossz és nagyszerű példák a webes tipográfiára. Jó, rossz és nagyszerű példák a webes tipográfiára Gyönyörű tipográfia

Egy nagyszerű webhely gyönyörű tipográfiával kezdődik. És bár bizonyos szabályokat meg lehet szegni, néha helyes visszatérni a jó tipográfia alapelveihez és annak létrehozásához.

Ez az emlékeztető segít új pillantást vetni projektjeire, új megközelítéseken gondolkodni, vagy visszatérni egy egyszerűbb tervezéshez.

Tehát ma figyelmen kívül hagyjuk a divatirányzatokat, a tipográfiaelméletre összpontosítunk, és arra, hogy a „szabályok” hogyan segíthetnek gyönyörű szöveget létrehozni.

Méret és hierarchia

A méret számít. Az olvasható tipográfia létrehozásához ez lehet a döntő tényező. A kis szöveget nehéz látni, nem is beszélve olvasni, de a túl nagy túllépi a sor magasságát, és zavart okoz.

Az olvasható tipográfia több rétegű hierarchiával rendelkezik. Ezek a rétegek mondják el a felhasználónak, hogy mit olvasson először, másodikként és harmadszor. Ezenkívül nyilvánvaló hierarchia van a szövegméretekben – egy méret a címsoroknál, egy másik a törzsszövegnél, egy harmadik pedig az alcímeknél.

Követés és kerning

A követést és a levágást gyakran összekeverik. A bekeringés a betűk közötti távolság szelektív megváltoztatása azok alakjától függően. A követés a betűkészletek, azaz a bekezdések vagy egy teljes szövegblokk közötti távolság megváltoztatása.

A lekeringést gyakran bizonyos elemekre alkalmazzák az áttekinthetőség, az olvashatóság javítása és a nagy szövegrészek stilizálása érdekében. A követést gyakran a túl széles törzsszöveg szűkítésére használják.

Korlátozza az alkalmazott betűstílusok számát

A legtöbb projekthez két vagy három stílus is elegendő. Annak érdekében, hogy ne tévedjen a választás során, keressen egy olyan betűtípuscsaládot, amely számos elérhető arcvariációt tartalmaz. A legjobb minőségű betűtípusok sokféle stílusban kaphatók – félkövér, normál, dőlt, sűrített, fekete stb.

Keverjük össze a stílusokat

Azt javaslom, hogy válasszon két különböző stílust. A leggyakoribb pár a serif és a sans serif. Amikor különböző stílusokat és súlyokat párosít, keressen azonos magasságú és tál alakú betűket (a zárt betűk, például az „o” betűk közötti hely).

Ezek az apró részletek nagy változást hoznak a betűtípusok együttállásában és a szöveg olvashatóságában.

Átigazolások és indoklás

A legtöbb esetben sortörésre és indoklásra nincs szükség. Az online szövegek esetében ezek a technikák csak megnehezítik a gyors befogadást és megértést. Az elválasztás zavarja az olvasást, és a teljes indokolás gyakran olvashatatlan formázást eredményez.

Ne változtasson betűtípust

Soha ne változtassa meg a betűtípust. Ne próbálja vastagabbra, vékonyabbra vagy magasabbra tenni. Inkább válassz másikat.

A betűtípus-tervezők sok időt töltenek azzal, hogy a betűtípus olvasható legyen, és megfeleljen a stíluskövetelményeknek. Nem kell semmit megváltoztatnod. Nem tudod javítani, és a legtöbb esetben csak elrontasz mindent.

Ha a betűtípus nem felel meg Önnek, keressen mást. Használja az Identifont hasonló betűtípus eszközt , amely a hasonló betűtípusokat észleli.

Kontraszt

Használjon tipográfiát a kontraszt létrehozásához. Ugyanúgy, ahogy különböző méreteket használ a hierarchia létrehozásához, a betűtípus súlyának, színének és stílusának módosításával vizuális érdeklődést kelt.

A szín az egyik leghatékonyabb és legegyszerűbb módja a kontraszt létrehozásának. Az ideális kontraszt a sötét szöveg világos háttéren (vagy fordítva). Szinte korlátlan színválaszték áll rendelkezésére, amely segít elérni ezt a célt. Ha a színekkel és a tipográfiával játszik, ne feledje, hogy bizonyos színkombinációk, például az élénkpiros a világoskék színén, meglehetősen nehezen olvashatók.

Ha a kontrasztról van szó, a legjobb, ha egyszerű hátteret használunk az olvasható szöveg létrehozásához. De ha vizuális elemeket, például képeket vagy mintákat tartalmaz, növelje meg a betűk méretét – ez elválasztja a háttér és az előtér szövegelemeit.

Tárcsázósáv formátuma

A típussáv formátuma a szöveget tartalmazó tároló mérete. Ez lehet a teljes szövegkeret vagy egyetlen oszlop szélessége.

A karakterlánc formátuma számít, mert a képernyőn megjelenő karakterek száma (beleértve a szóközöket, speciális karaktereket és írásjeleket) befolyásolja az olvashatóságot. Ha a sorok túl hosszúak vagy túl rövidek, a felhasználó szeme nehezen tud eligazodni rajtuk.

A tipográfiai stílus elemeiből: "Bármilyen számú karakter (45 és 75 között) ésszerű sorhossznak számít egy egyoszlopos készlethez. A 66 karakterből álló karakterlánc (beleértve a betűket és a szóközöket) ideálisnak tekinthető. Egy több oszlopból álló készlethez egy 40-50 karakter hosszú karakterlánc lenne az ideális."

Annak ellenére, hogy a könyv megjelenésekor senki sem gondolt a mobil tipográfiára, a többoszlopos tipográfiára vonatkozó ajánlás továbbra is aktuális. Kis képernyős esetekben akár 35 karaktert is használhat soronként.

Carrie Cousins cikkének fordítása

Jeremy Schoaf, a Typewolf betűkészlet-forrás kurátora példákat választott érdekes betűtípus-megoldásokat kínáló webhelyekre, és ismertette azok előnyeit és hátrányait.

A vékony papírtextúrával kombinálva ez a tipográfia olyan érzést kelt, mintha egy könyvet olvasna.

Egyszerűen Gum

Köszönhetően a webes betűtípusoknak, amelyek segítik a termék csomagolásának tipográfiáját a gyártó weboldalának tipográfiájához igazítani. Ez egyre gyakrabban történik meg. A Simply Gum a Gotham-et választotta márkanevének, így az identitás egységes marad az online és offline csatornákon egyaránt.

Ez az oldal jó példa arra, hogy néha csak egy stílusra van szükséged. A Gotham változó súlyozásával és nagybetűs fejléceivel a Simply Gum egyértelmű hierarchiát hozott létre egyetlen súllyal.

A fejléc és lábléc logók PNG formátumúak, így elvesztik a webes betűtípusok olvashatóságát és méretezhetőségét. Webes betűtípus használata logóhoz nem mindig kivitelezhető, különösen akkor, ha megfelelő szabályozásra van szükség a levágás felett; az SVG-kép azonban ebben az esetben jobban működik, mint a PNG-kép, mert átméretezhető, és továbbra is megőrzi élességét.

Rövid következtetés

Szerencsére a fenti példák megmutatták, hogy bizonyos tipográfiai döntések hogyan befolyásolhatják a tervezést. Íme néhány kulcsfontosságú gondolat:

Ha több súlyt fog használni, akkor alakítson ki következetes rendszert az adott tipográfiában, és tartsa be azt.
Törzsszöveghez válasszon normál dőlt, félkövér és félkövér dőlt betűtípust.
Ha népszerű stílust szeretne, próbálja meg párosítani egy kevésbé elcsépelt stílussal, hogy a design kiemelkedjen.
Készítsen stílus-útmutatót a projekt legelején, hogy biztosítsa a betűtípusok következetes használatát a csapat tagjai között.
Használjon kontrasztos, ne hasonló stílusokat.
Ne használjon képernyő-betűtípusokat törzsszövegekhez. Használja a betűtípusokat rendeltetésszerűen.
Ne féljen csak egy stíluscsaládot használni. Hierarchiát hozhat létre ugyanazon család különböző súlyaival és stílusaival.
Ha logója megengedi, készítse el SVG-ben az olvashatóság és a méretezhetőség érdekében.

Ez a lista a II. negyedév eredményein alapul. 2008. A korábbi "diagramok" megtalálhatók és.

Minden példához egy rövid megjegyzés tartozik, és a képernyőképre kattintva az eredeti oldalra jut.

Vetőmag Konferencia

Nincs vaku, nincs kép, nincs extra zaj; csak egy jó stílusú betűtípus és jól megírt szöveg: igazi bizonyíték arra, hogy egyetlen betűtípussal is nagyszerű eredményeket érhet el. Szeretnék még több ilyen példát látni.

A Hírek tervezése

Nagy kontraszt a fejléc és a fő tartalom között, sok tiszta hely és jó szervezés.

OmniTI

Szép logó, tiszta szöveg és nagyon szép színséma. A dizájnfejlesztésről bővebben olvashat.

Tervező.it

Gyönyörű díszes logó (tudja valaki, hogy ez milyen betűtípus?) és sok finom részlet.

tervezési nézet

Andy Rutledge olyan tervező, aki ugyanazokat az elveket alkalmazza a gyakorlatban, amelyeket ő hirdet. Tetszik, ahogy a cikk megjelenési dátumától függően változtatja a méret méretét úgy, hogy a legfrissebb szöveg feleljen meg a legnagyobb méretnek.

WordPress.org és WP 2.5.x Admin

Bár a WordPress blogplatform nem webhelyalapú, webhelyük naponta több ezer, ha nem millió képernyőn jelenik meg. Szeretném, ha a lehető legtöbb online és offline alkalmazás ugyanolyan jól nézne ki.

A mi típusunk

Ezt az oldalt nagyon nem akartam belefoglalni az ismertetőbe, mert flasht használ. Azonban van rajta néhány nagyszerű betűtípus (és néhány kedvencem, hozzá kell tennem).

A fedélzet

Egy másik webhely, amely csak a betűtípusokra épül. Kiváló példa a hierarchiára és a jelölésekre. Ki mondta, hogy "egy kép többet mond ezer szónál"? Nem, a betűtípus jobban beszél.