Välkommen till Webbdesignguidens typsnitt-guide med information om hur du kan använda en uppsjö av riktigt snygga och moderna typsnitt på din hemsida.
Typsnitt för webben
Open Sans – Ladda ner Open Sans
Open Sans är typsnittet som används här på Webbdesignguiden. Det skapades av Steve Matteson på beställning av Google. Open Sans är neutralt, lätt att läsa och passar bra till både brödtext och rubriker.
Myriad Pro – Ladda ner Myriad Pro
Myriad pro är ett typsnitt skapat av Adobe. Myriad Pro är mycket modernt och rent och ofta använt av Apple i sina produktlogotyper. Det gör sig också väl på hemsidor.
Cabin – Ladda ner Cabin
Cabin är ett populärt och mycket modernt typsnitt av Pablo Impallari år 2010 som gör sig riktigt bra på webben.
Museo – Ladda ner Museo
Museo är ett typsnitt som känns trevligt och inbjudande även i sin allra tjockaste form (slab).
Lobster – Ladda ner Lobster
Lobster är likt Cabin ovan designat av Pablo Impallari och är ett extremt modernt typsnitt som blivit så ofta använt att det nästan blivit för mycket.
Rockwell – Ladda ner Rockwell
Rockwell är ett mycket snyggt och populärt typsnitt som gör sig bättre i logotyper och rubriker än i brödtext. Det skapades av Monotype redan 1934.
Helvetica 
Helvetica är utan tvekan det mest välkända och mest använda typsnittet som finns. Det finns i en uppsjö av varianter och är tidlöst och modernt på samma gång. Helvetica gör sig väl både i brödtext, rubriker och logotyper. Familjen Helvetica Neue har ett par riktigt läckra och moderna varianter, speciellt de tunna/lätta varianterna.
Helvetica är tyvärr inte gratis och jag kan därför inte lägga upp en länk att ladda ner typsnittet. Det är dock inte svårt att ladda ner gratis på en viss kust fylld med pirater…
Vad är serif och sans-serif?
Serifer är små linjer på kanterna av bokstäver och symboler som vid en nära titt kan se ut som utsmyckningar. Seriferna är dock där för att göra det enklare och snabbare att läsa längre texter tryckta på papper, t.ex. i en bok. Sans-serif är en typ av typsnitt som saknar serifer (sans härstammar från latinska sine som betyder utan). Sans-serifer ser därför mer minimalistiska och moderna ut.
Då bokstäver i tryck normalt har väldigt mycket högre upplösning än bokstäver på datorskärmar (även inklusive mycket nya och moderna skärmar som Apples retina-skärmar) så används oftast serifer i tryck, och sans-serifer på skärmar. Detta är dock inget måste och exempelvis ser man idag ofta serifer användas även på hemsidor och annat.
Om @font-face
@font-face är en CSS-regel som gör det enkelt att använda egna typsnitt på sin hemsida. För inte så jättemånga år sedan var rekommendationen vad gäller typsnitt på webben att man alltid skulle använda så kallade ”webbsäkra” typsnitt för att text skulle se likadan ut på olika datorer. Denna rekommendation är inte ”expirerad” idag, det kan fortfarande vara en bra ide att använda dessa typsnitt för t.ex. brödtext, dock så är det absolut inte lika viktigt att följa denna rekommendation idag som tidigare. Anledningen till detta är moderna webbläsare och CSS-regeln @font-face som gör det möjligt att använda vilket typsnitt som helst på sin hemsida så länge det finns uppladdat någonstans.
Exempel på användande av @font-face
@font-face {
font-family: Snyggt Typsnitt;
src: url(http://www.exempel.se/SnyggtTypsnitt.ttf);
}
body {
font-family: Snyggt Typsnitt;
}
Om typsnittet nu finns uppladdat på den angivna URL:en så kommer Snyggt Typsnitt nu att användas.
Om Google Fonts
Google Fonts gör det enkelt att smidigt och enkelt att hitta och använda typsnitt till sin hemsida. Med Google Fonts behöver man inte själv ladda upp ett typsnitt för att använda det, utan allt finns på Googles egna servrar och kan användas gratis av alla. Det finns hundratals gratis typsnitt att använda – använd med fördel sökrutan uppe till vänster för att hitta ett typsnitt. Efter det klickar du på Quick-use (ikonen med en pil som pekar till höger), väljer vilken eller vilka variationer av typsnittet du vill använda och får sen direkt en snutt med HTML-kod och en snutt med CSS-kod som du kan lägga in direkt på din hemsida och använda valt typsnitt direkt.