Typography

AssetBook uses Manrope as the primary typeface across all brand communications. Download the font files and implementation guides.

Manrope

A modern, geometric sans-serif typeface with variable font weights from 200 to 800.

Type Scale

H1

120px / 700 / -1% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 120px;
font-weight: 700;
letter-spacing: -1%;

H2

60px / 700 / -1% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 60px;
font-weight: 700;
letter-spacing: -1%;

H3

40px / 700 / -1% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 40px;
font-weight: 700;
letter-spacing: -1%;

H4

32px / 700 / -1% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 32px;
font-weight: 700;
letter-spacing: -1%;

Ingress

32px / 400 / 0% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 32px;
font-weight: 400;
letter-spacing: 0%;

Body

22px / 400 / 0% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 22px;
font-weight: 400;
letter-spacing: 0%;

Small

16px / 400 / 0% letter-spacing
The quick brown fox jumps over the lazy dog
CSS
font-size: 16px;
font-weight: 400;
letter-spacing: 0%;

Web Font Integration

Add this code to your HTML or CSS to use Manrope from Google Fonts:

<!-- HTML <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">

/* CSS */
body {
  font-family: 'Manrope', sans-serif;
}

Typography Guidelines

Best Practices

  • ✓ Use H1 for page titles only (one per page)
  • ✓ Maintain consistent heading hierarchy
  • ✓ Use Ingress style for lead paragraphs
  • ✓ Keep body text at 22px for readability
  • ✓ Use Small text for captions and metadata

Line Height & Spacing

  • • Headings: 1.2-1.3 line height
  • • Body text: 1.5 line height
  • • Paragraph spacing: 1em
  • • Negative letter spacing for large headings
  • • Normal letter spacing for body text