MWG Style Guide

Typography

Use the CSS class names below to display each font style.

Heading

<h1 class="typography-headline-136-medium">lorem ipsum dolor sit amet</h1>

lorem ipsum dolor sit amet

.typography-headline-136-medium

lorem ipsum dolor sit amet

.typography-headline-112-medium

lorem ipsum dolor sit amet

.typography-headline-96-medium

lorem ipsum dolor sit amet

.typography-headline-80-medium
lorem ipsum dolor sit amet
.typography-headline-64-medium
lorem ipsum dolor sit amet
.typography-headline-56-medium
lorem ipsum dolor sit amet
.typography-headline-48-medium
lorem ipsum dolor sit amet
.typography-headline-40-medium
lorem ipsum dolor sit amet
.typography-headline-32-medium
lorem ipsum dolor sit amet
.typography-headline-16-medium

Subheading

<span class="typography-subheadline-16-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-48-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-40-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-40-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-32-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-32-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-24-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-24-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-16-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.typography-subheadline-16-bold

Body

<span class="typography-body-14-regular">Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Duis aute irure dolor in reprehenderit in.
  2. Consectetur adipiscing elit.
  3. Ullamco laboris nisi ut aliquip ex ea.
  • Duis aute irure dolor in reprehenderit in.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Duis aute irure dolor in reprehenderit in.
  • Ut enim ad minim veniam, quis nostrud.
  • Duis aute irure dolor in reprehenderit in.
.typography-body-24-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Ullamco laboris nisi ut aliquip ex ea.
  2. Ut enim ad minim veniam, quis nostrud.
  3. Sunt in culpa qui officia deserunt mollit.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Velit esse cillum dolore eu fugiat nulla.
  • Ut enim ad minim veniam, quis nostrud.
  • Excepteur sint occaecat cupidatat non.
  • Velit esse cillum dolore eu fugiat nulla.
  • Duis aute irure dolor in reprehenderit in.
.typography-body-24-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Lorem ipsum dolor sit amet.
  2. Ut enim ad minim veniam, quis nostrud.
  3. Excepteur sint occaecat cupidatat non.
  • Lorem ipsum dolor sit amet.
  • Duis aute irure dolor in reprehenderit in.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Consectetur adipiscing elit.
  • Duis aute irure dolor in reprehenderit in.
  • Lorem ipsum dolor sit amet.
.typography-body-24-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Sunt in culpa qui officia deserunt mollit.
  2. Excepteur sint occaecat cupidatat non.
  3. Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
  • Ut enim ad minim veniam, quis nostrud.
  • Ut enim ad minim veniam, quis nostrud.
  • Consectetur adipiscing elit.
  • Ut enim ad minim veniam, quis nostrud.
  • Excepteur sint occaecat cupidatat non.
.typography-body-18-tall-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Velit esse cillum dolore eu fugiat nulla.
  2. Lorem ipsum dolor sit amet.
  3. Ullamco laboris nisi ut aliquip ex ea.
  • Velit esse cillum dolore eu fugiat nulla.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Duis aute irure dolor in reprehenderit in.
  • Sunt in culpa qui officia deserunt mollit.
  • Velit esse cillum dolore eu fugiat nulla.
  • Lorem ipsum dolor sit amet.
.typography-body-18-tall-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Sed do eiusmod tempor incididunt.
  2. Sunt in culpa qui officia deserunt mollit.
  3. Sed do eiusmod tempor incididunt.
  • Excepteur sint occaecat cupidatat non.
  • Velit esse cillum dolore eu fugiat nulla.
  • Consectetur adipiscing elit.
  • Sed do eiusmod tempor incididunt.
  • Ut enim ad minim veniam, quis nostrud.
  • Sed do eiusmod tempor incididunt.
.typography-body-18-tall-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Consectetur adipiscing elit.
  2. Duis aute irure dolor in reprehenderit in.
  3. Sunt in culpa qui officia deserunt mollit.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Duis aute irure dolor in reprehenderit in.
  • Velit esse cillum dolore eu fugiat nulla.
  • Sunt in culpa qui officia deserunt mollit.
  • Excepteur sint occaecat cupidatat non.
.typography-body-18-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Sed do eiusmod tempor incididunt.
  2. Excepteur sint occaecat cupidatat non.
  3. Ut enim ad minim veniam, quis nostrud.
  • Consectetur adipiscing elit.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Ut enim ad minim veniam, quis nostrud.
  • Excepteur sint occaecat cupidatat non.
  • Consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
.typography-body-18-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Sed do eiusmod tempor incididunt.
  • Ut enim ad minim veniam, quis nostrud.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Sunt in culpa qui officia deserunt mollit.
  • Lorem ipsum dolor sit amet.
  • Excepteur sint occaecat cupidatat non.
  • Ullamco laboris nisi ut aliquip ex ea.
.typography-body-18-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Ullamco laboris nisi ut aliquip ex ea.
  2. Ullamco laboris nisi ut aliquip ex ea.
  3. Sed do eiusmod tempor incididunt.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Excepteur sint occaecat cupidatat non.
  • Excepteur sint occaecat cupidatat non.
  • Excepteur sint occaecat cupidatat non.
  • Duis aute irure dolor in reprehenderit in.
  • Ut enim ad minim veniam, quis nostrud.
.typography-body-16-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Ullamco laboris nisi ut aliquip ex ea.
  2. Lorem ipsum dolor sit amet.
  3. Ut enim ad minim veniam, quis nostrud.
  • Velit esse cillum dolore eu fugiat nulla.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Duis aute irure dolor in reprehenderit in.
  • Consectetur adipiscing elit.
  • Sunt in culpa qui officia deserunt mollit.
  • Lorem ipsum dolor sit amet.
.typography-body-16-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Ullamco laboris nisi ut aliquip ex ea.
  2. Lorem ipsum dolor sit amet.
  3. Consectetur adipiscing elit.
  • Velit esse cillum dolore eu fugiat nulla.
  • Sunt in culpa qui officia deserunt mollit.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Excepteur sint occaecat cupidatat non.
  • Ut enim ad minim veniam, quis nostrud.
  • Excepteur sint occaecat cupidatat non.
.typography-body-16-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Velit esse cillum dolore eu fugiat nulla.
  2. Lorem ipsum dolor sit amet.
  3. Consectetur adipiscing elit.
  • Duis aute irure dolor in reprehenderit in.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Excepteur sint occaecat cupidatat non.
  • Lorem ipsum dolor sit amet.
.typography-body-14-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Velit esse cillum dolore eu fugiat nulla.
  2. Consectetur adipiscing elit.
  3. Velit esse cillum dolore eu fugiat nulla.
  • Duis aute irure dolor in reprehenderit in.
  • Consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
  • Velit esse cillum dolore eu fugiat nulla.
  • Sed do eiusmod tempor incididunt.
  • Ullamco laboris nisi ut aliquip ex ea.
.typography-body-14-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Sed do eiusmod tempor incididunt.
  2. Duis aute irure dolor in reprehenderit in.
  3. Duis aute irure dolor in reprehenderit in.
  • Consectetur adipiscing elit.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Excepteur sint occaecat cupidatat non.
  • Excepteur sint occaecat cupidatat non.
  • Sed do eiusmod tempor incididunt.
  • Ut enim ad minim veniam, quis nostrud.
.typography-body-14-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Duis aute irure dolor in reprehenderit in.
  2. Consectetur adipiscing elit.
  3. Consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
  • Duis aute irure dolor in reprehenderit in.
  • Excepteur sint occaecat cupidatat non.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Duis aute irure dolor in reprehenderit in.
  • Sunt in culpa qui officia deserunt mollit.
.typography-body-12-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Lorem ipsum dolor sit amet.
  2. Velit esse cillum dolore eu fugiat nulla.
  3. Duis aute irure dolor in reprehenderit in.
  • Velit esse cillum dolore eu fugiat nulla.
  • Sed do eiusmod tempor incididunt.
  • Velit esse cillum dolore eu fugiat nulla.
  • Ullamco laboris nisi ut aliquip ex ea.
  • Consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
.typography-body-12-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  1. Sunt in culpa qui officia deserunt mollit.
  2. Sed do eiusmod tempor incididunt.
  3. Sunt in culpa qui officia deserunt mollit.
  • Duis aute irure dolor in reprehenderit in.
  • Ut enim ad minim veniam, quis nostrud.
  • Duis aute irure dolor in reprehenderit in.
  • Sed do eiusmod tempor incididunt.
  • Sed do eiusmod tempor incididunt.
  • Sed do eiusmod tempor incididunt.
.typography-body-12-regular

Legal

<small class="typography-legal-10-regular">Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt.</small>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id..typography-legal-12-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id..typography-legal-12-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id..typography-legal-12-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id..typography-legal-10-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id..typography-legal-10-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id..typography-legal-10-bold