Element

Typography

SCSS Location: /styles/scss/partial/_typography.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Headings

H1

  • Font Family: "Lato Black", sans-serif;
  • Font Size:
    • Desktop: 52px
    • Mobile: 46px
  • Line Height:
    • Desktop: 54px
    • Mobile: 54px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


H2

  • Font Family: "Lato Black", sans-serif;
  • Font Size:
    • Desktop: 30px
    • Mobile: 26px
  • Line Height:
    • Desktop: 36px
    • Mobile: 32px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


H3

  • Font Family: "Lato Bold", sans-serif;
  • Font Size:
    • Desktop: 26px
    • Mobile: 24px
  • Line Height:
    • Desktop: 32px
    • Mobile: 30px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


H4

  • Font Family: "Lato Bold", sans-serif;
  • Font Size:
    • Desktop: 22px
    • Mobile: 20px
  • Line Height:
    • Desktop: 28px
    • Mobile: 26px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


H5

  • Font Family: "Lato Regular", sans-serif;
  • Font Size: 13px
  • Text Transform: Uppercase
The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Body Copy

  • Font Family: "Lato Regular", sans-serif;
  • Font Size: 14px

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, strong text in a paragraph. Duis nulla tellus, cursus quis diam eget, facilisis consequat leo. Morbi rutrum odio ac risus gravida pellentesque eget nec dolor. Quisque sit amet mollis enim. Nullam aliquet vitae orci vitae feugiat. Proin eu euismod risus, vel pellentesque magna.

Vivamus cursus turpis dui, emphasized text in a paragraph. Vestibulum nec porta magna. Morbi quam lorem, sollicitudin bibendum auctor et, rutrum eu sem. Nulla rutrum urna eu justo finibus tincidunt. Donec vehicula diam eget tempus eleifend. Aenean sodales, linked text in a paragraph, sit amet lorem nec lacinia. Sed ultrices placerat est. Suspendisse vitae orci sollicitudin molestie est. Curabitur viverra tincidunt vestibulum. Vivamus consectetur nulla tortor, ultricies commodo nulla semper vel.

Ordered List

  1. The quick brown fox jumps over the lazy dog
  2. Quisque at mi a nunc ornare tincidunt a non diam
    • The quick brown fox jumps over the lazy dog
    • In accumsan ut sapien nec porttitor
    • Quisque vitae libero quis ipsum dignissim efficitur
  3. Morbi sed dapibus nulla
    1. The quick brown fox jumps over the lazy dog
    2. In accumsan ut sapien nec porttitor
    3. Quisque vitae libero quis ipsum dignissim efficitur

Unordered List

  • The quick brown fox jumps over the lazy dog
  • Quisque at mi a nunc ornare tincidunt a non diam
    • The quick brown fox jumps over the lazy dog
    • In accumsan ut sapien nec porttitor
    • Quisque vitae libero quis ipsum dignissim efficitur
  • Morbi sed dapibus nulla
    1. The quick brown fox jumps over the lazy dog
    2. In accumsan ut sapien nec porttitor
    3. Quisque vitae libero quis ipsum dignissim efficitur

Horizontal Rule

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, strong text in a paragraph. Duis nulla tellus, cursus quis diam eget, facilisis consequat leo. Morbi rutrum odio ac risus gravida pellentesque eget nec dolor. Quisque sit amet mollis enim. Nullam aliquet vitae orci vitae feugiat. Proin eu euismod risus, vel pellentesque magna.


Vivamus cursus turpis dui, emphasized text in a paragraph. Vestibulum nec porta magna. Morbi quam lorem, sollicitudin bibendum auctor et, rutrum eu sem. Nulla rutrum urna eu justo finibus tincidunt. Donec vehicula diam eget tempus eleifend. Aenean sodales, linked text in a paragraph, sit amet lorem nec lacinia. Sed ultrices placerat est. Suspendisse vitae orci sollicitudin molestie est. Curabitur viverra tincidunt vestibulum. Vivamus consectetur nulla tortor, ultricies commodo nulla semper vel.