Förstå typografi 10 Användbara verktyg och resurser

I min senaste artikel om Förståelse Typografi skrev jag om vad som går till utformningen av typografi och hur man manipulerar den för att förbättra din webbplatss layout och förbättra användarupplevelsen. I denna artikel listar jag 10 av mina favoritverktyg för typografi på webben.

Dessa kan hjälpa till med att bygga HTML-galler och innehållsområden, skapa CSS-format, generera typsnitt och en massa andra coola saker. Kolla in några av länkarna nedan och var noga med att meddela dina tankar i postdiskussionsområdet.

Rekommenderad läsning: Förstå Typografi: Skriva på nätet

Fontmatrix

Den här online-guiden var upplagd av 24ways designbloggen. Den har en matris tabell över alla standard webbfonter du hittar som standard från olika mjukvaruförsäljare. Populära titlar inkluderar Windows, Mac OS X, Microsoft Office och Adobe Creative Suite-program.

Färgkontrastkontroll

Färgkontrast är ofta ett problem när du vågar utanför den vanliga svartvita modellen. När du hittar en match känns det som design perfektion. Men ett dåligt färgkombination val ser väldigt dåligt ut och kommer att påverka den övergripande designen negativt. Detta lilla webbverktyg kan hjälpa dig att välja ut en uppsättning färger för att matcha varandra för varje stillayout.

HTML-Ipsum

Behöver du ett Lorem Ipsum-verktyg som kan göra mer än bara utmatningstext? Den här HTML-generatorn på nätet skapar kodblock för de vanligaste sidelementen. Några exempel inkluderar oorderade listor, definitionslistor, webbformulär, tabeller och många andra lösningar.

Typechart

Typschart är ett av mina favoritverktyg som en CSS-utvecklare. Jag letar ofta efter att matcha en viss typsnitt på mitt system till ett webbprojekt, men jag har inte tid att bläddra igenom hela min samling. Med det här fantastiska verktyget kan du sätta igenom populära val av fontfamiljer och till och med ladda ner rätt CSS-kod!

PX-to-EM.com

Om du inte återställer standardwebbläsarens textstorlek kommer du sannolikt att ha problem med att matcha ems med pixlar. Den här webbläsaren innehåller både en konverteringstabell och ett användargränssnitt för px till em. Det är ett mycket enkelt verktyg säkert, men det erbjuder en praktisk guide med väldigt enkel funktionalitet - och du kan inte slå den fria prislappen.

CSS typ set

Jag rekommenderar inte att du håller fast med CSS-typ Ställ in för länge eftersom det verkligen är ett nybörjare verktyg. Det låter dig skapa CSS-kod baserat på specifika typsnitt som du väljer. Medan det är mycket användbart först, blir det över tiden en krycka att luta sig på. Och du kommer inte att kunna motivera att behärska CSS-egenskaperna själv. Men om du behöver spara tid på ett projekt, kan det här verktyget inte förbises.

flipping typiskt

Här är ett riktigt unikt exempel på ett förhandsgranskningsfönster. flipping typiskt innehåller en handfull typsnitt som är inbyggda i ditt operativsystem. Det skannar automatiskt din teckensnittskatalog för att hämta de mest webbsäkra lösningarna. Du kan jämföra dem sida vid sida och enkelt välja mellan dina favoritalternativ. Detta är en annan bra tid sparar dig bokmärke och tänker inte på förrän sista minuten.

Typografiskt rutnät

Det finns mycket prat om att designa kring nätet i HTML och CSS. Du förstår sannolikt begreppet hur gridar fungerar, och mätning av en webbplats i pixlar är inte annorlunda. Denna granskning av CSS-Tricks är mer som en guidad ansträngning för att introducera grunderna för typografi för den digitala eran. Det är ett mycket mer avancerat ämne inom webdesign. Men om du har lite tålamod rekommenderar jag att du går igenom detaljerna för att se hur dessa nätegenskaper faktiskt kan påverka din sidlayout.

WhatTheFont!

Vi har alla hittat en logotyp eller en bild med några riktigt coola, oidentifierbara teckensnitt. WhatTheFont har gjort rundor på Internet i några år och det är fortfarande en favorit av mig. Du väljer en bild att ladda upp och deras skript kommer att analysera text inom bilden för att matcha alla liknande typsnitt. Appen kommer även att länka dig till externa produkter där du kan köpa varje typsnitt när det är bekvämt.

Baslinje / Linjehöjdkalkylator

Slutligen ett riktigt kraftfullt verktyg för att generera linjens höjd och rytmegenskaper. Ange bara värden för basstorleken och linjehöjden, eller använd din egen anpassade CSS-kod till sidan. Appen kommer att generera förhandsgranskningar i några olika stilar så att du kan få en uppfattning om hur dessa egenskaper skulle se ut på din egen webbplats.