Font Families

Playfair Display

--font-display

Shift Left or Stay Right?

Font Family Playfair Display, Georgia, serif

Usage Hero titles, article titles, major headings

Aa 400

Aa 500

Aa 600

Aa 700

Text XS (0.75rem) - Shift Left or Stay Right?...

Text SM (0.875rem) - Shift Left or Stay Right?...

Text Base (1rem) - Shift Left or Stay Right?...

Text LG (1.125rem) - Shift Left or Stay Right?...

Text XL (1.25rem) - Shift Left or Stay R...

Fraunces

--font-headline

Snowflake & Databricks Lost the Plot

Font Family Fraunces, Georgia, serif

Usage Section headings, emphasis, callout titles

Aa 400

Aa 500

Aa 600

Aa 700

Text XS (0.75rem) - Snowflake & Databricks Lost th...

Text SM (0.875rem) - Snowflake & Databricks Lost th...

Text Base (1rem) - Snowflake & Databricks Lost th...

Text LG (1.125rem) - Snowflake & Databricks Lo...

Text XL (1.25rem) - Snowflake & Databric...

Inter

--font-body

Most production data platforms use both batch and streaming approaches.

Font Family Inter, -apple-system, sans-serif

Usage Body text, UI elements, navigation

Aa 400

Aa 500

Aa 600

Aa 700

Text XS (0.75rem) - Most production data platforms...

Text SM (0.875rem) - Most production data platforms...

Text Base (1rem) - Most production data platforms...

Text LG (1.125rem) - Most production data plat...

Text XL (1.25rem) - Most production data...

JetBrains Mono

--font-mono

SELECT * FROM events WHERE timestamp > NOW() - INTERVAL '1 hour'

Font Family JetBrains Mono, SF Mono, monospace

Usage Code blocks, technical values, labels

Aa 400

Aa 500

Aa 600

Text XS (0.75rem) - SELECT * FROM events WHERE tim...

Text SM (0.875rem) - SELECT * FROM events WHERE tim...

Text Base (1rem) - SELECT * FROM events WHERE tim...

Text LG (1.125rem) - SELECT * FROM events WHER...

Text XL (1.25rem) - SELECT * FROM events...

Type Scale

Consistent sizing based on a modular scale for visual harmony.

--text-xs 0.75rem (12px) Labels, captions, meta information

--text-sm 0.875rem (14px) Small body text, secondary content

--text-base 1rem (16px) Default body text, optimal reading

--text-lg 1.125rem (18px) Lead paragraphs, emphasis

--text-xl 1.25rem (20px) Subheadings, card titles

--text-2xl 1.5rem (24px) Section subheadings

--text-3xl 1.875rem (30px) Section headings

--text-4xl 2.25rem (36px) Page titles

--text-5xl 3rem (48px) Hero headings

Line Heights

Optimized leading for different content types.

--leading-tight 1.25

Headings and display text where tighter spacing improves visual impact. Use for titles and hero sections.

--leading-normal 1.5

Standard line height for UI elements, shorter text blocks, and areas where space is at a premium.

--leading-relaxed 1.625

Optimal for long-form reading. Body text in articles should use this value for comfortable reading sessions.

--leading-loose 1.75

Extra breathing room for code blocks and technical content where scanning and comprehension benefit from more space.

Usage Examples

Article Title

Shift Left or Stay Right?

font-family: --font-display; font-size: --text-5xl; em uses --accent-primary

Section Heading

The Philosophy of Data Processing

font-family: --font-headline (Fraunces); font-size: --text-3xl

Body Text

Most production data platforms use both batch and streaming approaches, recognizing that each paradigm excels in different scenarios. The key is understanding when to apply each approach.

font-family: --font-body; font-size: --text-base; line-height: --leading-relaxed

Code

SELECT COUNT(*) as daily_users
FROM events
WHERE event_date = CURRENT_DATE

font-family: --font-mono; font-size: --text-sm; line-height: --leading-loose