SB2 Typography

Webflow provides a constrained set of typographic styles for various functional roles, all set in our WF Visual Sans typeface.

Headings

WF Visual Sans is the typeface that we use for all our headings from h1 to h6

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

H0 Class

H0 — 8rem (128px) / 1.04

Semantic H1

H1 — 5.25REm (84px) / 1.04
Heading 1
H1

Semantic H2

H2 — 3.75rem (60px) / 1.04
Heading 2
H2

Semantic H3

H3 — 2rem (32px) / 1.04
Heading 3
H3

Semantic H4

H4 — 1.5rem (24px) / 1.3
Heading 4
H4
Semantic H5
H5 — 1.125rem (18px) / 1.3
Heading 5
H5
Semantic h6
H6 — 1rem (16px) / 1.3
Heading 6
H6

Body

WF Visual Sans Text is the standard typeface we use in our body. Larger texts like all our semantic and stylistic headings however, use WF Visual Sans.

WF Visual Sans Text Semi Bold is the weight used for all bold type.

Folder with our webfonts (woff2) can be found in our Google Drive.

BOILERPLATE

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-xxl — 2.125rem (34px) / 1.5

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 — 1rem (16px) / 1.6

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 — 0.9375rem (15px) / 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 — 0.875rem (14px) / 1.6

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.8125REM (13px) / 1.6
BOILERPLATE
Design. Build. Launch.
Eyebrow — 0.9375rem (15px) / 1.3
Design. Build. Launch.
Caption — 0.75rem (12px) / 1.3
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.6

Examples

The following are just some of our most used pairings.

All eyes on me.

And this would be the subheading right below it.

H0 + Paragraph-xxl

This would be the heading.

And this would be the subheading right below it.

H1 + paragraph-xl

This would be the heading.

And this would be regular copy right below it.

h3 + Paragraph