Typografiskt prov
En flerspråkig testsida för rubriker, brödtext, inlineformatering, listor, kryssrutor, tabeller, kod och bilder.
2026-06-21 · 2 min läsning
Visningsrubrik H1
Underrubriken ligger mellan titel och brödtext. Den ska vara lätt att läsa, brytas rent och behålla en lugn rytm på olika språk.
Brödtexten visar den normala lässtilen. Stycket innehåller fet betoning, kursiv betoning, markerad text, borttagen text, infogad text, inlinekod, Ctrl + K, H2O, x2, i18n och en vanlig textlänk.
Liten text passar för bildtexter, notiser och lågmäld metadata.
Sektionsrubrik H2#
Den andra nivån delar upp större avsnitt. Den ska vara tydlig utan att skapa för stort avstånd till brödtexten.
Underrubrik H3#
Den tredje nivån hjälper vid snabb läsning. Den ska skilja sig från vanlig fet text.
Mindre rubrik H4#
Den fjärde nivån passar kompakta grupper, korta steg eller smala exempel.
Etikettrubrik H5
Den femte nivån fungerar som liten etikett över tät text.
Mikrorubrik H6
Den sjätte nivån är minst och ska ändå vara läsbar.
Inlineformatering#
Betoning
Stark text visar huvudpunkten. Betonad text ändrar röst utan att bryta raden.
Teknisk text
Använd astro build för kommandon och Esc för tangenttryck.
Revision
Gammal formulering kan stå nära ny formulering vid granskning.
Anteckning
Markerad text, RTL och notiser testar tät inlineformatering.
Listor och kryssrutor#
- Punktlista med en kort mening.
- Punkt med fet text och
inlinekod.- Inbäddad punkt.
- Punkt med en enkel textreferens.
- Numrerad punkt för första steget.
- Numrerad punkt för andra steget.
- Numrerad punkt med längre rad för att testa radbrytning på mobila skärmar.
- Brödtext
- Standardstilen för längre läsning.
- Underrubrik
- En kort stödjande rad nära en titel.
Tabeller, citat och notiser#
HTML-tabell#
| Element | Användning | Kontroll |
|---|---|---|
| Rubrik | Sidstruktur | Tydlig skala |
| Stycke | Läsflöde | Behaglig rad höjd |
| Kryssruta | Formulärstatus | Tydlig fokus och spacing |
Markdown-tabell#
| Element | Användning | Kontroll |
|---|---|---|
| Länk | Navigering | Tydlig hover och fokus |
| Kod | Teknisk text | Distinkt inline-stil |
| Lista | Grupperat innehåll | Läsbart avstånd |
Citat#
Ett citat ger texten en annan röst samtidigt som läsbredden hålls stabil.
Notis#
Den här notisen använder en liten visuell markör. Den ska förbli lågmäld och tillgänglig i ljust och mörkt tema.
Kodblock#
const formatTitle = ({ title, lang }: { title: string; lang: string }) => {
const label = new Intl.DisplayNames([lang], { type: "language" }).of(lang) || lang;
return `${title} - ${label}`;
};
formatTitle({ title: "Typografiskt prov", lang: "sv" });
Utfällbar sammanfattning
Dolt innehåll testar spacing, fokus och textrytm i ett inbyggt disclosure-element.
Bilder#
