Typsnitt: Snygga, moderna och gratis

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 SansLadda ner Open Sans
typsnitt-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 ProLadda ner Myriad Pro
typsnitt-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.

CabinLadda ner Cabin
typsnitt-cabin Cabin är ett populärt och mycket modernt typsnitt av Pablo Impallari år 2010 som gör sig riktigt bra på webben.

MuseoLadda ner Museo
typsnitt-museo-slab Museo är ett typsnitt som känns trevligt och inbjudande även i sin allra tjockaste form (slab).

LobsterLadda ner Lobster
typsnitt-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.

RockwellLadda ner Rockwell
typsnitt-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 typsnitt-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?

serif-sans-serifSerifer ä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-fontsGoogle 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.