Pochopení typografie 10 Užitečné nástroje a zdroje

V mém posledním článku o porozumění typografii jsem psal o tom, co se děje do designu typografie a jak s ní manipulovat, aby se zlepšilo rozvržení vašich webových stránek a zlepšil se uživatelský komfort. V tomto článku jsem seznam 10 mých oblíbených nástrojů pro typografii na webu.

Ty mohou pomoci při vytváření HTML mřížek a oblastí obsahu, vytvářet styly CSS, generovat názvy písem a spoustu dalších skvělých věcí. Podívejte se na některé z odkazů níže a dejte nám vědět své myšlenky v oblasti po diskusi.

Doporučené čtení: Pochopení typografie: Psaní pro web

Matice písma

Tento online průvodce byl zaslán blogem 24ways design. Obsahuje maticovou tabulku všech standardních webových fontů, které standardně najdete u různých dodavatelů softwaru. Mezi oblíbené tituly patří programy Windows, Mac OS X, Microsoft Office a Adobe Creative Suite.

Kontrast barevného kontrastu

Barevný kontrast je často problém, když se pustíte mimo standardní černobílý model. Když najdete shodu, je to jako dokonalost designu. Špatná volba barevného komba však vypadá velmi špatně a negativně ovlivní celkový design. Tento malý webový nástroj vám může pomoci vybrat si sadu barev, aby odpovídaly každému stylu.

HTML-Ipsum

Potřebuješ nástroj Lorem Ipsum, který dokáže udělat víc než jen text? Tento online HTML generátor vytvoří kódové bloky pro nejběžnější prvky stránky. Některé příklady zahrnují neuspořádané seznamy, seznamy definic, webové formuláře, tabulky a mnoho dalších řešení.

Typechart

Typechart je jedním z mých oblíbených nástrojů jako CSS developer. Často se snažím přizpůsobit konkrétnímu písmu na mém systému webovému projektu, ale nemám čas prohodit celou sbírku. Tento úžasný nástroj vám umožní prosít populární výběr rodin fontů a dokonce stáhnout správný kód CSS!

PX-to-EM.com

Pokud nezměníte výchozí velikost textu prohlížeče, pravděpodobně budete mít problémy odpovídající ems s pixely. Tato aplikace v prohlížeči poskytuje jak konverzní tabulku, tak uživatelské rozhraní pro px em. Je to velmi jednoduchý nástroj, ale nabízí praktický průvodce s opravdu jednoduchou funkčností - a nemůžete porazit cenu zdarma.

CSS Typová sada

Nedoporučuji lepení s CSS Type Setem příliš dlouho, protože je to opravdu začátečnický nástroj. To vám umožní generovat CSS kód na základě konkrétních vlastností písma, které vyberete. Zatímco je to velmi užitečné, v průběhu času se stává berlí, o kterou se opírá. A nebudete schopni motivovat k tomu, abyste zvládli vlastnosti CSS sami. Pokud však potřebujete ušetřit čas na projektu, tento nástroj nelze přehlédnout.

převrácení typické

Zde je jeden opravdu unikátní příklad knihovny náhledů fontů. překlápění typické zahrnuje několik fontů, které jsou nativní pro váš operační systém. Automaticky prohledá váš adresář písem a vyzvedne nejvhodnější řešení na webu. Můžete je porovnat vedle sebe a snadno si vybrat mezi oblíbenými možnostmi. To je další velký spořič času si záložku a nemyslíte, že až do poslední minuty.

Typografické mřížky

O návrhu v mřížce v HTML a CSS se hodně mluví. Pravděpodobně chápete, jak funguje mřížka, a měření webových stránek v pixelech se neliší. Tento tutoriál mřížek CSS-Tricks je spíše jako řízená snaha představit základy typografie pro digitální éru. Je to mnohem pokročilejší téma v oblasti webového designu. Ale pokud máte nějakou trpělivost, doporučuji procházet detaily, abyste viděli, jak tyto vlastnosti mřížky mohou skutečně ovlivnit rozvržení stránky.

WhatTheFont!

Všichni jsme našli logo nebo obrázek s některými opravdu cool neidentifikovatelné písmo. WhatTheFont udělal kola na internetu za pár let a je to stále moje oblíbená. Zvolíte si obrázek, který chcete nahrát, a jejich skript bude analyzovat text v obrázku tak, aby odpovídal všem podobným typům písma. Aplikace vás dokonce propojí s externími produkty, kde si můžete zakoupit každé písmo na vaše pohodlí.

Kalkulačka Baseline / Line-Height Calculator

Konečně opravdu výkonný nástroj pro generování vlastností výšky a rytmu. Jednoduše zadejte hodnoty pro základní velikost písma a výšku čáry, nebo vypněte svůj vlastní kód CSS na stranu. Aplikace bude vytvářet náhledy v několika různých stylech, takže můžete získat představu o tom, jak by tyto vlastnosti vypadaly na vašich vlastních webových stránkách.