The Farmer Studio Typography Guide

Typography is the most powerful design tool available and the most frequently misused. This guide documents the system we use across Farmer Studio projects — the rationale behind it, the rules we follow, and the exceptions we allow.

The Pairing Philosophy

We pair typefaces along a contrast axis, not a harmony axis. Two very similar typefaces in combination produce a vague, indistinct result — the eye cannot determine which is meant to be dominant. Two typefaces with clear, intentional contrast produce hierarchy that is legible before it is read.

Our default pairing:

• Display & Headings: Cormorant Garamond — High-contrast serifs, deeply editorial. Works at large sizes, particularly in italic and semibold.
• Body & UI: Inter — Geometric sans-serif. Neutral, extremely legible at small sizes, excellent variable font support.

The contrast between these two is not just stylistic. Cormorant carries the emotional register. Inter carries the information.

The Scale

We use a modular type scale with a ratio of 1.333 (a perfect fourth). Starting from a base of 16px:

Name	Size	Usage
text-xs	12px	Labels, tags, captions
text-sm	14px	Secondary UI, footnotes
text-base	16px	Body text
text-lg	21px	Lead paragraphs
text-xl	28px	Sub-headings
text-2xl	37px	Section headings
text-3xl	50px	Page headings
text-4xl	67px	Hero displays

Do not interpolate sizes between these steps. If your design requires a size between steps, the problem is in the layout, not the scale.

Tracking and Leading

At display sizes (37px and above), reduce tracking. Cormorant at text-4xl should sit at around -0.02em to -0.03em letter spacing. At body sizes, tracking should be at its default or very slightly positive.

Line height at display sizes: 1.05–1.15. At body sizes: 1.6–1.75. Never allow body text to run below 1.5 — it becomes genuinely difficult to read across a full paragraph.

Dark Mode Considerations

On dark backgrounds, body weight should step up. A typeface that reads cleanly at Regular weight on white will often feel insubstantial on dark. For Inter on dark, we use Medium (500) for body rather than Regular (400).

For Cormorant on dark backgrounds: the hairline strokes that give the typeface its elegance can disappear at smaller sizes. Set a minimum size of 22px for Cormorant on dark, and prefer the Semibold or Medium weights at that floor.

What to Avoid

• Never set Inter at display sizes. It was not designed for it and will look generic.
• Never set Cormorant at sizes below 18px. The contrast strokes will degrade.
• Avoid mixing more than two typefaces on a single surface. If you need a third, the problem is in the content architecture.
• Never use system-ui for anything other than UI chrome. In editorial contexts, it signals "unfinished."