Skip to main content

Typography

Waypoint uses Unica77 Cohere Web as its primary typeface. This custom font establishes hierarchy, improves readability, and reinforces our brand identity across all products.

Type Scale Ramp

Complete typography scale from design tokens. Each size shows the font size and corresponding line height.

Extra Small (xs)fontSize: 0.75rem • lineHeight: 1rem
Display xs
typography.fontSize.xs • typography.lineHeight.xs
Small (sm)fontSize: 0.875rem • lineHeight: 1.25rem
Display sm
typography.fontSize.sm • typography.lineHeight.sm
Base (base)fontSize: 1rem • lineHeight: 1.5rem
Display base
typography.fontSize.base • typography.lineHeight.base
Medium (md)fontSize: 1.125rem • lineHeight: 1.75rem
Display md
typography.fontSize.md • typography.lineHeight.md
Large (lg)fontSize: 1.25rem • lineHeight: 1.75rem
Display lg
typography.fontSize.lg • typography.lineHeight.lg
Extra Large (xl)fontSize: 1.5rem • lineHeight: 2rem
Display xl
typography.fontSize.xl • typography.lineHeight.xl
2X Large (2xl)fontSize: 1.875rem • lineHeight: 2.25rem
Display 2xl
typography.fontSize.2xl • typography.lineHeight.2xl
3X Large (3xl)fontSize: 2.25rem • lineHeight: 2.5rem
Display 3xl
typography.fontSize.3xl • typography.lineHeight.3xl
4X Large (4xl)fontSize: 3rem • lineHeight: 3rem
Display 4xl
typography.fontSize.4xl • typography.lineHeight.4xl
5X Large (5xl)fontSize: 3.75rem • lineHeight: 3.75rem
Display 5xl
typography.fontSize.5xl • typography.lineHeight.5xl
6X Large (6xl)fontSize: 4.5rem • lineHeight: 4.5rem
Display 6xl
typography.fontSize.6xl • typography.lineHeight.6xl
7X Large (7xl)fontSize: 6rem • lineHeight: 6rem
Display 7xl
typography.fontSize.7xl • typography.lineHeight.7xl
8X Large (8xl)fontSize: 8rem • lineHeight: 8rem
Display 8xl
typography.fontSize.8xl • typography.lineHeight.8xl

Font Families

Sans Serif (Primary)

Primary typeface for Cohere. Used for all headings, body text, and UI elements.

font-family: Unica77 Cohere

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Monospace

Used for code snippets, technical content, and inline code elements.

font-family: Cohere Mono

const hello = "world";

function example() { return true; }

Line Height Tokens

Line height values that correspond to each font size token.

xs
1rem
Matches fontSize.xs
sm
1.25rem
Matches fontSize.sm
base
1.5rem
Matches fontSize.base
md
1.75rem
Matches fontSize.md
lg
1.75rem
Matches fontSize.lg
xl
2rem
Matches fontSize.xl
2xl
2.25rem
Matches fontSize.2xl
3xl
2.5rem
Matches fontSize.3xl
4xl
3rem
Matches fontSize.4xl
5xl
3.75rem
Matches fontSize.5xl
6xl
4.5rem
Matches fontSize.6xl
7xl
6rem
Matches fontSize.7xl
8xl
8rem
Matches fontSize.8xl

Font Weights

Thinfont-thin • 100
Unica77 Cohere Thin
Extralightfont-extralight • 200
Unica77 Cohere Extralight
Lightfont-light • 300
Unica77 Cohere Light
Normalfont-normal • 400
Unica77 Cohere Normal
Mediumfont-medium • 500
Unica77 Cohere Medium
Semiboldfont-semibold • 600
Unica77 Cohere Semibold
Boldfont-bold • 700
Unica77 Cohere Bold
Extraboldfont-extrabold • 800
Unica77 Cohere Extrabold
Blackfont-black • 900
Unica77 Cohere Black

Usage Example

How to Use Typography Tokens

React/JSX Example:

<div style={{
  fontSize: '1.25rem',       /* lg */
  lineHeight: '1.75rem',     /* lg */
  fontWeight: '600',         /* semibold */
  fontFamily: 'Unica77 Cohere, system-ui, sans-serif'
}}>
  Your text here
</div>

CSS Example:

.my-heading {
  font-size: 1.25rem;       /* typography.fontSize.lg */
  line-height: 1.75rem;     /* typography.lineHeight.lg */
  font-weight: 600;         /* typography.fontWeight.semibold */
  font-family: Unica77 Cohere, system-ui, sans-serif;
}

Best Practices

  • Hierarchy: Use the type scale to establish clear visual hierarchy. Headings should always use semibold or bold weights.
  • Line Length: Keep body text between 45-75 characters per line for optimal readability.
  • Line Height: Use appropriate line heights to improve readability (1.5-1.75 for body text).
  • Contrast: Ensure sufficient contrast between text and background colors using our color system.
  • Font Weights: Use Regular (400) for body text, Medium (500) for emphasis, and Bold (700) for headings and important elements.