Välj webbsäkra font-familjer för bäst typografi
typography

Typografin på din blogg spelar en viktig roll för hur seriös din blogg kommer att uppfattas. Genom färg och form skapar du dessutom en igenkänning som med rätt medel kan göras så pass stark att du inte ens behöver skriva ditt namn, och ändå vet folk att det är just du som skriver. Ta tex Expressen med sin röda text, eller Aftonbladet med sin gula. De kan skriva precis vad som helst med sitt typsnitt och färg, så vet alla precis vilken tidning det kommer ifrån. Eller varför inte ta The New York Times som exempel, som alla känner till men många inte ens läst.

Poängen är att din typografi är viktig. Tyvärr kan vi inte använda vilka fonts som helst på webben, då det gäller att alla webbläsare ska kunna förstå hur vi vill ha vår text. Så vad har vi för alternativ?

För det första kan vi göra bilder av alla text, så får vi allt att se ut precis som vi vill ha det, eller så använder vi den relativt nya css definitionen @font-face som du kan läsa mer om i artikeln Strunta i webbsäkra font-familjer och låt @font-face skapa typografisk magi, eller slutligen så använder du webbsäkra font-familjer som fungerar i alla webbläsare.

Special fonts som bilder

Alternativet att använda bilder för statiska texter (loggor, överskrifter, menyer) är i mitt tycke endast ett alternativ vid ett specifikt tillfälle, och det är till din logga, och då endast så länge du har ditt namn skrivet någon annanstans eller på något annat sätt med klar text. Varför? Anledning är att Google inte kan läsa bilder (än). För att Google och andra sökmotorer ska förstå vad som händer på din hemsida, kunna orientera sig och kunna sända relevant trafik åt ditt håll, så måste Google kunna läsa dina texter. Det kan de inte ifall du har valt att göra bilder av all text.

Jag rekommenderar därför emot att använda enbart bilder till menyer och överskrifter. En logga är som sagt okej eftersom detta är en logotyp som ska skilja sig från övrig text och ofta är något slags motiv, eller väldigt specifik text, som ska se ut på ett speciellt sätt.

För att Google ändå ska kunna läsa din hemsidas namn är då istället det bästa alternativet att skriva namnet i en div som du absolutpositionerar -9999px till vänster eller något liknande, så att en vanlig användare inte ser den dubbla texten.

.logo-text{
    position: absolute;

    left: -9999px;
}

Websafe font-families

Det andra alternativet är att välja fonts som du vet fungerar på de flesta webbläsarna och då försäkra dig om att din text är läsbar på samma sätt överallt. Detta gör du genom att specificera font-family i din css, och som värde anger du en komma separerad lista med typsnitt som du föredrar. Skulle din webbläsare trots allt inte kunna hitta ditt typsnitt först i listan, kommer den att använda den andra, och så vidare.

Här kommer en lista på alla webbsäkra typsnitt du kan använda dig av, med för det mesta en liknande fallback font och alltid en så kallad Generic font Family (serif, sans-serif, cursive, monospace) som definitivt existerar i varenda webbläsare där ute.

För en lista på alla fonts, säkra eller inte ta en titt på den här sidan: font Tester – All Fonts Preview

font-family: Arial, Helvetica, sans-serif;

www.wordpressguru.se abc 123

font-family: 'Arial Black', Gadget, sans-serif;

www.wordpressguru.se abc 123

font-family: 'Comic Sans MS', cursive;

www.wordpressguru.se abc 123

font-family: Courier, monospace;

www.wordpressguru.se abc 123

font-family: 'Courier New', Courier, monospace;

www.wordpressguru.se abc 123

font-family: Georgia, serif;

www.wordpressguru.se abc 123

font-family: Impact, Charcoal, sans-serif;

www.wordpressguru.se abc 123

font-family: 'Lucida Console', Monaco, monospace;

www.wordpressguru.se abc 123

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

www.wordpressguru.se abc 123

font-family: 'MS Sans Serif', Geneva, sans-serif;

www.wordpressguru.se abc 123

font-family: 'MS Serif', 'New York', sans-serif;

www.wordpressguru.se abc 123

font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

www.wordpressguru.se abc 123

font-family: Tahoma, Geneva, sans-serif;

www.wordpressguru.se abc 123

font-family: 'Times New Roman', Times, serif;

www.wordpressguru.se abc 123

font-family: 'Trebuchet MS', Helvetica, sans-serif;

www.wordpressguru.se abc 123

font-family: Verdana, Geneva, sans-serif;

www.wordpressguru.se abc 123


Inga kommentarer till 'Välj webbsäkra font-familjer för bäst typografi'

  • Det har inte kommit några kommentarer än, bli den första att skriva en

Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>