Zdá se, že mezi webovými designéry existují dva tábory: ti, kteří přijmou webovou typografii , experimentují s ní a vyzkouší nové věci prakticky ve všech svých návrzích; a ti, kteří se jim vyvarují jako epidemie, se rozhodli použít standardní, bezpečné webové fonty s malou variací.

Zdá se také, že hodně designérů, kteří spadají do druhé skupiny, si přejí, aby byli spíš jako první.

Prostředky uvedené níže vám mohou pomoci zlepšit vaši webovou typografii, bez ohledu na to, do kterého táboru patříte.

K dispozici jsou nástroje pro vytváření jedinečné typografie, referencí a článků, které vás mohou naučit typografické principy a spoustu inspirace a novinek, které vám umožňují průběžně aktualizovat stav webových typografií.

Nástroje typografie

Tytester
Typetester umožňuje porovnávat až tři písma, vedle sebe, s libovolným vzorkovým textem, který chcete. Můžete zadat základní velikost písma, písmo, velikost, vodítko, sledování, zarovnání, rozteč slov, dekorace, barvu a barvu pozadí, abyste získali velmi přesný obrázek o tom, jak budou vaše fonty vypadat na skutečném webu. Pak, když máte vše, co vypadá tak, jak to chcete, můžete CSS chytit.


HTML Ipsum
HTML-Ipsum je generátor lorem ipsum určený speciálně pro webový design. Namísto toho, že vám dáváme trochu textu, HTML-Ipsum vám může poskytnout předem formátovaný text jako odstavce, objednané seznamy, prázdné tabulky, formuláře a navigační seznamy. Předformátovaný text, jako je tento, je skvělý způsob, jak ušetřit čas při vytváření návrhů webových stránek a počátečních návrhů.


Typechart
Typechart umožňuje procházet předem formátovaná písma bezpečná pro web a zobrazovat je tak, jak se budou objevovat jak na PC se systémem Windows, tak i na počítači Mac. Můžete rozdělit fonty na základě velikosti, písma a důrazu.


WP-typografie
WP-Typography je plugin WordPress, který pomáhá zpříjemnit vaši standardní WP typografii. Podporuje dělení slov, rozmístění, inteligentní výměnu znaků (včetně uvozovek, pomlček, elips a matematických symbolů) a CSS háčky pro styling specifických věcí (včetně ampersandů, akronymů a čísel).


Typ sady CSS
CSS Type Set umožňuje stylovat blok textu a zkopírovat CSS. Je to jednoduchý generátor CSS, který je skvělý pro stylování jednoho písma najednou. Umožňuje vám řídit písmo, velikost, rozteč, vodítko, dekoraci a barvu.


Otočení typické
Flipping Typical zobrazuje ukázkový text v různých fontech, které jste nainstalovali v počítači. Je to skvělý způsob, jak porovnat spoustu písem, vedle sebe, najednou. Jediná výstraha: pouze některá z zobrazených písem jsou bezpečná pro web.


Typografická mřížka
Zavedený vertikální rytmus je jednou z věcí, která odliší skvělou typografii od dobré typografie. Typografická mřížka vám pomůže prokázat, že pro vás je vertikální rytmus. Zahrnuje také vertikální mřížku jako vodítko pro umístění jak typografie, tak i dalších prvků.


Co je TheFont
WhatTheFont poskytuje snadný způsob, jak zjistit, jaké písmo je. Stačí nahrát obrázek (nebo zadat adresu URL) a WhatTheFont určí, jaké písmo se používá. To je skvělý způsob, jak najít fonty, které byly použity v obrázcích nebo v souborech Flash.


CSS s vertikálním rytmem
Jak již bylo řečeno, konzistentní vertikální rytmus vytváří velkou typografii kromě toho, co je pouze "dobré". Tento nástroj vám může pomoci vytvořit CSS pro typografii, která má konzistentní vertikální rytmus. Stačí zadat rodinu fontů, velikost písma, výšku základní čáry a velikost písma a vypočítat tak, aby získal CSS pro konzistentní vertikální rytmus.


Výchozí kalkulačka rytmu
Další skvělá kalkulačka pro vertikální rytmus. Tentokrále vám však ukáže, jaká odlišná velikost písma vypadá vedle sebe při nastavení s nastaveným vertikálním rytmem. Je to skvělý způsob, jak zajistit, aby všechny velikosti písma, které používáte, vypadaly dobře.


Font Burner
Font Burner umožňuje vkládat fonty na vaše webové stránky pomocí sIFR pomocí grafického rozhraní. V současné době existuje více než 1000 písem dostupných prostřednictvím aplikace Font Burner a je k dispozici také plugin WordPress. Vše, co musíte udělat, je najít písmo, které chcete použít, zkopírovat kód pro vložení a poté jej vložit do kódu vašeho webu.


Generátor slepých textů
Tento zdobený generátor textů umožňuje vytvářet nejen lorem ipsum, ale i řadu dalších fiktivních textových typů. Současně můžete formátovat tento text přímo v generátoru (klikněte na Rozšířené možnosti) a potom zkopírujte CSS.


Výchozí hodnota
Základem je mřížka a typografický rámec, který obsahuje soubory pro obnovení výchozích nastavení prohlížeče a vytvoření základního typografického rozvržení. Je to dobrá volba pro návrháře, kteří chtějí použít rozvržení mřížky a také chtějí nějakou pomoc při navrhování typografie webu. Typografické nastavení obsahuje titulky, seznamy, odstavce, blokové bloky a tabulky, stejně jako nějaký jiný značkovací kód.


Matrice písma
Matrice písma zobrazuje písma obsažená v operačních systémech Mac a Windows, Microsoft Office a Adobe Creative Suite, vše v mřížce, která usnadňuje zjistit, která písma se nejspíše nacházejí na typech typů počítačů. Například pokud váš web vyhovuje většinou návrhářům, můžete první písmo ve vašem fontstacku něco, co přichází s aplikací Adobe Creative Suite, zatímco pokud je webový server určen pro firemní uživatele, může být první písmo obsaženo v aplikaci Microsoft Office.


Typograf
Typograf umožňuje experimentovat s různými stupnicemi a dalšími prvky vertikálního rytmu. Zahrnuje řadu tradičních měřítek (včetně Le Corbusier a Fibonacci) a další možnosti rozvržení.

Webové fonty

Typový typ
Typekit nabízí písma od různých prodejců a sléváren typu, včetně Ligy pohyblivého typu, FontFont a Veer (můžete zobrazit celý seznam písem, aniž byste se museli přihlásit k účtu). Nabízejí také pokročilé možnosti ovládání stylování písem, nekonečnou škálovatelnost a kolofon, který svým návštěvníkům informuje o tom, jaké písma vaše stránky používají. Cena za typový typ je přiměřená, od bezplatné pro částečný přístup až po 100 USD za rok pro místa s vysokým provozem.


Kernest
Služba Kernest je služba webových písem, která používá fonty OFL, GPL, GUST a Creative Commons, stejně jako fonty s komerčními licencemi. Mnoho z jejich písem je zdarma k použití (služba sama o sobě je zdarma), zatímco jiní mají poplatky za předplatné od několika dolarů.


Fonty Live z Ascendera
Ascender nabízí svou vlastní službu písem, písma Fonts Live. Mají více než 110 typů písma k dispozici, s fonty od Monotype, Microsoft, Bigelow & Holmes a další, stejně jako jejich vlastní písma.


API písma Google
Google nabízí omezený výběr webových písem open source. Zatímco výběr není velký, je zdarma a je podporován společností Google, což znamená, že pravděpodobně nebudete mít problém s kapacitou nebo časem zpoždění.


TypeFront
TypeFont přistupuje k webovým písmům trochu jinak. Spíše než nabízet knihovnu webových písem, umožní vám nahrát vlastní fonty, které obsahují licenci pro web. Je to skvělá volba, pokud písma, která chcete použít, nejsou v současné době nabízena žádnou jinou službou webových písem. Existuje bezplatný plán pro stránky s nízkým provozem, stejně jako placené plány.


Typové písmo Web Fonts
Typotéka nabízí svou vlastní službu fontů pro fonty, aby zpřístupnila fonty pro implementace @ font-face. Výhodou je, že existují pouze jednorázové licenční náklady, které mohou pokrývat tiskové i webové aplikace. Nevýhodou je, že výběr je omezen pouze na jejich fonty.

Typografie Zdroje a články

Prvky typografického stylu aplikované na web
Jedná se o velmi důkladnou referenční příručku pro každého, kdo se chce dozvědět nejen základy dobré webové typografie, ale i pokročilejší techniky a principy. Je rozdělen na kapitoly a podkapitoly, včetně horizontálního a vertikálního pohybu, bloků a odstavců, stránkování, velikosti a mnohem více. Je to nedokončené dílo, takže očekávejte v budoucnu další informace.


Pěkný typ webu
Nice Web Type má spoustu informací o implementaci webové typografie. Mají "poznámky" o všem, od začátku s webovou typografií až po použití CSS @ font-face. Rovněž pravidelně diskutují o trendech a nových nápadech a stránky věnované věcem, které považují za nejlepší z nich.


12 Příklady typografie odstavců
Tato sbírka vzorových odstavcových formátů od Jon Tan poskytuje skvělý výchozí bod pro každého, kdo navrhne textově těžké stránky. Mnoho návrhářů přehlíží všechny možnosti, které přicházejí s stylingem odstavců, a rozhodnou se pro tradiční, konzervativní možnosti. Tento článek dokazuje, že není těžké vystoupit z krabice a dělat něco zajímavého s odstavci ve vašich návrzích.


Typografický kontrast a tok
Jedná se o skvělý průvodce od společnosti WebDesignerWall o principech toku a kontrastu v typografii webu. Rozděluje tyto principy do několika částí, včetně velikosti, typu / klasifikace, barvy a hmotnosti.


Revidovaný font stack
Tento článek popisuje rozšíření společných webových bezpečných zásobníků písma CSS pomocí průzkumu jiných běžně instalovaných písem. Také zkoumá hromady fontů některých populárních webových stránek spolu s doporučeními, jak by mohly zlepšit své zásobníky.


Na webové typografii
Tento článek od Jason Santa Maria na A List Apart je velmi komplexní pohled na párování písma ve vašich webových stránkách. Je to téma, o němž se velmi často diskutuje, ale má zásadní význam pro tvorbu skvělých typografických návrhů na webu.


Přemýšlejte o typu
"Thinking with Type" je společník pro knihu téhož titulu Ellen Lupton. Nabízí spoustu základních informací o typografii. Zatímco spousta z nich je zaměřena na typografickou typografii, spousta informací může být použita pro webovou typografii.


10 skvělých tipů pro zlepšení webové typografie
Seznam deseti jednoduchých věcí, které můžete udělat pro zlepšení typografie ve vašich webových stránkách. Obsahuje informace o písmu, velikosti, měřítku a hierarchii, vedení a další informace.

Typografie Inspirace, trendy a novinky

Typofil
Typofil je fórum pro nadšence a typografy. Chcete-li zjistit, co se děje ve světě typografie, Typofil je skvělé místo, kde se můžete podívat. Je také dobrým místem pomoci s jakýmikoliv typografickými problémy, které byste mohli mít.


Miluji Typografii
ILT je blog věnovaný výhradně typografii. Diskutuje o designu a obchodních tématech z odborného hlediska. Jejich archiv je obrovský, takže je spousta informací o aktuálních a minulých zprávách a trendech, které vás zaneprázdňují.


milujeme typografii
WLT je galerie typografie, nápisy, značení a jiného typu. Uživatelé mohou odesílat obrázky typu, který mají rádi, a je skvělým místem pro typografickou inspiraci pro váš další projekt.


Typografie pro titulky
Elements of Design má skvělou galerii s více než 120 příklady typografických titulků. Spouští gamut od jednoduchých až po složité, v různých písmenech a stylech. Je to vynikající místo, kam jít, pokud hledáte trochu inspirace. Mají také galerii vytisknout citace s 20 + příklady.


Typografická
Typographica nabízí recenze typu, komentáře a typografické recenze knih. Jejich typové recenze jsou obzvláště informativní, pokud se chcete dozvědět, co dělá dobrý typ písma.


Za scénami vynikající webové typografie
Toto je vlastně první z pětidílných sérií. Tento příspěvek se zaměřuje na typografii za A List Apart, která rozkládá písma a styly používané v různých částech webu. Následující příspěvky se zaměřují na: Jesús Rodríguez Velasco , Jon Tan , Designr.it , a Kodex Transportica .


Typesites
Typesites je blog, který pravidelně předvádí skvělé návrhy webových typografií. Místa, na kterých se vyznačují, jsou různorodé, ale všechny obsahují inspirační použití typu.

Kompilováno výhradně pro Webdesigner Depot by Cameron Chapman