Typografi för e-tjänster

E-tjänster kan ha behov av mindre textstorlek än till exempel en vanlig artikelsida. För att åstadkomma det kan klassen small-text användas antingen för en sektion eller för hela e-tjänsten.

Visuella exempel

H1 - Rubrik 28px (mobil)H1 - Rubrik 32px (desktop/platta)

Brödtext 1rem(16px) Nunc eleifend tortor id leo pellentesque auctor. Phasellus sit amet accumsan metus. Nam arcu quam, egestas ac elit quis, venenatis fermentum nisi. Maecenas magna ex, egestas nec gravida sit amet, iaculis eu velit. Sed pretium rhoncus lectus, ut pretium ligula. Sed hendrerit quam id iaculis suscipit. Suspendisse ac mattis est. Nullam id sapien ut eros ultrices fringilla vel eget eros. Praesent tincidunt hendrerit velit in dignissim.

H2 Rubrik 22px (mobil)H2 Rubrik 24px (desktop/platta)

Brödtext 1rem(16px) Nunc eleifend tortor id leo pellentesque auctor. Phasellus sit amet accumsan metus. Nam arcu quam, egestas ac elit quis, venenatis fermentum nisi. Maecenas magna ex, egestas nec gravida sit amet, iaculis eu velit. Sed pretium rhoncus lectus, ut pretium ligula. Sed hendrerit quam id iaculis suscipit. Suspendisse ac mattis est. Nullam id sapien ut eros ultrices fringilla vel eget eros. Praesent tincidunt hendrerit velit in dignissim.

H3 Rubrik 18px (mobil)H3 Rubrik 20px (desktop/platta)

Brödtext 1rem(16px) ed pretium rhoncus lectus, ut pretium ligula. Sed hendrerit quam id iaculis suscipit. Suspendisse ac mattis est. Nullam id sapien ut eros ultrices fringilla vel eget eros. Praesent tincidunt hendrerit velit in dignissim.

Brödtext 1rem(16px) unc eleifend tortor id leo pellentesque auctor. Phasellus sit amet accumsan metus. Nam arcu quam, egestas ac elit quis, venenatis fermentum nisi. Maecenas magna ex, egestas nec gravida sit amet, iaculis eu velit. Sed pretium rhoncus lectus, ut pretium ligula. Sed hendrerit quam id iaculis suscipit.

Riktlinjer

  • Undvik stora textmassor.
  • Använd korrekt hierarkisk rubriksättning; efter H1 används H2, efter H2 används H3 osv. ner till H6. Det är extra viktigt för de som använder skärmläsare. Finns behovet att ha en mindre/större rubrik rent visuellt ska rubriken märkas med rätt hierarki och sedan ändras utseendet med hjälp av .h1 till .h6.
  • Betona viktiga ord med fet stil.

Bra att tänka på

  • Det är främst om tjänsten har många komponenter som typografi för e-tjänster lämpar sig.