De fleste rettelser, der kommer tilbage fra en designgennemgang, handler om typografi. Ikke layout, ikke farver, men tekst. Vægten er forkert, titlen skal være med store bogstaver, tegnmellemrummet er skævt.
Fire ting tegner sig for næsten alle rettelserne: bogstavformens anatomi, forskellen på en font og en skrifttype, opdelingen mellem serif og sans-serif, samt den afstand, der gør tegn til et afsnit og et afsnit til en side. Få styr på dem, og det meste af det, der kommer tilbage i en front-end-gennemgang, behøver slet ikke at blive nævnt.
Kort sagt:
Kløften skyldes opfattelse, ikke manglende indsats. Designeren forventer én ting, udvikleren ser noget andet, og ingen af dem er besværlige — designeren lægger blot mærke til en kategori af ting, som udvikleren aldrig er blevet trænet i at se efter. Og hver rettelse er spildt arbejde: tid til at finde fejlen, tid til at rette den, og en release, der står stille, mens I bliver enige. Grundprincipperne herunder lærer man én gang og genbruger i alle efterfølgende projekter, hvilket gør dem til den mest effektive investering i et design-til-udvikling-overleveringsforløb. Det er grunden til, at jeg besluttede at lave en workshop om typografi.
Inden vi går i dybden med forklaringerne, er det en hjælp at forstå, hvordan et enkelt bogstav fungerer, hvad dets forhold er til de omkringliggende bogstaver, og hvordan dette forhold forplanter sig til ordet, sætningen og afsnittet.
Typografi er håndværket at arrangere skrift, så den er læsbar: at vælge skrifttype, indstille størrelse og vægt samt styre afstanden mellem tegn, linjer og tekstblokke. Det omfatter både bogstavernes form og formen på den side, de står på. Alt i denne artikel falder i en af disse to kategorier.
Grundlæggende begreber, som er værd at kende, og som gør det meget lettere at tale om typografi med andre:
En bogstavform deler fællestræk med sine sidestykker i den samme skrifttype. Disse karakteristika bunder i størrelser og proportioner af de samme grundlæggende anatomiske træk, og de går igen i alle vestlige tegn.
Jeg tænkte, det ville være interessant at opremse dem. Ikke for at du skal lære dem udenad, for navnene gør ikke den store forskel i hverdagen for hverken grafiske designere eller udviklere.
Jeg lister dem op, så du ved, hvad du skal kigge efter, når du sammenligner to skrifttyper, og så de forskellige opgaver, som forskellige fonte kan løse, begynder at give mening ud fra deres anatomi.
| Element | Hvad det er |
|---|---|
| Grundlinje | Den usynlige linje, som bogstaverne står på |
| x-højde | Højden på et lille x, altså højden på de små bogstavers hovedkrop |
| Versalhøjde | Højden på de store bogstaver, målt fra grundlinjen |
| Overlængde | Den del af et lille bogstav, der rager op over x-højden, som i b, d, h, k og l |
| Underlængde | Den del af et lille bogstav, der går under grundlinjen, som i g, j, p, q og y |
| Stamme | Den primære lodrette eller diagonale streg i et bogstav |
| Bue | Den buede streg, der omslutter et rum, som i b, d, o og p |
| Indvendigt rum | Det helt eller delvist omsluttede rum inde i et bogstav, såsom hullet i et o eller et e |
| Skulder | Den buede streg, der udgår fra en stamme, som i h, m og n |
| Serif | Den lille tværstreg, der afslutter enden af en hovedstreg |
| Endepunkt | Enden af en streg uden serif |
| Åbning | Størrelsen på åbningen mellem en streg og et indvendigt rum, som i c, e og s |
| Ligatur | To eller flere tegn, der er samlet til et enkelt glyf, som i fi og fl |
To af dem gør det meste af arbejdet i praksis. En stor x-højde får en skrifttype til at se større ud ved samme punktstørrelse og gør den mere læsbar, når den skaleres ned. En bred åbning forhindrer bogstaver som c, e og s i at lukke sig til og blive svære at skelne fra hinanden.
Skrifttyper klassificeres ud fra disse strukturelle træk, fortolkningsmæssige definitioner eller blot deres historiske placering. Klassificeringen er kun nyttig, hvis den fortæller dig, hvor skrifttypen hører hjemme, så her præsenteres den som et beslutningsværktøj frem for en ordliste:
| Klassificering | Hvad der kendetegner den | Vælg den, når | Undgå den, når |
|---|---|---|---|
| Serif | Har seriffer. Opdeles normalt efter periode i gammelstil (renæssanceantikva), overgangsform (barokantikva), modern (klassicistisk antikva) og slab serif (pladeantikva), som primært adskiller sig i stregkontrast og seriffernes udformning | Du ønsker vedvarende læsning og en rolig, autoritativ tone: lange artikler, redaktionelt indhold, introduktioner til dokumentation. Gammelstil og overgangsform er de sikre valg | Størrelsen falder til under ca. 14px, eller skrifttypen er en højkontrast-modern som Didot. De tynde streger forsvinder på skærme med lav opløsning, og teksten begynder at flimre |
| Sans-serif | Har ingen seriffer. Opdeles normalt i grotesk, neo-grotesk, geometrisk og humanistisk | Næsten alt brugerfladerelateret: navigation, knapper, etiketter, formularer, dashboards, små størrelser og enhver tekst, der skal kunne tåle at blive skaleret af læseren | Du har brug for varme eller redaktionel personlighed, og du har valgt en neutral neo-grotesk. Den vil fremstå korrekt, men intet sige. Humanistiske sans-serif-skrifttyper er løsningen |
| Script | Modelleret efter håndskrift eller kalligrafi, ofte med bogstaver, der hænger sammen | Et enkelt dekorativt element: en logotype, et fremhævet citat, en underskrift. Én linje, stor, og aldrig mere | Alt, en bruger skal læse for at udføre en opgave, og alt i majuskler (store bogstaver) – sammenhængende bogstavformer falder fra hinanden, når de skrives med store bogstaver |
| Display | Designet til store størrelser og korte tekststykker, hvor karakter betyder mere end vedvarende læsbarhed | Hero-overskrifter og kampagnesider, hvor opgaven er tone frem for læsehastighed | Den skal fungere i brødtekststørrelse eller mindre. Display-skrifttyper er tegnet til ét bestemt størrelsesinterval og holder op med at fungere uden for dette |
| Blackletter | Den tætte, vinklede stil fra tidligt europæisk bogtryk (gotisk skrift) | Du har en specifik historisk eller genrebestemt årsag, og teksten er kort | Praktisk talt alle andre steder. Læsbarheden er ringe for moderne læsere, og de kulturelle associationer er tungere, end de fleste brands ønsker |
| Monospaced | Hvert tegn optager nøjagtig samme horisontale bredde (fast bredde) | Kode, terminal-output, ID'er, diffs og alt, hvor kolonnejustering har en betydning. Desuden talstabeller, hvor tabeltal forhindrer kolonnerne i at hoppe | Den erstatter brødtekst som et stilistisk valg. De ensartede bredder, der gør kode overskuelig, gør prosa langsommere at læse |
De to, der betyder mest, når du skriver kode, er de velkendte serif og sans-serif. De er vigtige, fordi deres definerende træk er objektive og tydelige, når først du ved, hvad du skal kigge efter.
Serif-skrifttyper siges på den anden side at være det bedste valg til længere tekster, som dem man finder i bøger og aviser. Er det sandt? Ikke nødvendigvis. Meget af det, der gør familien læsbar, kan vende sig mod sig selv, afhængigt af den enkelte skrifttypes egenskaber. Jeg er ret sikker på, at en Didot, selvom det er en serif, vil være sværere at læse end en Lato i en længere tekst.
Didot har en høj kontrast mellem sine vandrette og lodrette linjer, og denne kontrast skaber støj og "bump" i læserytmen. Lato bevarer en mere jævn proportion mellem bogstavernes forskellige linjer, hvilket gør den til det bedste valg af de to. Det er ikke en perfekt sammenligning, men princippet holder. Vurdér den enkelte skrifttype, ikke den familie den tilhører.
Det, der er værd at forstå om disse to stilarter, hvis du vil vide, hvornår du skal bruge hvilken, er, hvad seriffen egentlig er til for. Og det er lettere at forstå, når du kender dens oprindelse, hvilket er, hvad næste afsnit handler om.
Længe før alt dette. Før vi mennesker overhovedet overvejede at presse små metalstykker mod papir for at fremstille bøger hurtigere. Før vi overhovedet havde tænkt på idéen om en bog, papir eller tekst, skabte vi allerede visuelle udtryk for at kommunikere med hinanden.
Tusindvis af års evolution gjorde mere kompleks visuel kommunikation nødvendig, og derfor opstod alfabeter. Men alfabeter opstod ikke ud af den blå luft. De var resultatet af deres egne mutationer og tilpasninger, og som det ofte fortælles, er historien om bogstavet "A" det mest ligefremme eksempel på, hvordan de fleste bogstaver er endt, hvor de er i dag.
Civilisationer kom og gik. Betydninger og lyde blev fastlagt, nogle muterede, andre gjorde ikke, og oksehovedet blev støt forenklet, roteret og geometrisk perfektioneret af romerne, så det kunne indhugges i monumenter, skrevet og udsmykket af munke, håndforvrænget for hurtigere og mere flydende skrift, og til sidst taget op af typografer.
Kort sagt: seriffen opstod ud fra behovet for at skrive hurtigt og forbinde bogstaverne med hinanden. Senere, da læsning ikke længere var forbeholdt skrivere og monarkiet, blev bedre læsbarhed også et krav, og seriffen blev i stedet brugt til det formål. Det er den del, der er værd at tage med videre. Seriffen var et redskab til læsbarhed, før den nogensinde blev en stilart, så valget mellem serif og sans-serif er en beslutning om, hvordan teksten skal læses, ikke hvordan den skal se ud.
Så kom typografien.
I takt med at folk blev mere bevidste om en skrifttyps læsbarhed, begyndte dens anvendelse og placering på siden at få samme opmærksomhed og omhu.
Noget så grundlæggende som linjeafstand, der styres direkte af skrifttypen og dens størrelse, påvirker hele siden. Gridsystemer opstod for at samle dette i faste regler, så enhver designer kunne skabe læsbar tekst og balancerede sider uden at skulle starte forfra.
Linjeafstand er i øvrigt line-height i CSS: den vertikale afstand mellem to tekstlinjer. Det kan gøre eller ødelægge ethvert tekstområde, for hvis det er for tæt eller for løst, begynder læseren at springe linjer over eller læse den samme linje to gange. Det har vi alle prøvet. Det var aldrig din skyld.
Der findes et optimalt interval, typisk et sted mellem 120 % og 145 % af tekststørrelsen – det tal, som Matthew Butterick angiver i Practical Typography, hvor han også anbefaler at angive det i CSS som en enhedsløs værdi, så 130 % bliver til 1.3. Hvis du i stedet har brug for at vurdere det med det blotte øje, er her tricket:
Tegn en tænkt linje tværs gennem midten af tekstlinjerne uden at ramme nogen under- eller overlængder. Hvis den går rent igennem, er du på rette vej.
Vær også opmærksom på linjelængden. Grid-modulerne dimensioneres ud fra linjehøjden, og de ender som regel med at være ret små i forhold til skrifttypens størrelse. Det er ikke tilfældigt. Små moduler giver designeren fleksibilitet ved opsætning af en side, hvilket giver mulighed for større eller mindre tekstområder, samtidig med at der bevares en god, proportionel afstand mellem elementerne.
I praksis er kortere linjer desuden lettere at læse.
Der findes gode måleenheder for linjelængde, og kilderne er snarere enige om tendensen end om det præcise tal. Baymard Institute angiver det optimale til 50 til 60 tegn pr. linje inklusive mellemrum, i tråd med Emil Ruder, og bemærker, at andre kilder accepterer op til 75. Buttericks linjelængde -side er bredere, med 45 til 90 tegn. Hvis man ser på overlapningen, er 50 til 75 tegn det interval, man bør designe efter, mens alt over 80 er problematisk – det er også her, WCAG sætter sin grænse. Der er nogle gode grunde til det.
Linjer, der er for korte, tvinger læseren til konstant at bryde flowet ved at vende tilbage til venstre margen efter få ord. Vigtige ord for enden af en linje bliver ofte sprunget over i alt det frem-og-tilbage, hvilket er lige så trættende at læse, som det lyder.
Linjer, der er for lange, er svære at fokusere på, fordi man ikke kan se, hvor linjen slutter, og man hele tiden er spændt på at skulle springe til næste linje. Desuden er der større sandsynlighed for, at læseren lander på den forkerte linje, når de endelig springer, fordi venstre margen nu er så langt væk, at det er svært at se, hvor den forrige linje startede.
I praksis er opmærksomheden højest i starten af en linje og aftager mod slutningen, så det er en hårfin balance. Derfor er intervallet på 50 til 75 tegn en god tommelfingerregel.
Linjeafstand og linjelængde definerer en tekstblok. Hierarkiet definerer, hvordan blokkene forholder sig til hinanden, og det er den del, der oftest når frem til udvikleren som en vag instruks.
En typografisk skala er det faste sæt af størrelser, en side må bruge, hvor hver størrelse er et bevidst skridt fra den forrige. Vælg brødtekststørrelsen først, da det er her, læseren bruger sin tid, og udled derefter overskrifterne fra den i stedet for at vælge dem på øjemål. Få trin, tydeligt adskilte. Det er det, der gør, at en overskrift læses som en overskrift.
Størrelse er ikke det eneste værktøj, og alene er det sjældent det bedste. Vægt, skrifttype, farve og afstanden over og under en overskrift adskiller niveauerne fra hinanden, og afstand er normalt det billigste af de fire. Hvis dit hierarki kun fungerer, fordi ét niveau er meget større end det næste, vil det kollapse på en smal skærm, hvor alle niveauer skal formindskes på én gang.
Læsbarhed og tilgængelighed er det samme emne set fra to sider. Hvert valg ovenfor har konsekvenser for tilgængeligheden: brødtekst sat for småt, linjeafstand sat for tæt, linjelængde sat for bredt. Det koster nogle læsere langt mere end andre.
Tre vaner gør det meste af arbejdet. Sørg for tilstrækkelig kontrast mellem tekst og baggrund, og lad aldrig en brand-farve diktere det valg alene – WCAG 2.2 sætter minimumskravet til 4,5:1 for brødtekst og 3:1 for stor tekst. Lad ikke vægt eller farve være det eneste signal om, at noget er anderledes, da det ikke vil nå ud til alle læsere. Og lad teksten reagere på læserens egne indstillinger i stedet for at låse den fast; browsere og operativsystemer giver folk mulighed for at vælge en større størrelse af en grund, og WCAG's krav til skalering forventer, at dit layout kan håndtere en skalering på op til 200 %.
Det dækker det meste af det, der er væsentligt for læsbarheden. Hvis du derimod ønsker et godt fundament inden for typografisk udtryk i bredere forstand, så er Gary Hustwits dokumentarfilm fra 2007 Helvetica det helt rigtige sted at starte.
Den gennemgår tankegangen bag det nye design, der opstod i halvtredserne, og hvordan det arbejde skabte en bevidsthed forankret i social ansvarlighed – en eftervirkning af Anden Verdenskrig. Du får også et indblik i noget oprigtigt interessant design fra perioden samt en introduktion til, hvor den berømte Helvetica-skrifttype stammer fra, og hvad dens formål var.
Du vil også få øjnene op for den markante kontrast mellem reklamer før og efter den internationale stil – den schweiziske tilgang fra midten af århundredet, der er bygget på grids, sans-serif-typografi og fjernelse af dekoration – og hvad det skift betød i praksis for måden, visuel kommunikation blev og bliver udført på.
Der er andre ting, der er værd at vide, og dem vil jeg gennemgå nu. Husk dog, at der findes undtagelser til alle disse regler, alt efter hvilken rolle typografien spiller i det, du er ved at bygge.
Tag ord, der ender med at stå alene for enden af et afsnit eller øverst i en spalte. De har endda fået navne. En enke er en enlig sidste linje i et afsnit, der ender øverst i en spalte; en horeunge er en enlig første linje, der bliver ladt tilbage nederst i en spalte. Uanset hvad skaber det et hul, der bryder sidens tekstur og leder øjet hen, hvor det ikke skal være. For at være retfærdig er de svære at undgå i responsivt design, så forvent at skulle rette dem til ved de endelige breakpoints frem for at designe dig ud af dem. Det samme gælder "rags" – den ujævne højrekant, som venstrestillet tekst skaber. Den skal være ujævn, men aldrig klumpet.
En anden klar regel, som er meget lettere at styre, er tegnafstand: afstanden mellem tegnene. Gør du den for tæt eller for løs, bliver læsbarheden i længere tekster tydeligvis forringet.
Kort tekst og overskrifter er en anden sag, og de kan sagtens tåle lidt stilisering, alt efter hvilket udtryk du går efter.
Uanset hvad du gør, må du aldrig forvrænge din tekst manuelt. Har du brug for noget, der er bredere? Find en "extended" skrifttype. Har du brug for noget højere og mere markant? Vælg en "condensed" skrifttype – der er rigeligt at vælge imellem.
Når du forvrænger en skrifttype manuelt, bliver alle proportioner i tegnet skæve. Stregtykkelser og stammebredder passer ikke længere sammen med resten af familien, og tegnet ser ødelagt ud, når det står ved siden af sine naboer.
Det samme gælder, hvis man vinkler en skrifttype for at lave en "falsk kursiv". Det ser ganske vist ikke altid dårligt ud, men der findes mange bedre alternativer.
Veldesignede kursive skrifttyper er ikke bare en eksisterende skrifttype, der er lagt ned. De har deres egne proportioner, hvilket er det, der gør dem læsbare og gør, at de kan stå sammen med den almindelige version uden at skabe visuel støj.
Der er meget mere at sige og meget mere at lære. Samtidig er dette stort set det nødvendige minimum for at vide, hvad du skal kigge efter, når du omsætter typografi til kode.
Næste gang du arbejder med front-end, vil rutinen mere eller mindre sidde der. "Text-transform?" Tjek. "Character-spacing?" Tjek. "Line-height?" Tjek. "Er det en serif eller en sans-serif?" Det kan du svare på nu. "Bør denne skrifttype overhovedet bruges i en menu?" Det spørgsmål tager længere tid, men det er værd at stille alligevel.
Gør det til en rutine for dig selv, så er det en god vane. Aftal det i teamet som en fælles typografisk skala og en kort tjekliste, som begge parter bruger ved overlevering, så holder det op med at være en vane og bliver til infrastruktur. De samme rettelser dukker ikke længere op i hvert projekt, og diskussionen flytter sig fra, hvordan teksten skal se ud, til hvad produktet skal kunne. Tilgængelighed fungerer på samme måde. Behandl det som en præference, og det er det første, der bliver skåret væk; behandl det som et krav, og det bliver en rammebetingelse, som typografien bygges op omkring fra starten, hvilket er langt billigere end at skulle eftermontere det senere.
Hvad er typografi?Typografi er håndværket at arrangere skrift, så den er læsbar: at vælge skrifttype, fastsætte størrelse og vægt samt styre afstanden mellem tegn, linjer og tekstblokke. Det omfatter både bogstavernes form og formen på den side, de står på.
Hvad er forskellen på en font og en skrifttype?En skrifttype (typeface) er et sæt typografiske symboler og tegn. En font er et komplet tegnsæt inden for en skrifttype, ofte i en bestemt størrelse og stil. Skriftfamilier er grupper af skrifttyper med beslægtede designs.
Hvad er den ideelle linjeafstand?Typisk mellem 120 % og 145 % af tekststørrelsen, i overensstemmelse med Buttericks Practical Typography, og bedst angivet i CSS som en enhedsløs værdi. For at vurdere det med det blotte øje kan du tegne en tænkt linje gennem midten af tekstlinjerne uden at ramme nogen under- eller overlængder. Hvis den går rent igennem, er det fint.
Hvor mange tegn bør en tekstlinje have?Mellem 50 og 75 inklusive mellemrum. Baymard angiver det optimale til 50-60 og accepterer op til 75; Butterick tillader 45 til 90. Over 80 er du uden for, hvad WCAG betragter som læsbart. Kortere linjer afbryder læserens flow for ofte, og længere linjer gør det svært at se, hvor en linje slutter, og den næste begynder.
Er serif eller sans-serif bedst til længere tekster?Serif siges ofte at være det bedste valg, men det afhænger af den enkelte skrifttype frem for familien. Didot er en serif med høj kontrast mellem de vandrette og lodrette linjer, hvilket skaber støj i læseflowet, så den læses dårligere i en lang tekst end Lato, en sans-serif med mere jævne proportioner.
Hvornår bør man bruge en monospaced eller display-skrifttype?Monospaced-skrift er til kode, terminal-output, diffs og numeriske tabeller, hvor ens tegnbredder holder kolonnerne på linje; det gør læsning af prosa langsommere. Display-skrift er til store overskrifter og korte tekststykker, hvor tone er vigtigere end læsehastighed, og den fungerer ikke i brødtekststørrelse eller derunder.
Hvad er en skrifttypeskala, og hvorfor har hierarki brug for en?En skrifttypeskala er det faste sæt størrelser, en side må bruge, hvor hver størrelse er et bevidst trin fra den forrige. Fastlæg brødtekststørrelsen først, og udled derefter overskrifterne fra den. Få, tydelige trin er det, der gør, at en overskrift læses som en overskrift, mens vægt, store/små bogstaver, farve og omkringliggende luft gør resten.
Hvorfor bør man ikke lave falsk kursiv eller strække en skrifttype?Fordi manuel forvrængning af en skrifttype ødelægger alle proportioner i tegnet, og stregtykkelserne og højden passer ikke længere med resten af familien. Hvis du har brug for noget bredere, så kig efter "extended"-skrifttyper; for højere, "condensed". Veldesignede kursive skrifttyper har deres egne proportioner frem for blot en vinkel på den almindelige vægt.
For relaterede designbeslutninger, se Minimalisme eller brutalisme: hvad skal man vælge? og Design af apps til børn: brugeroplevelsen i en læse-app.
Hos Imaginary Cloud har vi et team af eksperter inden for UI- og UX-design. Hvis du mener, at du kunne bruge hjælp til design, så send os en besked.
Jeg er UI & produktdesigner, illustrationskunstner og maler. Kendt for min kærlighed til skrallede badehåndklæder, musikproduktion, typografi og alle slags pizza.
People who read this post, also found these interesting:
