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 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. Det var omåttligt populärt för unge får tio år sedan.
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 längre lika viktig. Med @font-face kan du använda egna webbtypsnitt som laddas ner tillsammans med webbplatsen. Webbsäkra typsnitt kan fortfarande vara ett bra alternativ, särskilt som reservtypsnitt om det egna typsnittet inte kan lassas.
Exempel på användande av @font-face
@font-face {
font-family: ”Snyggt Typsnitt”;
src: url(”/fonts/SnyggtTypsnitt.woff2”) format(”woff2”);
font-display: swap;
}
body { font-family: ”Snyggt Typsnitt”, sans-serif;
}
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.