Kontrast og x-høyde: to begreper som avgjør om teksten leses

Når vi går gjennom elevenes første utkast på kurset, ser jeg ofte det samme: teksten ser fin ut på arbeidsskjermen, men blir uleselig når videoen spilles av på en bærbar eller en telefon. Årsaken er sjelden at skriften er stygg. Som regel mangler eleven ord for det hun egentlig ser, og da blir det vanskelig å rette opp.

Derfor begynner kurset i skjermtypografi med noen få begreper. Ikke for å gjøre faget tungt, men fordi et navn på problemet gjør det lettere å løse. Hvis du kan si at kontrasten er for lav, vet du hva du skal justere. Hvis du bare synes at kortet ser trist ut, gjetter du.

I denne artikkelen tar jeg tre ord som går igjen i undervisningen: kontrast, x-høyde og tegnavstand. Jeg forklarer dem slik jeg gjør det i første kursøkt, med eksempler fra webinarer og opplæringsvideoer. Du trenger ingen forkunnskaper, bare noe tekst du vil teste.

Kontrast betyr hvor tydelig tekstens lyshet skiller seg fra bakgrunnens. Svart på hvitt har høy kontrast, lysegrå på hvit har lav. På en skjerm er dette viktigere enn på papir, fordi skjermen lyser selv, og fordi seerne sitter i alle slags rom, noen med sollys i ruten og andre med dempet lys.

En vanlig feil er å legge hvit tekst over et bilde av taleren eller et rolig kontormiljø og anta at det går bra. Bildet har lyse og mørke partier som skifter, og teksten forsvinner akkurat der bakgrunnen er lysest. Løsningen er enten en rolig, jevn flate bak teksten eller en dempet bakgrunnsplate med nok dekkevne.

Test alltid med knepne øyne. Hvis du må anstrenge deg for å lese teksten mens du myser, har den for lav kontrast. Det er en enkel prøve som ikke krever noe verktøy, og den avslører mange svakheter før noen andre ser dem.

• Høy kontrast mellom skrift og flate, uten å bruke ren svart på ren hvit uten grunn
• Unngå tekst direkte over bevegelige bilder
• Myse-testen: forsvinner teksten, må kontrasten opp

X-høyden er høyden på en liten bokstav som x, uten opp- og nedstrekene. To skrifter med samme oppgitte størrelse kan se svært forskjellige ut, fordi den ene har høy x-høyde og den andre lav. Den med høy x-høyde virker større og er lettere å lese når bildet krymper.

For webinarer betyr dette at skriftvalg og størrelse henger sammen. En elegant skrift med lav x-høyde kan fungere på en stor skjerm, men falle sammen når videoen sees i et lite vindu ved siden av en chat. Velg heller en skrift med åpne former og romslig x-høyde til navnekort og bildetekster.

Når jeg viser dette på kurset, legger vi to skrifter i samme punktstørrelse side om side og krymper billedet til en fjerdedel. Forskjellen er tydelig for alle, også for dem som aldri har tenkt på skrift før. Etterpå kan du velge ut fra hva du ser, ikke ut fra hva som er på moten.

Tegnavstand er luften mellom bokstavene, linjeavstand er luften mellom linjene. På skjerm er standardverdiene ofte for trange for små størrelser. Litt ekstra tegnavstand hjelper øyet å skille bokstavene når bildet er komprimert, noe det alltid blir i en videostrøm.

Motsatt kan for stor avstand gjøre at ordene faller fra hverandre. Du leter etter en balanse der ordene fortsatt henger sammen som enheter. Til korte tekster, for eksempel et rollekort med to linjer, holder det som regel å åpne avstanden noen få prosent og kontrollere resultatet i faktisk visningsstørrelse.

Det er derfor jeg anbefaler å justere i kontekst. Det hjelper lite å pusle med enkeltbokstaver i et forstørret vindu. Spill av videoen, se på den slik seeren ser, og rett på det som irriterer. Små justeringer gjort på riktig sted slår store justeringer gjort i blinde.

• Åpne tegnavstanden litt for små størrelser
• Hold linjeavstanden jevn, ikke trang
• Sjekk alltid i faktisk visningsstørrelse

Nå om høsten, når mange starter opp nye webinarrekker, er det lett å ferdigstille grafikken i siste liten. Sett av en halv time til en enkel test før du publiserer. Eksporter ett bilde fra videoen, åpne det på en telefon og på en stor skjerm, og se på det fra normal avstand.

Les hver tekst høyt uten å lene deg frem. Stopper du opp på et ord, er det et problem. Notér hva som skurrer: kontrast, størrelse eller avstand. Da vet du hvilket av begrepene over du skal ta fatt i, og du slipper å endre alt på måfå.

Ber du en kollega om å se på det, gjør det samme: hun skal lese uten forklaring. Det du må forklare, er ikke tydelig nok. Dette er ikke noe vi har funnet opp for kurset, det er hverdagspraksis for alle som lager grafikk til skjerm.