15 Nyttige webtyperverktøy, biblioteker og rammer
Å håndtere typografi på nettet har vært ekte quirky. Hver nettleser har sin egen algoritme for å gjengi fonter noe som kan føre til uventede uoverensstemmelser. Det er bare noen få CSS-egenskaper du kan bruke til å ha litt kontroll over skrifttyper, for eksempel font kerning, skriftutjevning, oppretting av DropCaps osv. Dessuten må vi håndtere mange layoutproblemer når det gjelder fonter.
Den gode nyheten er at det er ressurser du kan bruke til å ta over hjulet når det kommer til nettstedstypografi. Her er 15 webverktøy, biblioteker og rammer du kan bruke til den slutten.
Mer om Hongkiat:
- 9 WordPress-pluginprogrammer for å gjøre mer med dine skrifttyper
- 20 beste WordPress typografi plugins for å forbedre lesbarheten
- Bedre og skarpere UI-ikoner med webfonter
TypeRendering
I et nøtteskall, TypeRendering fungerer som Modernizr, bortsett fra at den bare identifiserer nettlesermotoren for skriftgjenoppretting. Dette biblioteket legger til egendefinerte klasser basert på funnene som kan brukes til å bruke bestemte stylingsregler for typegengivelse.
KerningJS
Kerning kan ikke tilpasses for bruk på nettet enda - font-kniping Støtte er fortsatt dårlig for øyeblikket - men en ny standard eiendom kommer vår vei. KerningJS er et Javascript-bibliotek som gir deg noen nye egenskaper for bedre kerningskontroll, for eksempel -brev-kern.
#heading -letter-core: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Husk at eksemplet ovenfor er ikke-standard og kun gjelder med KerningJS.
DropcapJS
Selv om å lage en dropcap er mulig med dagens CSS-standarder, er resultatet ikke perfekt ennå. Noen ganger er det rett og slett uønsket. DropcapJS, utviklet av Adobe Web Platform, har fått oppdraget med å tillate webdesigneren å bruke en perfekt dropcap lett.
LiningJS
LiningJS er et JavaScript-bibliotek som legger til linje klasse i hver linje i avsnittet ditt. Dette gjør at du kan stile linjen separat. Det simulerer ideen om :: n-te linje (), :: n'te siste-line () og :: siste Online pseudoklasser som ikke er tilstede i CSS ennå. Her er et eksempel på hvordan vi stiler den første linjen i et avsnitt med LiningJS:
p. line [first] font-weight: 600; tekst-transformer: store bokstaver;
I tillegg støtter LiningJS også kinesisk avsnittstrøm.
UnderlineJS
UnderlineJS er et JavaScript-bibliotek som gjør at teksten understreker bedre. Sjekk ut demoen for å se hva jeg mener, pass på å svinge over linjene. Sammenlign demoen med understrekksproduksjonen fra dagens CSS text-decoration standard og du vil sannsynligvis være en fan av underlineJS også.
FlowType
Dette pluginet vil dynamisk justere skriftstørrelsen basert på en bestemt wrapperbredde. FlowType hjelper deg å bruke et ideelt antall tegn per linje på en hvilken som helst skjermbredde. Biblioteket leveres med muligheter hvor man kan angi min / maks skjermbredde, min / maks skriftstørrelse og skriftforhold.
HatchShow
HatchShow utvider størrelsen på en skrift for å fylle hele bredden av beholderen. Pluggen virker ut av boksen med algoritmen; i et nøtteskall måler det beholderbredden og lengden på skrifttypen og legger til riktig skriftstørrelse.
GridLover
GridLover er et flott verktøy for å generere grunnleggende stiler for typografiarrangement (størrelse, linjehøyde og margin) med et enkelt glidebryter. Det genererer stilene i SCSS, LESS og Stylus, slik at du kan inkludere det med en gang i prosjektet uavhengig av hvilken CSS-preprosessor du bruker.
TypeScale
TypeScale er et elektronisk verktøy som vil hjelpe deg med å enkelt bestemme riktig skriftstørrelse for nettstedet ditt. Verktøyet gir en enkel intuitiv GUI for å sette inn skrifttypestørrelse, skala og skriftfamilie du vil bruke. Resultatene blir visualisert for deg, slik at du kan leke med skalaen for å få akkurat den riktige verdien. Bare ta tak i CSS når du er ferdig.
Modulær skala
Modulær skala er et verktøy for å generere ideell skriftskalering for kropps- og overskriftstekst. Den utgir i Sass som skal brukes sammen med sitt Sass-bibliotek. Alternativt kan du bruke JavaScript .
Font-To-Width
Font-To-Width (FTW) er et Javascript-bibliotek som gjør en skrifttype passform til sin breddebeholder. Det bestemmer skriftstørrelsen sammen med ordavstanden som kreves for skrifttypen. Skulle du ønsker å lage en pen overskrift, er dette biblioteket du kanskje vil prøve.
FFFFallback
FFFFallback, et praktisk verktøy som lar deg finne den beste skriftstakken som vil degradere grasiøst. Verktøyet kommer i form av et bokmerke, som vil analysere skriftfamilien på siden din og foreslå et sett med skrifter som skal brukes som tilbakebetaling.
Font Par
Google Font er et av de mest populære web skrifttypebibliotekene som brukes av millioner, og er vert for over 500 skriftfamilier. Font Par er en samling av parrede Google Fonts, hvor du kan finne en forskjellig kombinasjon mellom fontfamilier og skrive ansikter enkelt. FontPair gjør det enklere å velge fontparing.
TypeSettings
TypeSettings er en samling av CSS-regel satt til å definere riktig skriftskalering, vertikal rytme og responsivt forhold til typografi. TypeSettings kommer i Sass og Stylus som gir fleksibilitet for å møte prosjektbehovet ved å justere variablene.
skiltet
skiltet er sannsynligvis et av de mest komplette startpakken for å sette opp typografi. Typeskilt skip med en håndfull grunnleggende typografiske stiler som adresserer skalering, farger, liten kapital, dropcap, innrykk, bindestrek, blockquote, kode blokk og mye mer ting.
Nå Les: Showcase av webdesign med vakker typografi
