Typografi
Använd rubriker för att ge struktur och mening till längre textinnehåll och brödtext för textinnehåll.
Välj rätt rubrik eller brödtext
Nedan listas de komponenttyper som används på KTH:s webbplats och i vilka sammanhang de förekommer. Observera att ett och samma textformat kan användas för olika typer av innehåll. Exempel: H4 heading avser både rubrik av fjärde storleksgrad och huvudrubrik i smalare innehållsblock.
Ta även del av riktlinjerna därunder för hur du arbetar med rubriker och brödtext och vad som är viktigt att tänka på när det gäller läsbarhet.
Här har du även hjälp av de sidor som stödjer webbredaktörer i produktion och redigering av text: Skriv för webben .
För teknisk implementation av textformaten se sidan Typography i KTH Style (på engelska).
Headings (rubriker)
| Komponenttyp | Användning |
|---|---|
| H1 heading | Huvudrubrik. Det får bara förekomma en huvudrubrik på varje sida. Ska inte användas längre ned på sidor. |
| Headline | Huvudrubrik med en subtitle. Det får bara förekomma en huvudrubrik på varje sida. Ska inte användas längre ned på sidor. Exempel: Utbildningsplaner som finns på flera sidor där varje sida har "Årskurs X" som huvudrubrik och "Kurskod kursnamn" som subtitle. |
| H2 heading | Andra rubriknivå i artikel. |
| H2 sub block | Blockrubrik när innehållsblock är minst 419 pixlar breda. Fungerar semantiskt som en H2:a. |
| H3 heading | Tredje rubriknivå i artikel. |
| H4 heading | Fjärde rubriknivå i artikel, blockrubrik när innehållsblock är smalare än 419 pixlar, menyrubrik, sitename |
Paragraphs (textformat)
| Komponenttyp | Användning |
|---|---|
| P body text | Brödtext Texter på längre rader kräver en font med serif för att ge bra läsbarhet. Exempel: brödtext i en artikel. |
| P short text | Kortare texter. Exempel: knappar, tabeller och innehållsblock. |
| P lead text | Ingress (inledande intresseväckande text i början av en artikel), länk i megameny, blockquote |
Riktlinjer
Rubriker
- Använd rubriker för att skapa en bra struktur på sidan:
- Rätt rubriksättning av en text är kritiskt för att läsaren ska kunna hitta det innehåll som eftersökt utan att behöva läsa hela sidan. Rubriker fungerar på samma sätt för användare av skärmläsare.
- Dela därför in texten utifrån vad den handlar om och namnge rubriker utifrån det (se mer om namngivning nedan). Tänk på att en saknad mellanrubrik ofta leder till att användare inte hittar det som eftersöks.
- Läs mer om Rubriker på webbsidor
- Använd rätt rubriknivåer:
- H1 ska bara förekomma en gång på en sida
- Hoppa inte över rubriknivåer då det försvårar förståelse av sidostrukturen och läsbarheten. (Använd inte en H3 om den inte föregås av en H2 och så vidare).
- H2 för högerkolumn är i storlek som en H4 men är uppmärkt som H2 för att ge rätt förståelse av strukturen för en användare med skärmläsare.
- Se webbriktlinjer.se (Skapa rubriker med h-element) .
- Namngivning:
- Rubriker ska inte vara för långa
- Välj rubriker som beskriver innehållet.
- Titeln ska vara unik och ska börja med det unika och mest relevanta
- När de finns flera sidor som hör i hop, till exempel en så kallad "wizard" i flera steg, inkludera aktuellt steg i titeln
-
Se "Namngivning" under Gemensamt för komponenter .
Brödtext och läsbarhet
- En längre sammanhängande text ska delas in i stycken för att ge bra läsbarhet, läs "Använd rubriker för att skapa en bra struktur på sidan" ovan.
- Använd sparsamt med grafiska markeringar som kursiv och fet stil i löptext på en webbsida
- Fet stil används framför allt för att markera nyckelord i en text
- Kursiv text kan precis som i tryckt text användas för att markera betoning. Tänk på att betona innehåll med elementet "em" och inte bara kursivering ("i"), eftersom det inte går att kursivera skärmläsarens tal.
- Vill du ge titlar på skrifter och liknande en grafisk markering är citattecken att föredra framför kursiv text