Web Typografi: Sådan finder du den perfekte skrifttype til dit websted

7 Min.
perfekt-web-typografi

En passende skrifttype ikke kun gør din hjemmeside meget mere interessant visuelt. Skrifttyper har afgørende indflydelse på, om dele af teksten ignoreres eller læses. I dette indlæg vil jeg vise dig, hvordan du finder den perfekte skrifttype til din hjemmeside!

God typografi er resultatet af mange års engagement med skrifttyper og design. Men et par grundlæggende tips kan hjælpe dig med at træne dit øje i overensstemmelse hermed og bruge den relevante skrifttype til dit web-projekt.

Den allerførste hjemmeside ...

Eller: Hvad sker der, når du downloader en hjemmeside uden CSS. Tidligere var webstederne repræsenteret i de skrifttyper, der blev integreret i det pågældende operativsystem. Disse er stadig indlæst i dag, hvis skrifttypen er utilgængelige. Den allerførste hjemmeside er stadig online i dag og ser ud præcis som den direkte udsendelse i december 1990:

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Den allerførste hjemmeside

Hvordan hjemmesiden vises i din browser afhænger ikke af hjemmesiden, men på det operativsystem, du bruger. Og om du har foretaget ændringer i standardindstillingerne.

For Windows-brugere: Serif-skrifttyper repræsenteres som standard i Times New Roman. Mac OS X, på den anden side, er Times eller Times Roman. Arial bruges af Windows som skrifttypen Sans Serif. Mac OS X bruger Helvetica her.

Zach Leatherman har udviklet et projekt, hvor han har testet forskellige operativsystemer og de tilhørende skrifttyper. Værktøjet Font Family giver dig et interessant indblik i reserveskrifttyperne – og hvordan de ser ud i sidste ende. 

Georgien og Verdana

Mod midten af 1990'erne blev Georgien og Verdana tilføjet til standardskrifttyperne, som var specielt designet til internettet af Matthew Carter. Med et sparsomt udvalg af fem skrifttyper til at bygge gode hjemmesider, behovet skabt en i dag tvivlsom vane: skrifttyper, der normalt ikke eksisterer på nettet blev bygget ind som en billedfil.

Ulemperne ved dette er indlysende:

  • Den relevante skærm på forskellige enheder kan degenerere til kedeligt mikroarbejde.
  • Ordene kan ikke registreres eller oversættes af søgefunktionen.
  • Desuden udgør enhver tekstændring en enorm ekstra indsats.

Design til det ukendte

Heldigvis er teknologien modnet meget længere. Trods alt er grundlæggende viden på det tekniske område også nødvendig her. Fordi det er vigtigt at forstå, hvad der sker på dit websted, når den ønskede skrifttype ikke er tilgængelig. Der kan være flere grunde til dette. En dårlig internetforbindelse, der f.eks.

I modsætning til grafisk design, er internettet baseret på dårlige (upassende) skrifttyper er bedre end ingen skrifttype overhovedet.

Når du håndterer, hvilken skrifttype der understøtter din side bedst visuelt, skal du også stille grundlæggende tekniske spørgsmål:

  • Vil din tekst blive vist, selvom CSS-filen ikke er indlæst? 
  • Kan din side stadig læses i standarden Serif og Sans Serif? 
  • Giver du en alternativ skrifttype? Hvordan præsenteres det? Kan du foretage andre indstillinger, der giver dig mere kontrol over dine reserveskrifttyper?

Først og fremmest er det vigtigt, at indholdet overhovedet vises. Den generelle læsbarhed er nøglen, når du vælger slåfejl. 

Robin Rendle giver interessante grundlæggende om emnet FOUT vs FOIT (når skrifttypen er indlæst) i sin artikel Loading Web Fonts med Web Font Loader.

Yderligere oplysninger om emnet kan findes her:

Hvor kommer din skrifttype egentlig fra?

Nu, hvor du har studeret de tekniske baggrunde og fallback skrifttyper, er der stadig et meget vigtigt aspekt, der skal havde. Nemlig den ene, hvorfra din skrifttype er faktisk indlæst. Som tidligere nævnt har hvert operativsystem sine egne standardskrifttyper. Desuden kan alle brugere installere skrifttyper på computeren. Så det er umuligt at vide, hvilke der er der - eller ej. 

For at præsentere vores hjemmesider ikke kun i Arial og Times New Roman, er vi i stigende grad adgang til web-baserede skrifttype tjenester. Fordelen er indlysende: de begrænsninger, vi har for at bruge standard skrifttyper er omgået. Udvalget af tilgængelige skrifttyper øges.

Sandsynligvis den mest berømte her er Google Fonts (gratis) og Adobe Fonts (oplades). Men der er andre udbydere. Især i Tyskland fører de skærpede retningslinjer for databeskyttelse oftere til, at der søges et alternativ til Google. Ikke kun skrifttyper tilbydes til indlejring, men også platforme, der er vært for dine skrifttyper for dig, så der er ingen grænser for din kreativitet. Forudsætningen er naturligvis, at du ejer rettighederne eller licenserne.

Smashing Magazine har prøvet forskellige leverandører og fået sin erfaring her.

Designelementer efter skrifttyper

Hvis du vil vælge en passende skrifttype, skal du kende nogle funktioner i typografier. Det kan siges grundlæggende, at afsnit bør bestå af letlæsenede skrifttyper. Hvis det bliver for anstrengende,:de besøgende:stop med at læse på din side. De oplysninger, du præsenterer, forbruges ikke. 

Et andet aspekt her er at være opmærksom på, hvordan skrifttypen ændringer, da det er reduceret. Fordi en skrifttype, der er let at læse på skrivebordet kan være svært at læse i et mindre format på mobiltelefonen. 

Der er indikatorer, du kan være opmærksom på og hjælpe dig med at vælge den rigtige skrifttype.

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Artikel: Hvad er typografi?

x-højde

I følgende eksempel kan du se tre forskellige eksempler. X-højden beskriver bogstavet x's lodrette højde. Hvis dette er for lille, bliver teksten sværere at få adgang til, især for mindre skriftstørrelser. Hvis x-højden er for stor, bliver det vanskeligere at skelne mellem store og små bogstaver.

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Kilde: Professionel
Web typografi

Åbninger

Åbninger er de åbninger, vi finder i bogstaver. Generelt, jo mere generøse de er, jo mere behageligt er de til at læse lange dele af teksten med denne skrifttype.

Mellemrum og knibning af bogstaver

Mens bogstavafstand beskriver den generelle afstand mellem bogstaverne, er knibning afstanden mellem visse bogstaver. Denne afstand kan være større på grund af bogstavernes naturlige form end mellem andre:

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Artikel: Typografi i 60 sekunder

Ensartede afstande får skrifttypen til at se mere harmonisk ud. Det gør det nemmere at læse. Begge kan også justeres via CSS, hvis du føler, at der stadig er behov for forbedringer i den skrifttype, du har valgt:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminaler, opstigende og nedstigende

Terminaler forekommer i bogstaverne a, ä, c, f, j, r og y:

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Kilde: Professionel
Web typografi

Opstigende og Descenders er ens, men udvidelserne for eksempel f, q og j betyder:

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Kilde: Professionel
Web typografi

Følgende gælder for dem: Jo mere diskret de er, jo mindre egnede er de til udtalte tekster. Især med Serif Fonts, terminaler, Ascenders og Descenders er særligt veludviklede, hvilket er grunden til disse skrifttyper har længe været betragtet som et sikkert kompromis for længere dele af teksten.

Kontrast

Kontrasterede skrifttyper (venstre) er mere uegnede til små skriftstørrelser, som bruges i afsnit, og er bedre egnet til overskrifter.

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Kilde: Professionel
Web typografi

Fed og italisk

Når du vælger dine skrifttyper, skal du også sørge for, at de er tilgængelige i forskellige styrker og stilarter. Fordi ikke-eksisterende typografier kan være smedet af browseren og kan derefter se sådan ud:

(Til højre for den "falske" typografi fra browseren)

Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Kilde: Professionel
Web typografi

Baseret på disse kriterier, kan du nu søge i Body Font for dit websted. Da valget af dette er normalt mere kompliceret, og der er mere at overveje her, vil jeg anbefale at starte med at vælge overskriften Font (s) baseret på Body Font (og ikke den anden vej rundt).

Her kan du finde et mere omfattende overblik samt yderligere definitioner: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif og Monospace

Der er en bred vifte af kategorier for skrifttyper. De tre mest almindelige er sandsynligvis

  • Serif, for eksempel Times New Roman
  • Sans Serif, for eksempel Arial
  • Monospace, for eksempel kildekode

Med skrifttypekombinationer er der to enkle måder at følge. Disse er ikke et must, men kun retningslinjer, der kan hjælpe dig. Især hvis du ikke har meget erfaring i at kombinere skrifttyper:

  1. Brug den samme skrifttype til brødteksten og overskrifterne – men skift tykkelse, bogstavafstand og størrelse, f.eks.
Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Brug den samme skrifttype til Brødtekst & Overskrifter
  1. Kombiner en serif og en sans serif skrifttype, for eksempel Baskerville og Open Sans:
Web Typografi: Sådan finder du den perfekte skrifttype til dit websted
Sådan kan en skrifttypekombination se ud

Derudover er der et online værktøj, som du hurtigt kan opdage og afprøve forskellige skrifttypekombinationer: https://fontjoy.com/#.

Konklusion

Et andet vigtigt emne, som jeg helt har udeladt, er brugen af farver. Afhængigt af om skrifttypen er på en lys eller mørk baggrund, vil den naturligvis se anderledes ud. Du kan også oprette skrifttypevariationer ved at tage den samme skrifttype og ikke kun i forskellige tykkelser, men også i forskellige farver. Når du vælger farven, skal du ikke ignorere dit brands stilguide og branding.

Ud over at analysere andre hjemmesider, er det også velegnet til inspiration til at håndtere aktuelle tendenser. Selvom du hurtigt vil bemærke, at visse skrifttype parringer altid gentages her, og der er lidt nyt. Afhængigt af projektet og krav, dog kan det være nødvendigt at bruge, hvad der er kendt i stedet for at være særligt innovative - i denne artikel vil du finde flere detaljer.

Flere ressourcer om emnet

Dine spørgsmål: Den perfekte skrifttype

Hvilke spørgsmål har du om typografi på nettet? Brug kommentarfunktionen. Du ønsker at blive informeret om nye bidrag til webdesign og udvikling? Følg os derefter på Twitter, Facebook eller via vores nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.