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.

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.


Hjälpklasser

Klass Beskrivning
.small-text Lägg till klassen small-text högst upp i projektet om hela e-tjänsten ska ha typografin som visas på den här sidan. Ska endast delar av e-tjänsten ha mindre textstorlek så sätts klassen för respektive sektion.
.text-sm Lägg till klassen text-sm för textstorlek 15px
.text-xs Lägg till klassen text-xs för textstorlek 14px
.text-underline Lägg till klassen text-underline för understruken text