15 Nyttige webtypografiværktøjer, biblioteker og rammer
At beskæftige sig med typografi på nettet har været rigtig quirky. Hver browser har sin egen algoritme til at gøre skrifttyper hvilket kan føre til uventede uoverensstemmelser. Der er kun få CSS-egenskaber, som du kan bruge til at få kontrol over skrifttyper, f.eks. Skrifttypeskæring, skrifttypeudjævning, oprettelse af DropCaps osv. Derudover skal vi håndtere mange layoutproblemer, når det kommer til skrifttyper.
Den gode nyhed er, at der er ressourcer, som du kan bruge til at overtage hjulet, når det kommer til websteds typografi. Her er 15 webværktøjer, biblioteker og rammer du kan bruge til den ende.
Mere om Hongkiat:
- 9 WordPress-plugins til at gøre mere med dine skrifttyper
- 20 bedste WordPress typografi plugins til forbedring af læsbarhed
- Bedre og skarpere UI-ikoner med webfonte
TypeRendering
I en nøddeskal, TypeRendering fungerer ligner Modernizr, bortset fra at den kun identificerer browserens motor til skrifttypegengivelse. Dette bibliotek tilføjer brugerdefinerede klasser baseret på dets opdagelser, som kan bruges til at anvende specifikke stylingsregler for typegengivelse.
KerningJS
Kerning kan ikke tilpasses til brug på internettet endnu - font-knibning støtte er stadig fattig i øjeblikket - men en ny standard ejendom kommer vores vej. KerningJS er et Javascript-bibliotek, der giver dig et par nye egenskaber til bedre kerning kontrol, for eksempel -brev-kern.
#heading -letter-kernen: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Husk, at ovenstående eksempel er ikke-standard og kun gælder med KerningJS.
DropcapJS
Selvom det er muligt at lave en dropcap, er det muligt at lave nuværende CSS-standarder, er resultatet ikke perfekt endnu. Nogle gange er det ligefrem uønsket. DropcapJS, udviklet af Adobe Web Platform, har til opgave at tillade webdesigneren at anvende et perfekt dropcap nemt.
LiningJS
LiningJS er et JavaScript-bibliotek, der tilføjer linje klasse i hver linje i dit afsnit. Dette giver dig mulighed for at style linjen separat. Det simulerer ideen om :: n'te-line (), :: n'te-sidste-line () og :: sidste linje pseudoklasser, som endnu ikke er til stede i CSS. Her er et eksempel på, hvordan vi stiler den første linje i et afsnit med LiningJS:
p. line [first] font-weight: 600; tekst-transformer: store bogstaver;
Derudover understøtter LiningJS også kinesisk afsnit flow.
UnderlineJS
UnderlineJS er et JavaScript-bibliotek, der gør teksten understreget bedre. Tjek demoen for at se, hvad jeg mener, vær sikker på at svæve over linjerne. Sammenlign demoen med understreget output fra nuværende CSS tekst-dekoration standard og du vil nok også være fan af underlineJS også.
FlowType
Dette plugin tilpasser skriftstørrelsen dynamisk på basis af en specifik wrapperbredde. FlowType hjælper dig med at anvende et ideelt antal tegn pr. linje på en hvilken som helst skærmbredde. Biblioteket leveres med muligheder, hvor man kan indstille min / max skærmbredde, min / max skriftstørrelse og skriftforhold.
HatchShow
HatchShow udvider størrelsen af en skrifttype til at fylde hele bredden af dens beholder. Pluginet virker ud af boksen med algoritmen; i en nøddeskal måler den beholderbredden og længden af skrifttypens tegn og tilføjer skrifttypens korrekte størrelse.
GridLover
GridLover er et godt værktøj til at generere grundlæggende stilarter til typografi arrangement (størrelse, linje højde og margin) med en nem glider UI. Det genererer stilarterne i SCSS, LESS og Stylus, så du kan medtage det med det samme i dit projekt, uanset hvilken CSS-præprocessor du bruger.
TypeScale
TypeScale er et online værktøj, der hjælper dig med nemt at bestemme den rigtige skrifttypestørrelse til dit websted. Værktøjet giver et simpelt intuitivt GUI for at indsætte base skrifttypestørrelse, skala og skrifttypefamilie, du vil bruge. Resultaterne bliver visualiseret for dig, så du kan leve med skalaen for at få den rigtige værdi. Bare tag fat i CSS, når du er færdig.
Modulær skala
Modulær skala er et værktøj til at generere ideel skriftscaling for krop og overskriftstekst. Det output i Sass, som skal bruges sammen med sit Sass bibliotek. Alternativt kan du bruge JavaScript .
Font-To-Bredde
Font-To-Width (FTW) er et Javascript-bibliotek, der gør en skrifttype passer til dens breddebeholder. Det bestemmer skriftstørrelsen sammen med ordafstanden, der kræves til skrifttypen. Skulle du gerne lave en smuk overskrift, er det biblioteket du måske vil prøve.
FFFFallback
FFFFallback, et praktisk værktøj, der giver dig mulighed for at finde den bedste skrifttypestabel, der vil nedbryde yndefuldt. Værktøjet kommer i form af en bogmærke, som analyserer skrifttypefamilien på din side og foreslår et sæt skrifttyper, der skal bruges som tilbagefald.
Font Par
Google Font er et af de mest populære web skrifttypebibliotek, der bruges af millioner, og er vært over 500 skrifttypefamilier. Font Par er en samling af parrede Google Fonts, hvor du kan finde en forskellig kombination mellem skrifttype familier og skrive ansigter nemt. FontPair gør det meget lettere at vælge skrifttype parring.
TypeSettings
TypeSettings er en samling af CSS-regel indstillet til at definere ordentlig skriftskalering, lodret rytme og responsivt forhold mellem typografi. TypeSettings kommer i Sass og Stylus, som giver mulighed for fleksibilitet til at opfylde dine projektbehov ved at justere variablerne.
typeskiltet
typeskiltet er nok et af de mest komplette startpakker til opsætning af typografi. Typeskilt skib med en håndfuld grundlæggende typografiske stilarter, der adresserer skalering, farver, lille kapital, dropcap, indrykning, bindestreg, blockquote, kodeblok og mange flere ting.
Læs nu: Fremvisning af webdesign med smuk typografi
