Font Families

Playfair Display

--font-display

Shift Left or Stay Right?

Font FamilyPlayfair Display, Georgia, serif

UsageHero titles, article titles, major headings

Aa400

Aa500

Aa600

Aa700

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 FamilyFraunces, Georgia, serif

UsageSection headings, emphasis, callout titles

Aa400

Aa500

Aa600

Aa700

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 FamilyInter, -apple-system, sans-serif

UsageBody text, UI elements, navigation

Aa400

Aa500

Aa600

Aa700

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 FamilyJetBrains Mono, SF Mono, monospace

UsageCode blocks, technical values, labels

Aa400

Aa500

Aa600

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-xs0.75rem (12px)Labels, captions, meta information

--text-sm0.875rem (14px)Small body text, secondary content

--text-base1rem (16px)Default body text, optimal reading

--text-lg1.125rem (18px)Lead paragraphs, emphasis

--text-xl1.25rem (20px)Subheadings, card titles

--text-2xl1.5rem (24px)Section subheadings

--text-3xl1.875rem (30px)Section headings

--text-4xl2.25rem (36px)Page titles

--text-5xl3rem (48px)Hero headings

Line Heights

Optimized leading for different content types.

--leading-tight1.25

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

--leading-normal1.5

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

--leading-relaxed1.625

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

--leading-loose1.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