15 Užitočné webové typografické nástroje, knižnice a rámce

Práca s typografiou na webe bola skutočná nálada. Každý prehliadač má vlastný algoritmus na vykresľovanie písma čo by mohlo viesť k neočakávaným nezrovnalostiam. Existuje len niekoľko vlastností CSS, ktoré môžete použiť na kontrolu nad určitými písmenami, ako je kerning fontov, vyhladzovanie fontov, vytváranie DropCaps atď. Okrem toho sa musíme zaoberať mnohými problémami s rozložením, pokiaľ ide o písma.

Dobrou správou je, že existujú zdroje, ktoré môžete použiť na prevzatie kolesa, pokiaľ ide o typografiu webových stránok. Tu sú 15 webových nástrojov, knižníc a rámcov môžete použiť na tento účel.

Viac informácií o Hongkiatu:

9 Pluginy WordPress urobiť viac s vašimi písmenami
20 najlepší WordPress typografické doplnky na zvýšenie čitateľnosti
Lepšie a ostrejšie používateľské ikony s webovými písmenami

TypeRendering

Stručne, TypeRendering funguje podobne ako Modernizr, okrem toho, že identifikuje iba prehliadačový engine pre vykresľovanie písma. Táto knižnica pridáva vlastné triedy založené na jej objavoch, ktoré môžu byť použité na uplatnenie špecifických pravidiel štýlu pre vykresľovanie typu.

KerningJS

Kerning ešte nie je prispôsobiteľný na použitie na webe - font-vyrovnanie párov podpora je v súčasnosti chudobná - no nová štandardná nehnuteľnosť prichádza na našu cestu. KerningJS je knižnica pre Javascript, ktorá vám dáva niekoľko nových vlastností pre lepšie ovládanie kerningu -letter-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Majte na pamäti, že vyššie uvedený príklad je neštandardný a platí len pre KerningJS.

DropcapJS

Napriek tomu, že vytvorenie kvapky je možné pomocou súčasných štandardov CSS, výsledok ešte nie je dokonalý. Niekedy je to úplne nežiaduce. Spoločnosť DropcapJS, vyvinutá spoločnosťou Adobe Web Platform, je poverená misiou umožňujúcej web dizajnérovi jednoducho aplikovať perfektnú klapku.

LiningJS

LiningJS je knižnica JavaScript, ktorá pridáva riadok triedy v každom riadku vášho odseku. To vám umožňuje štýlovú líniu oddelene. Simuluje myšlienku :: n-té riadku (), :: nth-last-linka () a :: posledný riadok pseudotriedy, ktoré ešte nie sú v CSS. Tu je príklad toho, ako štýl prvého riadku odseku s LiningJS:

 p. [prvý] (veľkosť písma: 600; textová transformácia: veľké;

LiningJS navyše podporuje tok čínskych paragrafov.

UnderlineJS

UnderlineJS je knižnica JavaScript, ktorá zvyšuje text. Pozrite sa na demo, aby ste videli, čo mám na mysli. Uistite sa, že ste umiestnili kurzor nad riadky. Porovnajte demo s podčiarknutým výstupom aktuálneho CSS text-decoration a ste pravdepodobne aj fanúšikom podčiarknutia.

FlowType

Tento doplnok dynamicky upraví veľkosť písma na základe špecifickej šírky obalu. FlowType pomôže vám použiť ideálny počet znakov na riadok na ľubovoľnej šírke obrazovky. Knižnica je vybavená možnosťami, pomocou ktorých môžete nastaviť šírku obrazovky min / max, min / max veľkosť písma a pomer písma.

HatchShow

HatchShow rozširuje veľkosť písma tak, aby vyplnila celú šírku jeho kontajnera. Doplnok funguje mimo krabice s algoritmom; v skratke, meria šírku kontajnera a dĺžku písma a pripojí správnu veľkosť písma.

GridLover

GridLover je skvelý nástroj na vytváranie základných štýlov pre typografické usporiadanie (veľkosť, výška čiary a okraj) s ľahkým posuvným používateľským rozhraním. Vytvára štýly v SCSS, LESS a Stylus, takže ich môžete priamo zahrnúť do projektu bez ohľadu na to, aký CSS-Preprocessor používate.

TypeScale

TypeScale je on-line nástroj, ktorý vám pomôže ľahko určiť správnu veľkosť písma pre vaše webové stránky. Nástroj poskytuje jednoduché intuitívne grafické rozhranie na vloženie základnej veľkosti písma, mierky a rodiny písiem, ktoré chcete použiť. Výsledky budú vizualizované pre vás, aby ste mohli hrať okolo se stupnicou, aby ste dosiahli správnu hodnotu. Vezmite CSS po dokončení.

Modulárna mierka

Modulárna mierka je nástroj na vytváranie ideálneho škálovania písma pre text a nadpis. Vystupuje v systéme Sass, ktorý by mal byť použitý v spojení s jeho knižnicou Sass. Alternatívne môžete použiť JavaScript .

Font-To-Šírka

Šírka písma (FTW) je knižnica pre Javascript, ktorá prispôsobí písmo svojmu kontajneru s šírkou. Určuje veľkosť písma spolu so vzdialenosťou slov potrebnou pre písmo. Ak chcete urobiť pekný nadpis, ide o knižnicu, ktorú by ste chceli vyskúšať.

FFFFallback

FFFFallback, šikovný nástroj, ktorý vám umožní nájsť najlepšie zásobník fontov, ktorý sa bude elegantne degradovať. Nástroj prichádza vo forme záložiek, ktoré budú analyzovať rodinu písiem na vašej stránke a navrhnúť súbor písiem na použitie ako záložný.

Páry písma

Písmo Google je jednou z najpopulárnejších knižníc písma webových stránok, ktoré používajú milióny ľudí, a obsahuje viac ako 500 rodov písiem. Páry písma je zbierka spárovaných písiem Google, kde môžete ľahko nájsť rôzne kombinácie rodín fontov a typov tvárí. Font Pair umožňuje voľbu párovania fontov trochu menej ohromujúcich.

TypeSettings

TypeSettings je kolekcia pravidiel CSS, ktorá definuje správnu mierku písma, vertikálny rytmus a citlivý pomer typografie. TypeSettings je dodávaný s nástrojmi Sass a Stylus, ktorý umožňuje flexibilitu pri uspokojovaní potrieb vášho projektu úpravou premenných.

Stíteksoznacenímtypu

Stíteksoznacenímtypu je pravdepodobne jedným z najkompletnejších štartovacích kitov pre nastavenie typografie. Typový štítok sa dodáva s niekoľkými základnými typografickými štýlmi, ktoré sa týkajú škálovania, farieb, malého kapitálu, kvapiek, odsadenia, rozdelenia, blokov, blokov a mnohých ďalších vecí.

Prečítajte si: Ukážka webových návrhov s krásnou typografiou