Pochopenie typografie 10 Užitočné nástroje a zdroje

V poslednom článku o chápaní typografie som napísal o tom, čo ide do dizajnu typografie a ako ju manipulovať s cieľom zlepšiť rozloženie vašej webovej stránky a zlepšiť používateľskú skúsenosť. V tomto článku som zoznam 10 z mojich obľúbených nástrojov pre typografiu na webe.

Tie môžu pomôcť s vytváraním mriežok HTML a obsahových oblastí, vytváraním štýlov CSS, generovaním názvov písiem a množstvom iných skvelých vecí. Pozrite si niektoré z nižšie uvedených odkazov a uistite sa, že nám dajte vedieť svoje myšlienky v diskusnej oblasti.

Odporúčané čítanie: Pochopenie typografie: písanie pre web

Matrica písma

Tento on-line sprievodca bol zaslaný blogom pre návrh webových stránok. Obsahuje maticovú tabuľku všetkých štandardných webových písiem, ktoré štandardne nájdete od rôznych dodávateľov softvéru. Populárne tituly zahŕňajú programy Windows, Mac OS X, Microsoft Office a Adobe Creative Suite.

Kontrola farieb kontrastu

Farebný kontrast je často problém, keď sa ocitnete mimo štandardného čiernobieleho modelu. Keď nájdete zápas, cíti sa to ako dizajnová dokonalosť. Napriek tomu zlá kombinácia výberu farieb vyzerá veľmi zle a negatívne ovplyvní celkový dizajn. Tento malý webový nástroj vám môže pomôcť vybrať sadu farieb, ktoré sa navzájom prispôsobia pre akékoľvek štýlové rozloženie.

HTML-Ipsum

Potrebujete nástroj Lorem Ipsum, ktorý dokáže viac než len výstupný text? Tento online generátor HTML vytvorí bloky kódov pre najbežnejšie prvky stránky. Niektoré príklady zahŕňajú neoznačené zoznamy, zoznamy definícií, webové formuláre, tabuľky a množstvo ďalších riešení.

Typechart

Typechart je jeden z mojich obľúbených nástrojov ako vývojár CSS. Často sa snažím prispôsobiť konkrétne písmo v mojom systéme webovému projektu, ale nemám čas na to, aby som prešiel celou mojou kolekciou. Tento úžasný nástroj vám umožní prekonať populárne voľby rodín písiem a dokonca si stiahnuť správny kód CSS!

PX-to-EM.com

Ak nedôjde k obnoveniu predvolenej veľkosti textu prehliadača, pravdepodobne budete mať problémy, ktoré sa zhodujú s ems s pixelmi. Táto aplikácia v prehliadači poskytuje konverznú tabuľku aj používateľské rozhranie pre pixely. Je to veľmi jednoduchý nástroj pre istotu, ale ponúka praktický sprievodca s naozaj jednoduchou funkčnosťou - a nemôžete poraziť voľnú cenu.

CSS Type Set

Neodporúčam sa s CSS typom nastaviť príliš dlho, pretože je to naozaj začiatočník. Umožňuje generovať kód CSS založený na konkrétnych vlastnostiach písma, ktoré vyberiete. Zatiaľ čo je na začiatku veľmi užitočná, stáva sa to v priebehu času berbami, na ktorých sa môžete oprieť. A nebudete mať možnosť motivovať vlastné ovládanie vlastností CSS. Ale ak potrebujete ušetriť čas na projekte, tento nástroj nemožno prehliadnuť.

otáčanie typické

Tu je jeden jedinečný príklad knižnice ukážky písma. flipping typický obsahuje niekoľko písiem, ktoré sú pôvodné pre váš operačný systém. Automaticky skenuje váš adresár písiem a vyzdvihuje najbezpečnejšie riešenia. Môžete ich porovnávať vedľa seba a jednoducho si vybrať medzi svojimi obľúbenými možnosťami. Toto je ďalší skvelý čas, ktorý si ušetríte a neuvažujete o tom až do poslednej minúty.

Typografická mriežka

Existuje veľa diskusií o návrhu okolo siete v HTML a CSS. Pravdepodobne chápete koncept fungovania mriežok a meranie webových stránok v pixeloch sa nelíši. Tento kurzový sprievodca CSS-Triky je skôr ako vedená snaha predstaviť základy typografie pre digitálnu éru. Je to oveľa pokročilejšie téma v oblasti web dizajnu. Ak však máte nejakú trpezlivosť, odporúčam prechádzať podrobnosti, aby ste zistili, ako tieto vlastností mriežky môžu skutočne ovplyvniť rozloženie vašej stránky.

WhatTheFont ™!

Všetci sme našli logo alebo obrázok s nejakým skutočne cool neidentifikovateľným písmom. Čo TheFont robil niekoľko rokov na internete a je to stále moje obľúbené. Vyberiete obrázok, ktorý sa má nahrať a jeho skript bude analyzovať text v obraze tak, aby zodpovedal akýmkoľvek podobným písmom. Aplikácia vás dokonca spojí s externými produktmi, kde si môžete kúpiť každé písmo podľa vlastného uváženia.

Počiatočná / lineárna výška kalkulačka

Nakoniec je to naozaj výkonný nástroj na generovanie vlastností výšky a rytmu línie. Jednoducho zadajte hodnoty základnej veľkosti písma a výšky čiary alebo zvoľte vlastný CSS kód na stranu. Aplikácia generuje ukážky v niekoľkých rôznych štýloch, aby ste mohli získať predstavu o tom, ako tieto vlastnosti vyzerajú na vašich vlastných webových stránkach.