15 Užitečné webové typografické nástroje, knihovny a rámce
Zacházení s typografií na webu bylo opravdu nepředvídatelné. Každý prohlížeč má svůj vlastní algoritmus pro vykreslování písem k neočekávaným nesrovnalostem. Existuje jen několik vlastností CSS, které můžete použít pro kontrolu nad fonty, jako je například vyrovnání fontů, vyhlazování fontů, vytváření DropCaps apod. Kromě toho se musíme zabývat mnoha problémy s rozvržením, pokud jde o fonty.
Dobrou zprávou je, že existují zdroje, které můžete použít k převzetí kola, pokud jde o webové stránky typografie. Tady jsou 15 webových nástrojů, knihoven a frameworků můžete použít k tomuto účelu.
Více o Hongkiatu:
- 9 WordPress Pluginy dělat více s vašimi fonty
- 20 Nejlepší WordPress Typografie Pluginy pro zvýšení čitelnosti
- Lepší A Ostřejší UI Ikony S Web Písma
Vykreslování typu
Ve zkratce, Vykreslování typu funguje podobně jako Modernizr, až na to, že identifikuje pouze prohlížeč pro vykreslování fontů. Tato knihovna přidává vlastní třídy založené na jejích objevech, které mohou být použity pro použití specifických pravidel pro styling rendering.
KerningJS
Kerning ještě není možné přizpůsobit pro použití na webu - font-kerning podpora je v tuto chvíli stále špatná - ale náš standardní styl se blíží naší cestě. KerningJS je knihovna Javascript, která vám například poskytuje několik nových vlastností pro lepší ovládání kerningu -dopis-kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Mějte na paměti, že výše uvedený příklad je nestandardní a platí pouze pro KerningJS.
DropcapJS
Ačkoliv je vytvoření dropcapu proveditelné se současnými standardy CSS, výsledek ještě není dokonalý. Někdy je to naprosto nežádoucí. DropcapJS, vyvinutý společností Adobe Web Platform, je pověřen posláním umožnit webovému designérovi snadno aplikovat perfektní dropcap..
LiningJS
LiningJS je knihovna JavaScriptu, která přidává řádek třídy v každém řádku odstavce. To vám umožní vytvořit řádek samostatně. Simuluje myšlenku :: n-line (), :: n-last-line () a :: poslední řádek pseudo-třídy, které v CSS stále nejsou. Zde je příklad, jak stylujeme první řádek odstavce s LiningJS:
p .line [první] font-weight: 600; text-transform: velká písmena;
Kromě toho LiningJS také podporuje tok čínských odstavců.
UnderlineJS
UnderlineJS je knihovna JavaScriptu, díky níž je text podtržen lépe. Podívejte se na demo, abyste viděli, co tím myslím. Porovnejte demo s podtrženým výstupem aktuálního CSS text-dekorace standard a vy byste pravděpodobně byli fanoušci underlineJS taky.
FlowType
Tento plugin dynamicky upraví velikost písma na základě specifické šířky obalu. FlowType vám pomůže použít ideální počet znaků na řádek v libovolné šířce obrazovky. Knihovna přichází s možnostmi, kdy lze nastavit min / max šířku obrazovky, velikost písma min / max a poměr písma.
HatchShow
HatchShow rozšiřuje velikost písma tak, aby vyplnila celou šířku jeho kontejneru. Zásuvný modul pracuje mimo krabici s algoritmem; ve zkratce měří šířku kontejneru a délku znaku písma a připojuje správnou velikost písma.
GridLover
GridLover je skvělý nástroj pro generování základních stylů pro uspořádání typografie (velikost, výška čáry a okraj) pomocí uživatelského rozhraní pro snadné posuvníky. Generuje styly v SCSS, LESS a Stylus, takže je můžete přímo zahrnout do projektu bez ohledu na to, který CSS-Preprocessor používáte.
TypScale
TypScale je online nástroj, který vám pomůže snadno určit správnou velikost písma pro vaše webové stránky. Nástroj poskytuje jednoduché intuitivní GUI pro vložení základní velikosti písma, měřítka a rodiny fontů, které chcete použít. Výsledky budou zobrazeny pro vás, abyste mohli hrát s vámi, abyste dostali správnou hodnotu. Stačí chytit CSS, jakmile budete hotovi.
Modulární stupnice
Modulární stupnice je nástroj pro generování ideálního měřítka písma pro text těla a nadpisu. Výstupem je Sass, který by měl být používán ve spojení s jeho knihovnou Sass. Alternativně můžete použít JavaScript .
Šířka písma na šířku
Šířka písma na šířku (FTW) je knihovna Javascript, která umožňuje přizpůsobit písmo jeho šířce kontejneru. Určí velikost písma spolu s mezerami pro písmo. Pokud chcete vytvořit pěkný titulek, je to knihovna, kterou můžete zkusit.
FFFFallback
FFFFallback, šikovný nástroj, který vám umožní najít nejlepší zásobník písem, který bude ladně ladit. Nástroj je dodáván ve formě bookmarkletu, který bude analyzovat rodinu fontů na vaší stránce a navrhne sadu písem, které budou použity jako záložní.
Dvojice písma
Google Font je jednou z nejoblíbenějších knihoven webových fontů, kterou používají miliony, a hostuje nad 500 rodinami fontů. Dvojice písma je kolekce spárovaných písem Google, kde můžete snadno najít různé kombinace mezi rodinami písem a typem tváří. Font Pair umožňuje výběr párování fontů o něco méně ohromující.
TypNastavení
TypNastavení je kolekce sady pravidel CSS, která definuje správné měřítko písma, vertikální rytmus a citlivý poměr typografie. TypeSettings přichází v Sass a Stylus, který umožňuje flexibilitu pro splnění vašich potřeb projektu úpravou proměnných.
Typový štítek
Typový štítek je pravděpodobně jedním z nejkomplexnějších startovacích balíčků pro nastavení typografie. Typeplate lodě s hrstkou základních typografických stylů, které adresují škálování, barvy, malý kapitál, dropcap, odsazení, dělení slov, blockquote, kódový blok a mnohem více věcí.
Nyní si přečtěte: Prezentace webových stránek s krásnou typografií
