Typography¶

The Carbon Connect type system uses three typefaces, each serving a distinct purpose. Together they create a visual hierarchy that is clear, professional, and accessible.

Typefaces¶

Inter -- Primary Interface Font¶

Inter is designed specifically for screen readability. Its large x-height, open letterforms, and tabular number support make it ideal for data-heavy interfaces like the Carbon Connect dashboard.

Why Inter:

• Optimized for UI contexts at small and medium sizes
• Excellent tabular figures for aligning numbers in tables and dashboards
• Clear letter distinction (no ambiguity between I/l/1 or O/0)
• Extensive language support covering all EU member states

Source Serif Pro -- Editorial Font¶

Source Serif Pro adds warmth and authority to editorial content. It pairs naturally with Inter, sharing similar proportions while providing clear typographic contrast.

Why Source Serif Pro:

• Professional, authoritative appearance for thought leadership content
• Excellent readability at long-form text sizes
• Harmonizes with Inter without clashing
• Strong language support for multilingual content

JetBrains Mono -- Code Font¶

JetBrains Mono provides clear code rendering with increased letter height and distinctive character forms that reduce ambiguity.

Why JetBrains Mono:

• Purpose-built for code readability
• Ligature support for common programming constructs
• Clear distinction between similar characters (0/O, 1/l/I)
• Consistent width for aligned code formatting

Type Scale¶

The type scale follows a modular progression that ensures clear hierarchy at every level.

Headings¶

Body Text¶

Editorial Text¶

Code Text¶

Usage Guidelines¶

Weight Usage¶

Alignment¶

Line Length¶

For optimal readability, constrain line length:

Spacing¶

Responsive Scaling¶

On smaller screens, the type scale adjusts to maintain readability without overwhelming limited space:

Font Loading¶

Web Implementation¶

/* Primary font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Editorial font - Source Serif Pro */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&display=swap');

/* Code font - JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

CSS Custom Properties¶

:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Source Serif Pro', 'Georgia', 'Times New Roman', serif;
  --font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

Fallback Strategy¶

Each typeface has a carefully chosen fallback chain:

Using display=swap ensures text is immediately visible using fallback fonts while custom fonts load asynchronously.