Typografi

Textstorlekar

Det finns css-klasser och scss variabler för de vanligaste textstorlekarna.

• font-size-xxl: Används av <h1>

  • Css: .font-size-xxl
  • Scss: $font-size-xxl

• font-size-xl: Används av <h2>

  • Css: .font-size-xl
  • Scss: $font-size-xl
  • HTML: <h2>

• font-size-l: Används av <h3> - <h4>

  • Css: .font-size-l
  • Scss: $font-size-l

• font-size-base: Standardstorleken på sidan. Används i ex. brödtext

  • Css: .font-size-base
  • Scss: $font-size-base

• font-size-s

  • Css: .font-size-s
  • Scss: $font-size-s

• font-size-xs

  • Css: .font-size-xs
  • Scss: $font-size-xs

Line height

• line-height-base: Sätter line height på alla textelement förutom rubriker
  • Css: .line-height-base
  • Scss: $line-height-base
• line-height-heading: Sätter line height på alla textelement rubriker
  • Css: .line-height-heading
  • Scss: $line-height-heading

Typsnitt

Det finns två variabler som används till att bestämma vilka typsnitt som ska användas.

• font-primary: Det primära typsnittet på hemsidan. Används för brödtext och dyl.
  • Css: .font-primary
  • Scss: $font-primary
• font-secondary: Det sekundära typsnittet på hemsidan. Används bland annat till rubriker.
  • Css: .font-secondary
  • Scss: $font-secondary