Design tips

Lixtal

Brug lixtal til at skaffe overblik over dine teksters sværhedsgrad.

Lix, lixtal og læsbarhed

Typografi

Typografi handler om tekstens fysiske udtryk. Typografien beskæftiger sig med skrifttyper, layout af tekster og læselighed.

Her er en koncentreret oversigt over typografiens hovedpunkter med fokus på typografi på Internettet.

Typografiske begreber og værktøjer:

Skrifttyper på Internettet

Skrifttyper til webbrug skal være lette at læse, og så skal de være installeret på brugerens computer.

Normalt anbefaler man sans serif (groteske) skrifter til webbrug. De kendeste sans serif skrifter er Arial og Verdana. Verdana er en stor åben font specielt designet til skærmen. Generelt signalerer sans serif fonte en moderne og seriøs stil.

Men på moderne skærme kan serif (antikva) skrifter sagtens bruges. Georgia er designet til skærmbrug og meget velegnet. Times new roman ikke egnet. Den er alt for kompakt, og svær at læse. Serif fonte signalerer tradition og gamle solide værdier.

Nogle af de mest udbredte fonte på nettet er:

  • Verdana
  • Arial
  • Georgia
  • Trebuchet

Skrifttyperne udgør en væsentlig del af typografien.

Her kan du læse meget mere om skrifttyper, fonte, statistikker og skrifttypernes visuelle signaler.

Overskrifter. Typografiske hierakier

Overskrifter skal give overblik, strukturere og skabe typografiske hierakier i tekster. Brug dem til at:

  • Give brugeren informationer om indholdet.
  • Dele tekst og informationer op i mindre dele.
  • Skabe hierakier. Vis hvad der er vigtigst!

Brug tydelige kontraster i overskrifterne. Enten i form af størrelseskontrast. Eller formkontrast. F.eks. ved at vælge en anden skrifttype til overskriften. Variation i typografien skaber kontrast, og så skiller overskrifterne sig ud, og skaber både opmærksomhed og overblik.

Brug ikke for mange niveauer i dine overskrifter. Overskrift, mellemrubrik ("under-overskrift") er ofte passende.

Til webbrug skal du bruge mange overskrifter. Brugerne læser ikke dine sider. De skimmer dem!

Læs hvordan du understøtter skimningen med brugervenlige tekster.

Font-størrelse

Font-størrelsen afhænger selvfølgelig af den font, man har valgt at bruge.

Men fontstørrelsen er også afhængig af moden på nettet. Efter en lang periode, hvor meget små fontstørrelse har været moderne, går trenden nu i retning af større fonte. Tydeligst er det inden for web 2.0, hvor f.eks. både tekster og menuer bliver større.

Når de forskellige font-størrelsen skal vælges, så er det vigtigt at tænke på størrelseskontrasten skal være tydelig.

Prøv f.eks. 20px, 15px og 11px til overskrift, mellemrubrik og brødtekst.

Hvis målgruppen er ældre over 50, eller børn under 10 skal man bruge store fonte. Gerne på 12px eller større.

Linielængde

Undersøgelser viser at hvis linielængden når over 60-70 tegn, bliver teksten sværere at læse.

Derfor er det en god typografisk regel at holde en faste bredder på sine tekster. Ellers kan linierne blive alt for lange på større skærme. For at udnytte skærmens bredde bedst, kan det være nødvendigt at dele det tekstlige indhold op i spalter.

Linieafstand

Linieafstanden (skydning i typografisk fagsprog) er afhængig af skriftstørrelsen, skrifttypen og liniens længde. Jo længere linier jo større linieafstand. En tilpas linieafstand gør det lettere for øjet at fange den næste linie og fortsætte læsningen på den.

Et bud kunne være en linieafstand (line-height i css og html) på 16px til en font-størrelse på 11px.

Justeringer i typografien

Venstrejusteret tekst er den mest almindelige justering til brødtekst og læse-typografi. Den er meget læsevenlig, da øjet let finder den næste linie, på grund af den faste forkant.

Pas på med centreret tekst. Design med mange centrerede elementer giver ofte et kedeligt og statisk indtryk. Centrerede brødtekster bliver meget vanskelige at læse, da starten på linierne er svære at finde for øjet.

Pas også på med at bruge centrede overskrifter til venstrejusteret tekst. Det kan give et rodet og ubeslutsomt udtryk, hvis vi ikke tør tage en beslutning om at enten at holde kant eller centrere.

Brugt med omtanke kan centrerede elementer signalere balance og harmoni.

Højrejusteret tekst kan være god til tabeller eller f.eks. konsultativ typografi, hvor man gerne vil have bestemte ting til at stå nær hinanden. Gestaltloven om nærhed

Navn: Jens Jensen
By: Aarhus
Beskæftigelse: Typograf

Højrejusteret tekst kan også bruges til at skabe opmærksomhed eller dynamik.

Lige margener (justify) kan være meget farlig at bruge, da det kan give uhensigtsmæssige resultater.

Især ved korte linijer bliver nogle ord trukket så langt fra hinanden, at afstanden mellem ordene, bliver længere end afstanden mellem linierne. Det kan gøre teksten særdeles svær vanskelig at læse.

På nettet ses denne typografi oftest brugt i blogs.

Litteratur om typografi

Dette har kun været en meget kort gennemgang af de vigtigst regler i typografien. Og primært rettet mod nettet.

Hvis du vil vide mere om typografi, f.eks. om typografi til tryk, kan jeg stærkt anbefale: "Grundbog i typografi" af Henrik Birkvig. Han giver en meget grundig gennemgang af grundlæggende typografi.

En anden god bog om typografi er Kim Pedersens bog: Displaytypografi. Som titlen antyder er fokus i bogen displaytypografi. Bogen er udsolgt fra forlaget, men kan sikkert findes p dit bibliotek.

3 former for typografi

Typografi kan opdeles i 3 hovedområder:

  • Læse-typografi
  • Display-typografi
  • Konsultativ typografi

Læsetypografi

Læsetypografien beskæftiger sig med traditionel tekst, der er bygget op med overskrifter og brødtekst.

Læsetypografien udgør over 90% af den typografi vi ser på nettet, og det er læsetypografien, jeg har fokuseret på her.

Konsultativ typografi

Konsultativ typografi bruges til hurtige opslag. F.eks. til navne/adresse lister, dispositioner, oversigter etc.

Konsultativ typografi skal være hurtig at få øje på, overskue og læse.

Jens Jensen
Typografi-vej 101
8000 Aarhus C

Display Typografi

Display typografi bruges som blikfang. F.eks. i logo'er som logotypes eller opmærksomhedsskabende overskrifter.

Men displaytypografien er meget mere end bare overskrifter. Den er udsmykning og formidler af visuel indentitet, og behøver ikke at være læsevenlig.

På nettet vil man oftest bruge billeder til displaytypografi, for at sikre at alle brugere vil se det samme resultat.

Her er et eksempel fra Dr. Martens hjemmeside, hvor produktkategorien er skrevet med displaytypografi.

Displaytypografi

Stilen er håndskrift med øls hånd og fonten skal sammen med de øvrige visuelle virkemidler formidle en lidt rå og rustik grunge-agtigt stemning.