15 Handige Web Typography Tools, Bibliotheken en Frameworks

Omgaan met typografie op het web is echt eigenzinnig. Elke browser heeft zijn eigen algoritme om lettertypen weer te geven wat tot onverwachte verschillen zou kunnen leiden. Er zijn slechts een paar CSS-eigenschappen die u kunt gebruiken om enige controle te hebben over lettertypen, zoals font kerning, font smoothing, bij het maken van DropCaps enz. Bovendien hebben we te maken met veel lay-outproblemen als het gaat om lettertypen.

Het goede nieuws is dat er bronnen zijn die u kunt gebruiken om het web over te nemen als het gaat om de website-typografie. Hier zijn 15 webtools, bibliotheken en frameworks u kunt daarvoor gebruiken.

Meer over Hongkiat:

9 WordPress-plug-ins om meer te doen met uw lettertypen
20 Beste WordPress-typografie-plug-ins om de leesbaarheid te verbeteren
Betere en duidelijkere UI-pictogrammen met weblettertypen

TypeRendering

In een notendop, TypeRendering werkt vergelijkbaar met Modernizr, behalve dat het alleen de browser-engine identificeert voor het renderen van lettertypen. Deze bibliotheek voegt aangepaste klassen toe op basis van zijn ontdekkingen die kunnen worden gebruikt om specifieke stijlregels toe te passen voor het renderen van het type.

KerningJS

Kerning kan nog niet worden aangepast voor gebruik op het web - font-spatiëring de ondersteuning is op dit moment nog steeds slecht, maar er komt een nieuwe standaardwoning op ons af. KerningJS is een Javascript-bibliotheek die u een paar nieuwe eigenschappen geeft voor een betere kerningbesturing, bijvoorbeeld -letter-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Houd er rekening mee dat het bovenstaande voorbeeld niet-standaard is en alleen van toepassing is met KerningJS.

DropcapJS

Hoewel het maken van een dropcap goed te doen is met de huidige CSS-standaarden, is de uitkomst nog niet perfect. Soms is het ronduit onwenselijk. DropcapJS, ontwikkeld door Adobe Web Platform, is belast met de missie om webontwerpers toe te staan om eenvoudig een perfecte dropcap toe te passen.

LiningJS

LiningJS is een JavaScript-bibliotheek die de lijn klasse in elke regel van uw alinea. Hiermee kunt u de lijn afzonderlijk stylen. Het simuleert het idee van :: n-lijn (), :: n-last-lijn () en ::laatste lijn pseudo-klassen die nog niet aanwezig is in CSS. Hier is een voorbeeld hoe we de eerste regel van een alinea met LiningJS stylen:

 p. line [eerste] font-weight: 600; text-transform: hoofdletters;

Daarnaast ondersteunt LiningJS ook Chinese paragraafstroom.

UnderlineJS

UnderlineJS is een JavaScript-bibliotheek die de tekst beter onderstreept. Bekijk de demo om te zien wat ik bedoel, zorg dat je over de regels blijft hangen. Vergelijk de demo met de onderstreepte uitvoer van de huidige CSS text-decoration standaard en je zou waarschijnlijk ook een fan zijn van underlineJS.

FlowType

Deze plug-in zal de lettertypegrootte dynamisch aanpassen op basis van een specifieke wrapper-breedte. FlowType helpt u bij elke schermbreedte een ideaal aantal tekens per regel toe te passen. De bibliotheek wordt geleverd met opties waarmee u min./max. Schermbreedte, min./max. Lettergrootte en lettertype-verhouding kunt instellen.

HatchShow

HatchShow breidt de grootte van een lettertype uit om de hele breedte van de container te vullen. De plug-in werkt met de algoritme uit de doos; in een notendop, meet het de container breedte en lengte van het lettertype en voegt de juiste grootte van het lettertype.

GridLover

GridLover is een geweldig hulpmiddel om basisstijlen voor typografie (grootte, lijnhoogte en marge) te genereren met een eenvoudige gebruikersinterface. Het genereert de stijlen in SCSS, LESS en Stylus, zodat u het meteen in uw project kunt opnemen, ongeacht welke CSS-Preprocessor u gebruikt.

TypeScale

TypeScale is een online tool waarmee u eenvoudig de juiste lettergrootte voor uw website kunt bepalen. De tool biedt een eenvoudige intuïtieve GUI voor het invoegen van basislettertype, schaal en lettertypefamilie die u wilt gebruiken. De resultaten worden voor u gevisualiseerd, zodat u met de weegschaal kunt spelen, om precies de juiste waarde te krijgen. Pak gewoon de CSS als je klaar bent.

Modulaire schaal

Modulaire schaal is een hulpmiddel voor het genereren van ideale lettertypeschalen voor tekst van het hoofd en de kop. Het wordt uitgevoerd in Sass, dat moet worden gebruikt in combinatie met zijn Sass-bibliotheek. Als alternatief kunt u JavaScript gebruiken .

Font-breedte

Font-to-Width (FTW) is een Javascript-bibliotheek die ervoor zorgt dat een lettertype in de breedtecontainer past. Het bepaalt de lettergrootte samen met de vereiste woordafstand voor het lettertype. Als je een mooie kop wilt maken, is dit de bibliotheek die je misschien wilt proberen.

FFFFallback

FFFFallback, een handige tool waarmee je de beste lettertypestapel kunt vinden die gracieus verslechterd. De tool wordt geleverd in de vorm van een bookmarklet, die de lettertypefamilie op uw pagina analyseert en een reeks lettertypen aanbeveelt om als fallback te gebruiken.

Lettertype koppelen

Google Font is een van de populairste weblettertypebibliotheek die door miljoenen wordt gebruikt en host boven 500 lettertypefamilies. Lettertype koppelen is een verzameling gekoppelde Google-lettertypen, waar u gemakkelijk een verschillende combinatie kunt vinden tussen lettertypefamilies en lettertypen. Lettertype koppelen maakt het kiezen van lettertypekoppelingen iets minder overweldigend.

TypeSettings

TypeSettings is een verzameling CSS-regelset om de juiste lettertype-schaling, het verticale ritme en de responsieve ratio van typografie te definiëren. TypeSettings wordt geleverd in Sass en Stylus, wat flexibiliteit biedt om aan uw projectbehoeften te voldoen door de variabelen aan te passen.

typeplaatje

typeplaatje is waarschijnlijk een van de meest complete starterkit voor het opzetten van typografie. Typeplaatje wordt geleverd met een handvol standaard typografische stijlen die betrekking hebben op schaling, kleuren, klein kapitaal, dropcap, inspringen, woordafbreking, blockquote, codeblok en nog veel meer dingen.

Nu lezen: Showcase van webontwerpen met mooie typografie