15 online typografiehulpmiddelen die alle ontwerpers moeten weten
Typografie vormt de basis van elk ontwerp, omdat lezen een van de meest basale dingen is die we op internet doen. De typografie die u kiest, heeft invloed op meerdere aspecten van een website, inclusief leesbaarheid, gemoedstoestand en de algehele gebruikerservaring. Het is essentieel voor ontwerpers en ontwikkelaars om ken de basisprincipes van typografie naar maak leesbare aangename ontwerpen.
We hebben het eerder gehad over hulpprogramma's voor het koppelen van lettertypen en vandaag zullen we hulpmiddelen met u delen waarmee u een betere leeservaring kunt bereiken in de websites die u bouwt en / of ontwerpt.
Hier zijn de plug-ins, online tools en scripts die u zullen helpen geweldige headlines maken en leesbare tekst opschonen.
typeplaatje
Het zal geen ontwerpkeuzes voor u maken, maar de juiste opmaak definiëren met het stylen voor algemene typografische sjablonen. Het kan u ook tips geven over het opmaken van tekst op de juiste manier.
Uitchecken: Demo | Documentatie
Gutenberg
Gutenberg is een flexibele en gebruiksvriendelijke startset voor typografie voor ontwikkelaars en ontwerpers. Hiermee kunt u de basistype-grootte, regelhoogte en maximale breedte instellen. Gutenberg is een open-sourceproject, dus voel je vrij om bij te dragen, aan te passen en aan te passen.
Uitchecken: Demo | Documentatie
Lettering.js
Lettering.js is een jQuery-plug-in die je controle geeft over tekenspatiëring. Hiermee kunt u gemakkelijk redactionele ontwerpen maken en code beheren. De website biedt verbluffende voorbeelden van typografie gemaakt met deze plug-in voor inspiratie.
Uitchecken: Demo | Documentatie
Typebase.css
Typebase.css is een aanpasbare typografie-stylesheet. Het bevat zowel saas- als minder-versies en kan gemakkelijk worden aangepast in moderne webprojecten.
Uitchecken: Demo | Documentatie
FitText
FitText is een plug-in die uw lettertypegroottes van uw website flexibel maakt. Het zal u helpen schaalbare koppen te bereiken voor verschillende schermresoluties; met andere woorden, maak uw typografie responsief. Het is gemaakt voor het weergeven van alleen grote tekst.
Uitchecken: Demo | Documentatie
Kerning.js
Met Kerning.js kunt u uw typografie automatisch transformeren, schalen en wijzigen met CSS. Het is gemakkelijk om aan de slag te gaan met Kerning.js.
Uitchecken: Demo | Documentatie
Typesettings.css
Typesettings.css is uw speelterrein voor het maken van minimalistische webprojecten of blogs. Alle typografiestijlen die hier worden gebruikt, zijn geïnspireerd op de basisprincipes van grafische ontwerpen.
Uitchecken: Demo | Documentatie
Rugzak
Met Rucksack kunt u verbazingwekkende vloeistoftypografie produceren dankzij een nieuwe, responsieve eigenschap op de lettergrootte. Het creëren van responsieve typografie wordt uitzonderlijk eenvoudig gemaakt.
Uitchecken: Demo | Documentatie
FlowType.JS
De meest leesbare typografie bevat tussen de 45 en 75 tekens per regel, maar om te vinden dat evenwicht is een uitdagende taak voor ontwikkelaars. FlowType.JS verandert de tekengrootte en vervolgens de lijnhoogte op basis van de breedte van een specifiek element.
Uitchecken: Demo | Documentatie
Blast.js
Blast.js helpt je bij het scheiden van teksten om het eenvoudiger te maken om de typografie te manipuleren. Het bevat 4 ingebouwde scheidingstekens: teken, woord, zin en element. Het kan ook aangepaste uitdrukkingen en zinsdelen matchen.
Uitchecken: Demo | Documentatie
slabText
slabText is een eenvoudig script dat de koppen in rijen verdeelt om de beschikbare horizontale ruimte perfect in te vullen. Het script berekent het ideale aantal tekens dat in elke rij moet worden ingesteld door de beschikbare lettertypegrootte van de breedte per pixel te delen.
Uitchecken: Demo | Documentatie
Type Schaal
Met Type Scale kunt u een voorbeeld bekijken en de juiste type schaal kiezen voor uw project. Er zijn geen regels - speel gewoon met lettergrootte, schaal en verschillende weblettertypen.
Uitchecken: Demo | Documentatie
Typografisch
Typografisch helpt u om typografie responsief te maken. Het enige dat u hoeft te doen, is gewoon een paar lettertypen selecteren, een paar instellingen instellen en u krijgt een mooie responsieve typografie.
Uitchecken: Demo | Documentatie
Typi
Typi is een saas-mix die u kunt gebruiken om gemakkelijk responsieve typografie te maken. Het maakt lettergrootte en lijnhoogten voor HTML en andere elementen. Typi heeft ook een verticale ritmefunctie om lijnhoogten te berekenen.
Uitchecken: Documentatie
Lining.js
Met de Lining.js-invoegtoepassing krijgt u volledige controle over webtypografie. Het wordt ondersteund in de meeste populaire browsers zoals Safari, Google Chrome, Opera en Mozilla Firefox.
Uitchecken: Demo | Documentatie
Bonus: 2 Meer tools!
Staat van het Web Type
Staat van het webtype is een website die up-to-date gegevens biedt over de ondersteuning voor typen en functies op internet. U kunt zoeken of categorieën gebruiken, zoals tekenspatiëring, hoofdruimte, laden van CSS-lettertypen en meer om precies datgene te vinden dat u zoekt.
typograph
Typograph is een geweldige web- en schetsplugin waarmee je niet-brekende spaties kunt plaatsen na woorden van één letter, sluit het nummer en de eenheid aan. Het verwijdert ook dubbele spaties, ingangen, stippen en andere typefouten, zodat u schone, mooie typografie kunt bereiken die gemakkelijk te lezen is.
Uitchecken: Documentatie
