Valg af font og typografi

Tekst på hjemmesiden

Når browseren skal fremvise hjemmesidens tekst på en skærm, er der forskellige typer af bogstaver at vælge imellem – nøjagtig ligesom når en bogtrykker skal vælge skrifttype og skriftstørrelse til en bog. Informationerne om den valgte skrifttype indsættes lige som hjemmesidens øvrige layout i stylingen i CSS. Herfra henter browseren oplysningerne og omsætter dem til tekst på skærmen.

Font-family

Hver enkelt skrifttype udgør sin egen lille familie (en font-family eller bare font), og har sit eget visuelle særpræg. Fonte som benyttes til latinske sprog rummer tallene fra 1 til 9, de mest almindelige grammatiske tegn, og som minimum bogstaverne i det latinske alfabet. Hver enkelt font har navne som for eksempel 'Arial' eller 'Verdana', og nogle fonte bruges både i tryksager og til internettet.

En veludviklet font rummer desuden særlige tegn og helst også bogstaver, som er særegne for sprogene – for eksempel de danske vokaler æ, ø og å.

Her en kommando i CSS der fortæller browseren, hvilken font den skal bruge til fremvisning af almindelig brødtekst i en artikel:

p  {
    font-family: Verdana;
}

Typografi – serif versus sans serif

I forhold til valg af font er et af de vigtigste parametre, hvorvidt fonten er letlæselig eller ej. Dette gælder for tryksager såvel som for tekst på en skærm. Det er til en vis grad individuelt og afhængigt af personen der læser, hvilken font der er lettest at læse - debatten og studiet om fonte til skærmbrug er i dag stadig aktuel, selvom computeren i det mindste i den vestlige verden har været folkeeje i snart 20 år.

Det har igennem en årrække imidlertid været standard at katagorisere fonte i 2 forskellige typer - en font til tryksager er lettest at læse, hvis bogstaverne er udstyret med fødder (seriffer), mens bogstaver uden seriffer (sans serif) er dem der er lettest at læse på en skærm.

Font med fødder (serif)

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."

Ovenfor et eksempel på brødtekst skrevet med 'Times New Roman' – en font med seriffer, som ofte benyttes i tryksager som aviser og bøger

Font uden fødder (sans serif)

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."

Ovenfor den samme tekst skrevet med 'Verdana', som er en font uden seriffer, hvilket er den type font som bruges oftest til tekst på skærm

Websafe fonts

Når en internetbruger besøger en hjemmeside bruges browseren til at vise indholdet. Mens for eksempel billederne der vises på hjemmesiden ligger placeret på serveren tilhørende hjemmesiden, hentes fonten til fremvisning af teksten fra brugerens egen computer. Browseren henter en afspejling af den ønskede font fra et bibliotek i computerens operativsystem (OS) på nøjagtig samme måde, som når jeg skriver en linie tekst i et tekstprogram – bogstaverne der træder frem på skærmen når jeg trykker på bogstaverne på tastaturet, er blot afspejlinger af en font som ligger placeret i computerens OS.

Så når hjemmesiden via CSS giver browseren besked om at afspejle en given font placeret i computerens OS, opstår der problemer, hvis ikke fonten er tilgængelig. Og det er den ikke nødvendigvis - der findes mange forskellige computere med hvert deres OS, og ikke alle OS indeholder de samme fonte.

Her en liste over fonte som med rimelig stor sikkerhed findes i alle versioner af Windows, Mac og Linux samt operativsystemer på mobile enheder – disse fonte kaldes 'websafe fonts':

Fallback font

Hvis ikke min foretrukne font findes i brugerens OS, vælger browseren en anden tilgængelig font i stedet. Det er derfor en rigtig god ide at fortælle browseren, at kan den ikke finde den foretrukne font på computerens OS, skal den bruge en anden i stedet. Dette kaldes et 'fallback', og er altså en substitut for en font som ikke eksisterer på et givent OS. Her fortælles det, at browseren skal bruge 'Arial' som andetvalg, hvis ikke den kan finde 'Verdana' på brugerens computer:

p  {
	font-family: Verdana, Arial;
}

Skulle det ske, at mit valg af 'fallback' 'Arial' heller ikke findes i brugerens OS, kan jeg helgardere ved at fortælle browseren, at den i det mindste skal bruge en font med eller uden seriffer, når den vælger en font.

Her fortælles det, at hvis hverken 'Arial' eller 'Verdana' findes på brugerens computer, skal browseren bruge en font uden seriffer:

p  {
	font-family: Verdana, Arial, sans-serif;
}

Værktøj til valg af font

Af hensyn til layoutet er det vigtigt, at en fallback font i størrelse minder mest muligt om det primære valg – er fallback fonten højere eller bredere end mit primære valg, vil det have betydning for for eksempel tekstafsnittenes højde på den åbnede side.

Online app'en typetester kan opstille 3 forskelige fonte (kun websafe fonte) ved siden af hinanden, så jeg kan sammenligne højde og bredde.