15 Online Typografi Verktyg Alla Designers Should Know

Typografi är grunden för vilken design som helst, eftersom läsning är en av de mest grundläggande sakerna vi gör på webben. Den typografi du väljer påverkar flera aspekter av en webbplats, inklusive läsbarhet, humör och den övergripande användarupplevelsen. Det är viktigt för designers och utvecklare att känna till de grundläggande principerna för typografi till skapa läsbara tilltalande mönster.

Vi har pratat om fontparringsverktyg innan och idag ska vi dela med dig skrivverktyg som kan ge dig en bättre läsupplevelse på de webbplatser du bygger och / eller designar.

Här är plugins, onlineverktyg och skript som hjälper dig att skapa fantastiska rubriker och ren läsbar text.

typplatta

Det kommer inte att göra designalternativ för dig, men kommer att definiera rätt markering med styling för vanliga typografiska mallar. Det kan också ge dig tips om hur du stilar textkopiering ordentligt.

Checka ut: Demo | Dokumentation

Gutenberg

Gutenberg är ett flexibelt och lättanvänt typografi startpaket för utvecklare och designers. Det hjälper dig att ställa in basstorlek, linjehöjd och max bredd. Gutenberg är ett open source-projekt, så gärna bidra med, anpassa och modifiera det.

Checka ut: Demo | Dokumentation

Lettering.js

Lettering.js är ett jQuery-plugin som ger dig kontroll över kerningstypen. Det låter dig enkelt få redaktionell design och hantera kod. Webbplatsen har fantastiska exempel på typografi som gjorts med denna plugin för inspiration.

Checka ut: Demo | Dokumentation

Typebase.css

Typebase.css är ett anpassningsbart typografi stilark. Den innehåller både saas och mindre versioner och kan enkelt ändras till moderna webbprojekt.

Checka ut: Demo | Dokumentation

FitText

FitText är en plugin som gör din webbplats fontstorlekar flexibla. Det hjälper dig att uppnå skalbara rubriker för olika skärmupplösningar. Med andra ord, gör din typografi responsiv. Den är gjord för att endast visa stor text.

Checka ut: Demo | Dokumentation

Kerning.js

Kerning.js hjälper dig att automatiskt omvandla, skala och ändra din typografi med CSS. Det är lätt att komma igång med Kerning.js.

Checka ut: Demo | Dokumentation

Typesettings.css

Typesettings.css är din lekplats för att skapa minimalistiska webbprojekt eller bloggar. Alla typografiformat som används här är inspirerade av grunderna för grafisk design.

Checka ut: Demo | Dokumentation

Ryggsäck

Med Rucksack kan du producera fantastisk vätsketypografi tack vare en ny, lyhörd egenskap på teckenstorleken. Att skapa responsiv typografi görs extremt enkelt.

Checka ut: Demo | Dokumentation

FlowType.JS

Den läsbara typografin innehåller mellan 45 och 75 tecken per rad, men för att hitta det balansen är en utmanande uppgift för utvecklare. FlowType.JS ändrar teckensnittsstorleken och därefter linjens höjd baserat på ett visst elements bredd.

Checka ut: Demo | Dokumentation

Blast.js

Blast.js hjälper dig att skilja texter för att göra det enklare att manipulera typografi. Den innehåller 4 inbyggda avgränsare: tecken, ord, mening och element. Det kan också matcha egna uttryck och fraser.

Checka ut: Demo | Dokumentation

slabText

slabText är ett enkelt skript som delar rubriker i rader för att fylla i det tillgängliga horisontella utrymmet. Skriptet beräknar ett idealiskt antal tecken som ska ställas in i varje rad genom att dividera tillgänglig bredd med bildstorlekstorlek.

Checka ut: Demo | Dokumentation

Typ skala

Med typskala kan du förhandsgranska och välja rätt typskala för ditt projekt. Det finns inga regler - bara spela runt med teckenstorlek, skala och olika webbfonter.

Checka ut: Demo | Dokumentation

Typographic

Typographic hjälper dig att göra typografi responsivt. Allt du behöver göra är att bara välja några teckensnitt, ställa in några inställningar och du får snygg responsiv typografi.

Checka ut: Demo | Dokumentation

Typi

Typi är en saas-mix som du kan använda för att enkelt göra responsiv typografi. Den skapar teckensnittstorlek och rader för HTML och andra element. Typi har också en vertikal rytmfunktion för att beräkna linjens höjder.

Checka ut: Dokumentation

Lining.js

Med plugin Lining.js får du fullständig kontroll över webtypografi. Den stöds på populäraste webbläsare som Safari, Google Chrome, Opera och Mozilla Firefox.

Checka ut: Demo | Dokumentation

Bonus: 2 Fler verktyg!

Typ av webbtyp

Typ av webbtyp är en webbplats som erbjuder aktuell information om stöd för typ och funktioner på webben. Du kan använda sökning eller kategorier, till exempel kerning, kapitalavstånd, CSS-typsnitt och mer för att hitta exakt vad du behöver.

Typograph

Typografi är en fantastisk webb- och sketch-plugin som låter dig sätta icke-brutna mellanslag efter ord i en bokstav, anslut numret och enheten. Det tar också bort dubbla utrymmen, går in, prickar och andra typsnitt, så att du kan uppnå ren, vacker typografi som är lätt att läsa.

Checka ut: Dokumentation