Typographie

The main font styles are set to the body, h1 to h6 and paragraph tags. Special stylings can be set by using defined classes.

Headings

Use the heading element of Webflow and choose from h1 to h6.

H1 Heading

font: Haufemerriweather Sans | font-weight: 200 (Extra-Light) | font-size: 36px (mobile landscape: 30px) | line-height: 1.2em | margin-top: 0 | margin-bottom: 15px

H2 Heading

font: Haufemerriweather Sans | font-weight: 200 (Extra-Light) | font-size: 30px (mobile landscape: 24px) | line-height: 1.2em | margin-top: 30px | margin-bottom: 15px

H3 Heading

font: Haufemerriweather Sans | font-weight: 200 (Extra-Light) | font-size: 24px (mobile landscape: 21px) | line-height: 1.2em | margin-top: 30px | margin-bottom: 15px

H4 Heading

font: Haufemerriweather Sans | font-weight: 200 (Extra-Light) | font-size: 21px (mobile landscape: 18px) | line-height: 1.2em | margin-top: 30px | margin-bottom: 10px

H5 Heading

font: Haufemerriweather Sans | font-weight: 200 (Extra-Light) | font-size: 18px (mobile landscape: 16px) | line-height: 1.2em | margin-top: 15px | margin-bottom: 10px

H6 Heading

font: Haufemerriweather Sans | font-weight: 200 (Extra-Light) | font-size: 14px | line-height: 1.2em | margin-top: 15px | margin-bottom: 10px

Headings as separation/for topics

Use the heading element of Webflow, choose h2 and add the class c-heading-seperator. The class can be added to all h-tags but should only be used with h2 headings, since those are the headings dividing a page into different topics.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraphs

Use the paragraph element of Webflow and add a class if needed.

standard paragraph

Choose the paragraph element of Webflow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font: Haufemerriweather Sans | font-weight: 300 (Light) | font-size: 18px (mobile landscape: 16px) | line-height: 1.7em | margin-bottom: 15px

paragraph with serif

Choose the paragraph element of Webflow and add the class c-text--serif.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font: Haufemerriweather

bold text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-weight: 700 (Bold)

italic text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-style: italic

bold italic text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-weight: 700 (Bold) | font-style: italic

bold text serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font: Haufemerriweather | font-weight: 700 (Bold)

italic text serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font: Haufemerriweather | font-style: italic

italic bold text serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font: Haufemerriweather | font-weight: 700 (Bold) | font-style: italic

Paragraphs in different sizes

Use the paragraph element of Webflow and add the class c-text-xxxl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 40px  (mobile landscape: 36px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-xxl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 36px (mobile landscape: 30px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-xl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 30px (mobile landscape: 24px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-l.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 24px (mobile landscape: 21px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-m.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 21px (mobile landscape: 18px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-normal.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font: Haufemerriweather Sans | font-weight: 300 (Light) | font-size: 21px (mobile landscape: 16px) | line-height: 1.6em | font-style: regular

Use the paragraph element of Webflow and add the class c-text-s.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 16px (mobile landscape: 14px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-xs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 14px (mobile landscape: 12px) | line-height: 1.6em

Use the paragraph element of Webflow and add the class c-text-xxs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 12px (mobile landscape: 10px) | line-height: 1.6em

Lists

Use the list element of Webflow and choose the ordered or unordered list. Add a class if needed.

Ordered list

Use the list element of Webflow and choose ordered list.

  1. Lorem ipsum dolor sit amet
  2. Suspendisse varius enim in eros elementum tristique
  3. Aenean faucibus nibh

Unordered list

Use the list element of Webflow and choose unordered list.

List with green checkmarks

Use the list element of Webflow and choose unordered list. Add the class c-checklist.

List with red checkmarks

Use the list element of Webflow and choose unordered list. Add the class c-checklist.

List with crosses

Use the list element of Webflow and choose unordered list. Add the class c-crosslist.

Blockquote

Use the c-blockquote element in the Symbols.

Remember to unlink the element from symbol before editing the content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Max Mustermann

Icon Font

Glyphicons basic

Add the c-glyphicon class to the text. You can copy all available icons on Glyphicons.com (simply hover over the chosen icon, and click on the text of the overlay to copy the icon to your clipboard).

  