Typografi
Det er en rekke krav til tekststruktur for å tilfredstille regelverket. Avhengig av hvilket publiseringsystem som benyttes, kan kravene løses ulikt teknisk, men grunnprinsippet vil være det samme. Det er viktig at innholdet struktureres med korrekt kode, og må kunne forstørres uten tap av tekst eller lesbarhet.
Overskrifter
Overskrifter kodes ved hjelp av overskriftelementene <h1> til <h6>, som deler opp teksten i tilsvarende kapitler og delkapitler. Kartverket har per dags dato tre nivåer fra <h1> til <h3>. Det vil komme mer senere.
Overskriftsnivåer brukes for å strukturere teksten, og er særlig aktuelt i redaksjonelt innhold.
Rekkefølgen på nivåene skal være korrekt. Nedover i nivået går du ett steg om gangen. Rekkefølgen oppover er avhengig av hvordan teksten skal bygges opp. <h1> - <h2> og <h1> - <h1> er tillatt, mens <h1> - <h3> er ikke tillatt.
Dette kan vi sjekke i eksisterende tekster med Eb Accessibility Toolbar, under Structure.
Ofte er det informasjon i rammeverk som ikke er direkte knyttet til hovedinnholdet på siden, og som ligger etter hovedinnholdet i koden. Et vanlig eksempel er footer (kolofonen), som gjerne inneholder overordnet kontaktinformasjon.
I så fall er det gunstig å innlede denne informasjonen med <h1> for å bryte tydelig med hovedinnholdet. Det kan også være aktuelt å ha mellomtitler i denne informasjonen, og nivåene må selvfølgelig være i riktig rekkefølge.
Heading1- Sidetittel
Hovedinnholdets tittel skal være den første overskriften i koden, og skal være på nivå 1 ved hjelp av elementet <h1>. Dette gjelder også startsiden, som bør ha en synlig overskrift som tydelig formidler hvilken virksomhet brukeren har kommet til.
| STØRRELSE | UTSEENDE | KLASSE |
|---|---|---|
| Extra Small | H1 / Mulish / Bold / 20 | heading heading__h1--xs |
| Small | H1 / Mulish / Bold / 24 | heading heading__h1--s |
| Medium | H1 / Mulish / Bold / 32 | heading heading__h1--m |
| Large | H1 / Mulish / Bold / 36 | heading heading__h1--l |
Heading2 -Overskriftsnivå
| STØRRELSE | UTSEENDE | KLASSE |
|---|---|---|
| Extra Small | H2 / Mulish / Bold / 18 | heading heading__h2--xs |
| Small | H2 / Mulish / Bold / 20 | heading heading__h2--s |
| Medium | H2 / Mulish / Bold / 24 | heading heading__h2--m |
| Large | H2 / Mulish / Bold / 26 | heading heading__h2--l |
Heading3 -Overskriftsnivå
| STØRRELSE | UTSEENDE | KLASSE |
|---|---|---|
| Extra Small | H3 / Mulish / Bold / 16 | heading heading__h3--xs |
| Small | H3 / Mulish / Bold / 18 | heading heading__h3--sm |
| Medium | H3 / Mulish / Bold / 18 | heading heading__h3--sm |
| Large | H3 / Mulish / Bold / 20 | heading heading__h3--l |
Brødtekst
Brødteksten skal kodes med avsnittselementet <p>. Unngå bruken av elementene <div>, <span>, <br> og <hr> for å skape avsnitt.
Unngå også tomme avsnittselement. Hvis du bruker det for å skape luft, skal du løse dette med CSS i stedet.
For best mulig lesbarhet for alle brukere, bør det ikke være mer enn 65-70 tegn per linje inkludert mellomrom. Da blir teksten mer innbydende og mindre overveldende, og er særlig viktig for brukere med lesevansker og konsentrasjonsvansker.
| STØRRELSE | UTSEENDE | KLASSE |
|---|---|---|
| Extra Small | Brødtekst / Mulish / Regular / 16 | body-text body-text--xs |
| Small | Brødtekst / Mulish / Regular / 18 | body-text body-text--sml |
| Medium | Brødtekst / Mulish / Regular / 18 | body-text body-text--sml |
| Large | Brødtekst / Mulish / Regular / 18 | body-text body-text--sml |
Label
Label (ledeteksten) er instruksen brukerne får når de skal gi respons i et skjema eller lignende. Ledeteksten kan være et spørsmål eller et enkelt ord, som “Navn” eller “Dato“. Les mer om hvordan gov.uk bruker ledetekst.
| STØRRELSE | UTSEENDE | KLASSE |
|---|---|---|
| Extra Small | Label / Mulish / Regular / 12 | label label--xs |
| Small | Label / Mulish / Regular / 14 | label label--sml |
| Medium | Label / Mulish / Regular / 14 | label label--sml |
| Large | Label / Mulish / Regular / 14 | label label--sml |
Beskrivende Tekst
Beskrivende tekst blir brukt som hjelpetekst og veiledning. Ordet «hjelpetekst» blir brukt om ulike typer innhold: Det kan bety veiledning brukeren kan oppsøke, teksten som hører til et felt, eller feilmeldinger som hjelper brukeren etter at noe har gått galt.
| STØRRELSE | UTSEENDE | KLASSE |
|---|---|---|
| Extra Small | Label / Mulish / Regular / 12 | detail detail--xs |
| Small | Label / Mulish / Regular / 14 | detail detail--sml |
| Medium | Label / Mulish / Regular / 14 | detail detail--sml |
| Large | Label / Mulish / Regular / 14 | detail detail--sml |
Understrekning og lenker
Understrekning skal brukes i lenketekster eller andre elementer som trenger å poengteres.
Lenketekster skal være beskrivende, og gi brukeren nok informasjon til å forstå hva målet med lenken er. Istedenfor å skrive «Les mer her», bør du for eksempel skrive «Les mer om universell utforming her». På denne måten vil lenken alene være godt nok til å forstå hva som skjuler seg bak lenken.
| UTSEENDE | KLASSE | |
|---|---|---|
| Med understrekning | Alpha Bravo Charlie | underline |
| Uten understrekning | Alpha Bravo Charlie |
Eksempelbruk
Dette er overskrift H1
Dette er overskrift H2
Dette er et eksempel på bruk av typografi-klassene.
Dette er et eksempel på bruk av typografi-klassene.
<html>
<body>
<h1 class='heading heading_h1--m'> Dette er overskrift H1</h1>
<h2 class='heading heading_h2--m'> Dette er overskrift H2</h2>
<p class='body-text--sml'>Dette er et eksempel på bruk av typografi-klassene.</p>
<p class='body-text--sml underline'> Dette er et eksempel på bruk av typografi-klassene.</p>
</body>
</html>