Using typography on web

Typography plays a key role in Sendible’s brand expression — it shapes how our message is perceived, guides users through content, and reinforces our tone of voice.

placeholder-img-white-1

We apply typography intentionally across different surfaces — from bold hero statements to quiet supporting text — to create hierarchy, improve legibility, and build brand consistency across all touchpoints.

We’ve defined a scalable, responsive type system to ensure content adapts seamlessly across desktop, tablet, and mobile.

Type styles

Display styles

Display styles are 54px and above, used for impactful storytelling moments, mostly in hero areas or key brand statements. They establish brand tone and visual presence.

Name
Name
Name
Name
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl

Display styles use tight letter spacing and generous line height for visual impact. These are mobile-optimized to scale down and preserve readability.

Heading styles

Display styles are 54px and above, used for impactful storytelling moments, mostly in hero areas or key brand statements. They establish brand tone and visual presence.

Name
Name
Name
Name
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl

Body styles

Display styles are 54px and above, used for impactful storytelling moments, mostly in hero areas or key brand statements. They establish brand tone and visual presence.

Name
Name
Name
Name
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl

Utility & UI Text

Display styles are 54px and above, used for impactful storytelling moments, mostly in hero areas or key brand statements. They establish brand tone and visual presence.

Name
Name
Name
Name
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl
Heading XL
Medium
92px/5.75rem
Letter spacing: -2.3px
Line height: 1
Sentence case
Aa

Major landing statements

typography.heading.xl

Emphasis with IBM Plex Serif Italics

We use IBM Plex Serif Italic exclusively as a stylistic accent within headings. It adds a touch of personality and visual nuance, especially when we want to highlight a specific word that carries meaning or contrast.

Emphasis Styling Rules

Name
Name
Heading XL
Heading XL
Heading XL
Heading XL

Type scaling

Dynamic scaling ensures visual harmony and accessibility across all screen sizes. Here’s how Sendible’s typography adapts:

Responsive behaviour

Name
Name
Heading XL
Heading XL
Heading XL
Heading XL
Heading XL
Heading XL

Scaling principles

  • Large display styles (92px–54px) scale down on mobile to Heading SM (42px) or XS (32px).
  • Subheadings and body styles (32px–16px) scale down one level (e.g., 20px → 18px).
  • Caption-level text (14px, 12px) remains static to preserve structure in UI components.