I denne artikel vil vi kort fortæller om de muligheder du har for at anvende forskellige skrifttyper til hjemmesider. Noget der virkelig kan løfte en hjemmesides overordnede look, er nemlig at bruge en flot skrifttype der underbygger dit brand.
Den mest populære – Google Fonts
Google er leveringsdygtige i over 1000 gratis skrifttyper til hjemmesider. Disse virker ‘out of the box’ med mange temaer men kan også implementeres vha. et script, der indsættes i temaets header-fil. Google’s skrifttyper kan ligeledes downloades og installeres lokalt, så du fx kan bruge dem i Word eller Photoshop. På denne måde kan du få en rød tråd i dine tryksager, grafik og hjemmeside.
En god tommerfingerregel er at bruge ‘sans serif’ fonte til brødtekster. ‘Sans serif’ fonte er skrifttype ‘uden fødder’. Et eksempel på en ‘sans serif’ skrift du højst sandsynligt kender fra Word, er Arial eller Calibri. Pæne, letlæselige skrifttyper. Et eksempel på en ‘serif’ font, altså en skrifttype ‘med fødder’, er den gamle traver Times New Roman. Den er tidløs, men ikke så moderne, og ikke særlig let at læse på en skærm. Det er en anden sag med tryksager. Langt de fleste aviser bruger skrifttyper ‘med fødder’.
Forkellige skrifttype-genrer til hjemmesider
Hos Google Fonts kan du sortere i hhv. ‘Sans serif’, ‘Serif’, ‘Display’, ‘Handwriting’ og ‘Monospace’. De første to er forklaret herover.
‘Display’ er store markante skrifttyper, ofte i blokbogstaver. De er ofte mere detaljerige og er bedst at bruge i store størrelser. De er derfor er gode til overskrifter, bannere, slides osv. Disse bør ikke bruges til brødtekster.
‘Handwriting’ er, som navnet siger, skrifttyper der ligner håndskrift. Disse er rigtig gode til at give hjemmesiden et lidt ‘down to earth’-look. God til blogs og andre sektioner af hjemmesiden, hvor det gerne må se lidt personligt ud. Man bør ikke anvende ‘handwriting’ typer over hele sitet, da de kan være svære at læse. Man kan drysse dem lidt ud over sitet og bruge det til fx citater, udtalelser, bannere og overskrifter.
‘Monospace’ kan vel bedst beskrives som skrifttyper der ligner noget en gammeldags skrivemaskine lavede. Mere teksnisk er ‘monospace’ dog skrifttyper, hvor alle bogstaver og tegn fylder det samme i bredden, deraf navnet. Det betyder at et lille l fx fylder ligeså meget i bredden som et lille w. ‘Monospace’ skrifttyper har stort set altid ‘fødder’.
Denne skrifttype er god til at give sin hjemmeside et lidt retro look.
Der er sådan set ikke nogen teknisk begrænsning på hvor mange forskellige skrifttyper man kan bruge på et site; men man bør ikke bruge mere end 3-4 stykker, da det ellers hurtigt kan blive for rodet og uoverskueligt at se på.
De fleste holder sig til én skrifttype.
Licenskrævende skrifttyper til hjemmesider
Hvis du vil gøre dine hjemmeside endnu mere unik, kan du også købe en skrifttype. Der findes mange forskellige platforme, hvor du kan købe skrifttyper til hjemmesider. Hvis du har forelsket dig i én bestemt skifttype, så google navnet på den. Priserne varierer nemlig lidt fra platform til platform. Hvis du ikke har lagt dig fast på en bestemt skrifttype kan vi anbefale MyFonts.com. Her kan du finde rigtig mange flotte skrifttyper. Husk der er forskel på licenserne, når du køber en skrifttype.
Skal du bruge den på din computer, til fx Word og Photoshop, så skal du købe en desktop-licens. Men skal du bruge den til din hjemmeside, så skal du købe en webfont-licens. Du kan ikke bruge samme licens begge steder.
Licenskrævende skrifttyper er dyrere og tungere
Derudover er licenskrævende skrifttyper oftest delt op sådan at du betaler for varianterne; dvs. du køber en licens til den ‘normale’ font, en til den ‘fede’, en til den ‘kursive’ osv. Mange skrifttyper findes i mange forskellige varianter og ikke bare en slags ‘fed’, så det kan hurtigt løbe op økonomisk, hvis du vil have en skrifttype med alle varianterne. Ofte kan man dog købe en ‘familie-pakke’ hvor du får hele skrifttype-familien til en samlet pris. Dvs. med alle varianterne.
Priserne på licenserne afhænger også af hvor mange brugere, der skal bruge den på deres computer (hvis du køber en desktop-licens. Og på webfont-licenser afhænger det af antallet af visninger hjemmesiden skal have pr. måned. Dette kan du selvfølgelig kun gætte på. Hvis du overskrider antallet af visninger, vil du få besked om at opgradere licensen. Og hvis du ikke gøre det, vil din skifttype med tiden holde op med at virke på din hjemmeside. I stedet vil brugerne bare se en almindelig systemfont.
Systemfonte – standard skrifttyper til hjemmesider
Systemfonte er i bund og grund skrifttyper som langt de fleste har installeret på deres computer, og derfor kan se.
Bruger du en standard skrifttype på din hjemmeside, kan du derfor næsten altid føle dig sikker på at din bruge kan se den. Brugeren kan nemlig kun se skifttypen på hjemmesiden hvis de 1) Har den installeret lokalt, 2) Du har den installeret på dit webhotel eller har en licens der gør at den kan vises fra den server du har købt den på eller 3) Den ligger online, gratis tilgængelig som fx Google Fonte. Hvis du bruger en skrifttype der ikke er standard eller som du ikke forbinder til enten med en licens eller et script, så vil brugeren se en standard font som alternativ.
Det er de velkendte skrifttyper som fx Arial, Courier, Times New Roman osv. Vælger du en af disse til din hjemmeside, så ved du næsten med sikkerhed at din slutbruger ser den samme skrifttype, når denne besøger din hjemmeside.
Fordelen ved at bruge systemfonte er også at du sparer nogle eksterne kald (til fx Google eller serveren) og dette vile have en positiv effekt på loadttiden og SEO.
Fallback skrifttyper til hjemmesider
Hvis du insisterer på at bruge specielle skifttyper, er det en god ide at have nogle ‘fallback’ skrifttyper i din CSS. Dvs. at du fortæller hvilke skifttyper der skal vises som alternativ til den specielle font, hvis brugeren ikke kan se dén af forskellige årsager. Med en ‘fallback’-font kan du lave et hierarki, så du først har din specielle font, dernæste (hvis denne ikke kan vises) så udvælger du en systemfont. Hvis du ikke vælger en specifik systemfont som alternativ, så vil det være en helt tilfældig systemfont der vises i de tilfælde den specielle font ikke kan vises. Dette kan give hjemmesiden et helt andet udtryk end du havde tænkt dig.
Et eksempel på CSS med fallback-skrifttyper:
p { font-family: “Times New Roman”, Times, serif;}
Denne kode fortæller at der først skal bruges Times New Roman. Hvis ikke denne er tilgængelig, så skal der bruges Times. Og igen, hvis denne ikke er tilgængelig, så I det mindste en serif skrifttype.
Lad os sammen tage en snak om skrifttyper til din hjemmeside