15 Online-typografiværktøjer Alle designere skal vide
Typografi er grundlaget for ethvert design, fordi læsning er en af de mest grundlæggende ting, vi gør på nettet. Typografien du vælger har indflydelse på flere aspekter af et websted, herunder læsbarhed, humør og den overordnede brugeroplevelse. Det er vigtigt for designere og udviklere at kend de grundlæggende principper for typografi til skabe læsbare behagelige designs.
Vi har talt om skrifttypeparingsværktøjer før, og i dag kommer vi til at dele med dig, skrive værktøjer, der kan give dig en bedre læseoplevelse på de websites, du opbygger og / eller design.
Her er plugins, online værktøjer og scripts, som vil hjælpe dig med skabe awesome overskrifter og ren læsbar tekst.
typeskiltet
Det vil ikke lave design valg for dig, men vil definere den rigtige markering med styling til almindelige typografiske skabeloner. Det kan også give dig tips om, hvordan du stiler tekstkopi korrekt.
Tjek ud: Demo | Dokumentation
Gutenberg
Gutenberg er en fleksibel og nem at bruge typografi starter kit til udviklere og designere. Det hjælper dig med at indstille basestørrelsen, linjens højde og maksimal bredde. Gutenberg er et open source projekt, så vær så velkommen til at bidrage, tilpasse og modificere det.
Tjek ud: Demo | Dokumentation
Lettering.js
Lettering.js er et jQuery-plugin, som giver dig kontrol over kerningstypen. Det giver dig mulighed for nemt at få redaktionelt design og håndtere kode. Webstedet indeholder fantastiske eksempler på typografi lavet med dette plugin til inspiration.
Tjek ud: Demo | Dokumentation
Typebase.css
Typebase.css er et brugerdefineret typografi stilark. Den indeholder både saas og mindre versioner og kan nemt ændres til moderne webprojekter.
Tjek ud: Demo | Dokumentation
FitText
FitText er et plugin, som vil gøre din hjemmeside skriftstørrelser fleksible. Det vil hjælpe dig med at opnå skalerbare overskrifter til forskellige skærmopløsninger; med andre ord, gør din typografi lydhør. Den er lavet til kun at vise stor tekst.
Tjek ud: Demo | Dokumentation
Kerning.js
Kerning.js hjælper dig med automatisk at omdanne, skala og ændre din typografi med CSS. Det er nemt at komme i gang med Kerning.js.
Tjek ud: Demo | Dokumentation
Typesettings.css
Typesettings.css er din legeplads for at skabe minimalistiske webprojekter eller blogs. Alle typografi stilarter, der bruges her, er inspireret af grafisk design.
Tjek ud: Demo | Dokumentation
Rygsæk
Med Rucksack kan du producere fantastisk væsketypografi takket være en ny, følsom egenskab på skriftstørrelsen. Oprettelse af lydhør typografi gøres usædvanligt let.
Tjek ud: Demo | Dokumentation
FlowType.JS
Den mest læsbare typografi indeholder mellem 45 og 75 tegn pr. Linje, men for at finde den balance er en udfordrende opgave for udviklere. FlowType.JS ændrer skriftstørrelsen og efterfølgende linjens højde baseret på et bestemt elements bredde.
Tjek ud: Demo | Dokumentation
Blast.js
Blast.js hjælper dig med at adskille tekster for at gøre det lettere at manipulere typografi. Den indeholder 4 indbyggede afgrænsere: tegn, ord, sætning og element. Det kan også matche tilpassede udtryk og sætninger.
Tjek ud: Demo | Dokumentation
slabText
slabText er et simpelt script, der opdeler overskrifter i rækker for at udfylde det tilgængelige vandrette rum. Skriptet beregner et ideelt antal tegn, der skal indstilles i hver række ved at dividere tilgængelig bredde med billedformatstørrelse.
Tjek ud: Demo | Dokumentation
Type Skala
Med Type Scale kan du forhåndsvise og vælge den rigtige type skala for dit projekt. Der er ingen regler - bare spil med skrifttype, skala og forskellige web skrifttyper.
Tjek ud: Demo | Dokumentation
typografiske
Typografisk hjælper dig med at gøre typografi lydhør. Alt du behøver at gøre er blot at vælge et par skrifttyper, indstille et par indstillinger, og du får en god responsiv typografi.
Tjek ud: Demo | Dokumentation
Typi
Typi er en saas-blanding, du kan bruge til at gøre responsiv typografi med lethed. Det skaber skriftstørrelse og linjestørrelser for HTML og andre elementer. Typi har også en lodret rytmefunktion til at beregne liniehøjder.
Tjek ud: Dokumentation
Lining.js
Med Lining.js-plugin'et får du fuldstændig kontrol over webtypografi. Den understøttes på de fleste populære browsere som Safari, Google Chrome, Opera og Mozilla Firefox.
Tjek ud: Demo | Dokumentation
Bonus: 2 Flere værktøjer!
Webstype
Status på web-typen er et websted, der tilbyder opdaterede data om understøttelsen af type og funktioner på internettet. Du kan bruge søgning eller kategorier, såsom kerning, kapitalafstand, CSS-fontindlæsning og mere for at finde præcis, hvad du har brug for.
typograph
Typografi er et fantastisk web- og skitse-plugin, som giver dig mulighed for at sætte ikke-brudte mellemrum efter ord med en bogstav, tilslut nummeret og enheden. Det fjerner også dobbeltrum, indgår, prikker og andre typografier, så du kan opnå ren, smuk typografi, der er let at læse.
Tjek ud: Dokumentation
