15 Nyttige webtypografiverktøy, biblioteker og rammer
Å håndtere typografi på nettet har vært ekte quirky. Hver nettleser har sin egen algoritme for å gjengi fonter 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 enden.
Mer om Hongkiat:
- 9 WordPress-pluginprogrammer for å gjøre mer med dine skrifttyper
- 20 beste WordPress typografi plugin for å forbedre lesbarheten
- Bedre og skarpere UI-ikoner med webfonter
TypeRendering
I et nøtteskall fungerer TypeRendering ligner Modernizr, bortsett fra at det bare identifiserer nettlesermotoren for skriftgjenoppretting. Dette biblioteket legger til tilpassede klasser basert på funnene som kan brukes til å bruke bestemte stylingsregler for typegengivelse.
KerningJSKerning kan ikke tilpasses for bruk på nettet ennå. font-kerning
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 -letter-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.
DropcapJSSelv om det er mulig å lage en dropcap, er det 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 enkelt.
LiningJSLiningJS er et JavaScript-bibliotek som legger linjeklassen i hver linje i avsnittet ditt. Dette gjør at du kan stile linjen separat. Det simulerer ideen om ::nth-line()
, ::nth-last-line()
og ::last-line
pseudo-klasser som ikke er tilstede i CSS fortsatt. 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.
UnderlineJSUnderlineJS 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 av gjeldende CSS text-decoration
, og du vil sannsynligvis også være en fan av underlineJS.
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.
HatchShowHatchShow 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.
GridLoverGridLover 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 uansett hvilken CSS-preprosessor du bruker.
TypeScaleTypeScale 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 skalaModular Scale 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-WidthFont-To-Width (FTW) er et Javascript-bibliotek som gjør en skrifttype passer til sin breddebeholder. Det vil bestemme skriftstørrelsen sammen med ordavstanden som kreves for skrifttypen. Skulle du ønske å lage en pen overskrift, er dette biblioteket du kanskje vil prøve.
FFFFallbackFFFFallback, et praktisk verktøy som lar deg finne den beste fontstakken 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-parGoogle Font er et av de mest populære web skrifttypebibliotekene som brukes av millioner, og er vert for over 500 skriftfamilier. Font Pair er en samling av parrede Google Fonts, hvor du kan finne en forskjellig kombinasjon mellom fontfamilier og skrive ansikter enkelt. Font Pair gjør det enklere å velge fontparing.
TypeSettingsTypeSettings 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.
skiltetTypeskilt er sannsynligvis et av de mest komplette startpakken for å sette opp typografi. Typeskilt leveres med en håndfull grunnleggende typografiske stiler som adresserer skalering, farger, liten kapital, dropcap, innrykk, bindestrek, blockquote, kodeblokk og mange flere ting.
Nå Les: Showcase av webdesign med vakker typografiHvordan lage en datatalist som er umiddelbart søkbar
Dropdown-lister er en fin måte å gi alternativer til et inputfelt, spesielt når listen over tilgjengelige alternativer er lang. En bruker kan velge det alternativet de ønsker ved å skrive inn i feltet, eller se gjennom alternativene som kan være en kamp for det de leter etter. Å være i stand til å søke gjennom alternativene er imidlertid den ideelle løsningen.Denne oppf
12 gratis ebøker for å lære deg blogging og innholds markedsføring
For de som er seriøse om blogging eller bare ikke ser ut til å få sine blogger til å ta av, er det noen førstehånds tips fra eksperterne selv, noen ganger alt du trenger. Vi hører deg, og siden det er mange slike bøker som ligger på nettet, har vi gjort legworket og samlet 12 slike eBøker som er gode samlinger av bloggeropplevelse, kunnskaper og tips som er resultatet av mange års forsøk og feil fra de som har vært der, gjort det.Her ser du g