Stad Brugge

Design system 1.0

1.2 #Atoms.typography Typography

Toggle example guides Toggle HTML markup

Example

Display title 1

Aenean ut dui interdum, viverra dolor id, viverra enim.
font-family

Domine

font-weight

400

font-size

64px

line-height

72px

Display title 2

Aenean ut dui interdum, viverra dolor id, viverra enim.
font-family

Domine

font-weight

400

font-size

40px

line-height

45px

Display title 3

Aenean ut dui interdum, viverra dolor id, viverra enim.
font-family

Domine

font-weight

400

font-size

24px

line-height

27px

h1.

Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.

font-family

Poppins

font-weight

700

font-size

40px

line-height

45px

h2.

Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.

font-family

Poppins

font-weight

700

font-size

32px

line-height

36px

h3.

Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.

font-family

Poppins

font-weight

700

font-size

28px

line-height

31.5px

h4.

Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.

font-family

Poppins

font-weight

700

font-size

24px

line-height

22.5px

h5.

Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.
font-family

Poppins

font-weight

700

font-size

16px

line-height

18px

h6.

Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.
font-family

Poppins

font-weight

700

font-size

16px

line-height

18px

paragraph normal

Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.

font-family

Poppins

font-weight

400

font-size

16px

line-height

24px

paragraph small

Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.

font-family

Poppins

font-weight

400

font-size

14px

line-height

18px

paragraph extra small

Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.

font-family

Poppins

font-weight

400

font-size

12px

line-height

18px

Markup: scss/styleguide/atoms/typography/typography.html 
<div class="app-body">
  <div class="container">
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>Display title 1</p>
        <div class="h1-display">Aenean ut dui interdum, viverra dolor id, viverra enim.</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Domine</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>64px</p>
          <strong>line-height</strong><p>72px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>Display title 2</p>
        <div class="h2-display">Aenean ut dui interdum, viverra dolor id, viverra enim.</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Domine</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>40px</p>
          <strong>line-height</strong><p>45px</p>
        </div>
      </div>
    </div>

    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>Display title 3</p>
        <div class="h3-display">Aenean ut dui interdum, viverra dolor id, viverra enim.</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Domine</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>24px</p>
          <strong>line-height</strong><p>27px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h1.</p>
        <h1>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h1>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>40px</p>
          <strong>line-height</strong><p>45px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h2.</p>
        <h2>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h2>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>32px</p>
          <strong>line-height</strong><p>36px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h3.</p>
        <h3>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h3>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>28px</p>
          <strong>line-height</strong><p>31.5px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h4.</p>
        <h4>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h4>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>24px</p>
          <strong>line-height</strong><p>22.5px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h5.</p>
        <h5>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h5>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>16px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h6.</p>
        <h6>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h6>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>16px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>paragraph normal</p>
        <p>Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.</p>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>16px</p>
          <strong>line-height</strong><p>24px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>paragraph small</p>
        <p class="text-small">Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.</p>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>14px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>paragraph extra small</p>
        <p class="text-xsmall">Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.</p>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>12px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
  </div>
</div>
Source: ../client/scss/styleguide/atoms/typography/_typography.scss, line 1