Go to top

Typography

Typography

Typography refers to the consistent selection and application of fonts, font sizes, line spacing, and text styles (such as bold or italic) throughout a website or application.

Type Scale

A type scale is a systematic arrangement of font sizes used in design to maintain consistency and hierarchy in text elements. It ensures that text, such as headings and body content, is displayed in a harmonious and visually appealing manner by using a predefined set of size increments.

H1
  • Font family: Lato
  • Weight: 700 (Bold)
  • Size: 40px / 30pt
  • Line height: 1.2
  • Margin bottom: 20px

Heading 1

H2
  • Font family: Lato
  • Weight: 700 (Bold)
  • Size: 32px / 24pt
  • Line height: 1.3
  • Margin bottom: 15px

Heading 2

H3
  • Font family: Lato
  • Weight: 700 (Bold)
  • Size: 26px / 19pt
  • Line height: 1.4
  • Margin bottom: 12px

Heading 3

H4
  • Font family: Lato
  • Weight: 700 (Bold)
  • Size: 21px / 16pt
  • Line height: 1.5
  • Margin bottom: 10px

Heading 4
H5
  • Font family: Lato
  • Weight: 700 (Bold)
  • Size: 19px / 14pt
  • Line height: 1.5
  • Margin bottom: 8px
Heading 5
H6
  • Font family: Lato
  • Weight: 700 (Bold)
  • Size: 16px / 12pt
  • Line height: 1.5
  • Margin bottom: 6px
Heading 6
P
  • Font family: Open Sans
  • Weight: 400 (Regular)
  • Size: 16px / 12pt
  • Line height: 1.6
  • Margin bottom: 1rem

The Quick Brown Fox