Typography

Inter is our primary typeface — a versatile, precision-crafted font designed to perform across every touchpoint, from digital interfaces and product UI to marketing materials and large-format signage. Spanning nine weights (100–900) with dedicated designs at Thin, Regular, and Black, Inter covers over 2,000 glyphs across 147 languages, with a true italic and two optical sizes: Text and Display.

Inter & Inter Display
Aa Bb Cc 1 2 3

Secondary typeface

Haffer XH
Aa Bb Cc 1 2 3

Typeface

Inter is a versatile typeface family designed specifically for user interfaces and digital content. Its careful attention to legibility makes it perfect for both display and body text. The Text variant prioritises legibility at small sizes through a tall x-height and contrast-enhancing details like ink traps, while the Display variant delivers clean lines and refined curves for large-scale type. A robust set of OpenType features — including contextual alternates, slashed zero, and tabular figures — supports precise typesetting across any layout. One of the most widely used typefaces in the world, Inter has proven itself across operating systems, advertising, airport wayfinding, NASA instrumentation, and medical equipment.

Inter

Aa Bb Cc

Our primary typeface for all applications. Use Inter for body text, UI elements, and smaller headings.

Inter Display

Aa Bb Cc

Use Inter Display for large headings and display text. It's optimized for larger sizes with tighter spacing.

Character Set

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Inter supports extensive language coverage including Latin, Cyrillic, and Greek scripts.

Type Scale

Our type scale provides a harmonious hierarchy for all text content. Each style has a specific purpose and application.

Display

Inter Display / 64px / Semibold / -3% letter-spacing / 1.8 line-height

Heading XL

Inter Display / 32px / Semibold / -2% letter-spacing / 1.2 line-height

Heading Large

Inter / 28px / Semibold / -2% letter-spacing / 1.2 line-height

Heading Medium

Inter / 20px / Semibold / -2% letter-spacing / 1.3 line-height

Body Large - The quick brown fox jumps over the lazy dog

Inter / 16px / Regular / -1% letter-spacing / 1.6 line-height

Body - The quick brown fox jumps over the lazy dog

Inter / 14px / Regular / -1% letter-spacing / 1.6 line-height

Caption - The quick brown fox jumps over the lazy dog

Inter / 12px / Regular / 0% letter-spacing / 1.5 line-height

Micro - The quick brown fox jumps over the lazy dog

Inter / 10px / Regular / 0% letter-spacing / 1.4 line-height

Font Weights

Inter offers multiple weights, but we use a focused selection to maintain consistency and clarity in our communications.

Regular - 400

The quick brown fox jumps over the lazy dog

Use for body text and most UI text elements.

Medium - 500

The quick brown fox jumps over the lazy dog

Use for emphasis and active states in UI elements.

Semibold - 600

The quick brown fox jumps over the lazy dog

Use for headings, buttons, and strong emphasis.

Weight Usage

  • Regular (400): Body text, descriptions, captions
  • Medium (500): Buttons, navigation, subtle emphasis
  • Semibold (600): Headings, titles, strong emphasis
  • Never use weights below 400 (Regular)
  • Avoid using too many weights in a single design

Guidelines

Hierarchy

  • Establish clear visual hierarchy with size and weight
  • Use one display or XL heading per page
  • Maintain consistent heading levels (don't skip levels)
  • Limit body text to 65-75 characters per line

Spacing

  • Maintain adequate line height for readability
  • Use consistent spacing between elements
  • Add extra space before headings to separate sections
  • Tighten letter-spacing for large headings

Best Practices

  • Use Inter Display only for headings 24px and above
  • Never use all caps for more than a few words
  • Avoid justified text alignment
  • Ensure sufficient color contrast for readability