What fonts does Granola use?

Measured from the captured homepage: Quadrant for headings and Melange for body copy. Explore the original reference, palette and section breakdown below.

Open full Granola reference →

Observed typography

Heading font: Quadrant
Body font: Melange
System: Two-family hierarchy

View site reference Browse pairings

Granola's website font choices

This page records what the browser rendered on September 21, 2026. It is a research reference for designers and developers comparing real products, not a claim about Granola's complete brand system.

A single family or a two-font system?

Granola separates roles: Quadrant creates the display voice while Melange handles reading copy and interface detail. Compare the hero, navigation and longer sections in the full reference to see where that contrast matters.

Use the font data with the full layout

Typography only makes sense with its surrounding system. Inspect the full Granola capture for color tokens, section order and responsive views, then compare it with the measured website font trends across the wider library.

Rebuild the idea, not the brand

Use this as a starting point for an original interface. Replace the source copy, logo and imagery, check the typeface license, and adapt the hierarchy to your content. For a broader set of real references, browse font pairing examples or homepage design examples.

Granola fonts — FAQ

What font does Granola use?

Granola uses Quadrant for headings and Melange for body copy in the captured homepage. The values are extracted from the rendered CSS capture and are presented as observed reference data, not an official brand guideline.

Is Quadrant free to use?

Licensing depends on the typeface and the project. Check the font foundry or license before shipping it; this page identifies what appeared on Granola's site and does not grant a license to reuse it.