Der er i øjeblikket stigende opmærksomhed omkring at skabe bæredygtige websites med så lavt energiforbrug som muligt. Både fordi et lavt energiforbrug medfører bedre performance og kortere load-tider, men naturligvis også i forhold til den aktuelle klimadebat. Den største synder i forhold til en hjemmesides energiforbrug af ofte billeder og videoer, som ikke er tilstrækkelig komprimeret, men fonte, og måden de anvendes på, har også en betydning.
I forhold til en hjemmesides energiforbrug er der særligt to forhold, man bør holde øje med:
- http-requests
Hver gang dit website skal “hente noget” på en server (for eksempel et billede, en kode-stump eller en font) kræves der energi. Jo flere requests dit website foretager, jo mere energi kræves der. - Filstørrelser
Jo mere de enkelte elementer på websitet fylder (kilobytes), jo mere energi kræves der samlet set for at overføre websitets indhold fra serveren til brugerens computer.
Skriften følger ikke automatisk med
En font kan kun vises i et interface, hvis den er tilgængelig for den enhed, der skal vise den. Hvis skriften Helvetica er installeret på DIN computer, fungerer den fint som skrift, når du ser interfacet via DIN computer. Hvis dit interface derimod vises på en enhed, som ikke har skriften installeret, vil den ikke blive vist, da den ikke er tilgængelig på den enhed. I dette tilfælde vil teksten blive vist med en anden font. Det er derfor man i CSS anvender font-families, hvor man specificerer, hvilke alternative skrifter, man foretrækker, såfremt den ønskede skrift ikke er tilgængelig på brugerens device:
p {font-family: helvetica, arial, sans-serif;}Font-families er således en prioriteret liste af skrifter. I ovenstående eksempel er Helvetica førsteprioritet, derefter Arial, derefter en uspecificeret skrift af sans-serif-typen.
Man skal desuden være opmærksom på, at selvom Helvetica måtte være installeret på brugerens enhed, betyder det ikke nødvendigvis, at alle fonte relateret til denne skrifttype også er det. Så hvis du anvender fonten Helvetica Light eller Helvetica Black i dit design, skal disse specifikke fonte være installeret, før de kan vises korrekt.
Som designer kan det selvsagt være frustrerende ikke at have fuld kontrol over, hvilken font, der bliver anvendt – skriften er trods alt et afgørende designelement. Der er grundlæggende tre forskellige metoder til at håndtere udfordringen:
- Brug en font, der er meget udbredt
- Brug et skriftbibliotek
- Importer din egen font-fil
Brug en font, der er meget udbredt
Når man arbejder med typografi til websites, taler man ofte om såkaldte “web-safe” fonte. Betegnelsen dækker over skrifter, der er vidt udbredte, og som man kan forvente er pre-installeret på de fleste styresystemer (Windows, Mac, Android osv.). Medmindre brugeren bevidst har valgt at afinstallere skrifterne fra sin computer, vil de med meget stor sandsynlighed blive vist korrekt.
Som eksempler på “web-safe” fonte kan nævnes:
- Arial
- Verdana
- Times New Roman
- Georgia
Udfordringen med web-safe fonte er, at udvalget er temmelig begrænset (du kan tjekke hvilke skrifttyper, der som udgangspunkt er web-safe på cssfontstack.com).
Et alternativ til web-safe fonte er såkaldte system-fonte. Her vælger interfacet font afhængig af hvilket styresystem, der kører på den enhed, som skal vise interfacet. Fonten varierer således alt efter om interfacet vises på Mac, Windows, Android, Linux eller et andet styresystem.
p {font-family: system-ui;}Da system-fonten er identisk med styresystemets “native font”, kan du være forholdsvis sikker på, at skriften fungerer rigtig godt på den enhed, hvor den bliver vist. Ulempen er, at du som designer kan have svært ved at vurdere, hvordan det endelige resultat kommer til at se ud – hvis du da ikke lige har devices med alle styresystemer ved hånden.
Brug et skriftbibliotek
Vil man have større udvalg og bedre kontrol i forhold til sin typografi, er det oplagt at bruge et skriftbibliotek. Konceptet er ganske enkelt: I stedet for at “kræve”, at fonten er installeret på brugerens enhed, refererer man i stedet til en server, hvor font-filen ligger. De mest populære skriftbiblioteker er Google Fonts og Adobe Fonts, der begge har et enormt udvalg af skrifter.
Google Fonts er frit tilgængelig, hvorimod man skal have en Adobe-konto for at kunne bruge deres skriftbibliotek. Til gengæld får man hos Adobe adgang til mange af de store skriftklassikere, såsom Futura, Baskerville, Garamond, Gill m.fl. Begge skriftbiblioteker fungerer efter samme princip: Du indsætter en reference (http-request) til font-filen i din kode, hvorefter du kan bruge fonten i dit design.
/* Skriften Open Sans i varianterne "regular" (400) og "semi-bold" (600) hentes hos Google Fonts: */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,400&display=swap');
/* Efterfølgende kan fonten anvendes som del af din font-family: */
p {font-family: 'Open Sans', sans-serif;}Den umiddelbare fordel ved skriftbiblioteker er det store udvalg, hvilket åbner op for langt flere kreative muligheder, end hvis man er begrænset til web-safe fonte. Ulempen er, at dit website skal hente skrifterne på en ekstern server, før de kan bruges, hvilket kræver mere energi. Bruger du flere forskellige skrifter eller forskellige font-varianter af den samme skrift, øges energiforbruget yderligere.
Importer din egen font
Den sidste mulighed, jeg vil nævne, er at referere til en font-fil, der ligger på samme server som websitet. På denne måde spares der energi, da fonten ikke skal hentes via en request til en ekstern server (skriften skal dog stadig hentes ned på brugerens enhed, når websitet loades).
/* Først skal skriften navngives og font-filen lokaliseres: */
@font-face { font-family: minYndlingsFont; src: url(font-fil.ttf); }
/* Efterfølgende kan fonten anvendes: */
p {font-family: minYndlingsFont, sans-serif;}Opsummering
- Web-safe fonte og systemfonte giver god performance og lavt energiforbrug, men begrænset udvalg.
- Skriftbiblioteker giver stort udvalg, men bruger mere energi og kan medføre ringere performance, særligt hvis du bruger mange forskellige fonte.
- Ved at bruge fonte, der ligger på din egen server, får du uanede grafiske muligheder og du undgår requests til eksterne servere. Men det kræver, at du har adgang og rettigheder til font-filerne.