Typography

Webflow provides a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

Headings

Use the separate class for each size to overwrite visual style while maintaining the proper semantic order.

.h0 Class

H0 — 3.75rem (60px) / 1

Semantic H1

H1 — 3.125REm (50px) / 1.1
H1 Class
H1

Semantic H2

H2 — 2.375rem (38px) / 1.2
H2 Class
H2

Semantic H3

H3 — 2rem (32px) / 1.3
H3 Class
H3

Semantic H4

H4 — 1.2rem (20px) / 1.3
H4 Class
H4
Semantic H5
H5 — 1rem (16px) / 1.3
H5 Class
H5
Semantic h6
H6 — 0.875rem (14px) / 1.3
H6 Class
H6

Body

Graphik is the standard typeface for Webflow on the web for large texts, headings and paragraphs, and Roboto Mono is used in some cases for small texts and for H6 (h6 headings).

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-xl — 1.5rem (24px) / 1.5

Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.

Paragraph-l — 1.125rem (18px) / 1.6

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world. Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.

Paragraph — 1rem (16px) / 1.7

Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities. We need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Paragraph-s — 0.875REM (14px) / 1.6
Design. Build. Launch.
Eyebrow — 0.875rem (14px) / 1.5
Design. Build. Launch.
Caption — 0.75rem (12px) / 1.3
  • 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.
  • 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.
  • Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
  1. 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.
  2. 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.
  3. 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.
List — 1rem (16px) / 1.7