One face, two jobs

Handgloves & quartz

The quick brown fox jumps over the lazy dog — 0123456789, Il1 O0.

Atkinson Hyperlegiblefor headings ·Atkinson Hyperlegiblefor body

What's installed. Hierarchy comes from size, spacing and case instead of from a second typeface — the hardest version to get wrong, and the least likely to look dated in three years.

export const fonts: FontDefinition[] = [
	{
		role: 'body',
		cssVariable: '--typeface-body',
		provider: 'google',
		family: 'Atkinson Hyperlegible',
		weights: [400, 700],
		fallbacks: ['system-ui', 'sans-serif'],
		preload: true,
	},
];

Editorial

Handgloves & quartz

The quick brown fox jumps over the lazy dog — 0123456789, Il1 O0.

Instrument Seriffor headings ·Interfor body

A high-contrast display serif over a neutral sans. This is the combination behind most of the minimal hospitality and studio sites people point at as a reference.

export const fonts: FontDefinition[] = [
	{
		role: 'body',
		cssVariable: '--typeface-body',
		provider: 'google',
		family: 'Inter',
		weights: [400, 500, 600, 700],
		fallbacks: ['system-ui', 'sans-serif'],
		preload: true,
	},
	{
		role: 'heading',
		cssVariable: '--typeface-heading',
		provider: 'google',
		family: 'Instrument Serif',
		weights: [400],
		fallbacks: ['Georgia', 'serif'],
		preload: false,
	},
];

Warm

Handgloves & quartz

The quick brown fox jumps over the lazy dog — 0123456789, Il1 O0.

Frauncesfor headings ·Work Sansfor body

Same structure, softer voice. Fraunces has enough character to carry a heading on its own, so the sans underneath can stay completely plain.

export const fonts: FontDefinition[] = [
	{
		role: 'body',
		cssVariable: '--typeface-body',
		provider: 'google',
		family: 'Work Sans',
		weights: [400, 500, 700],
		fallbacks: ['system-ui', 'sans-serif'],
		preload: true,
	},
	{
		role: 'heading',
		cssVariable: '--typeface-heading',
		provider: 'google',
		family: 'Fraunces',
		weights: [400, 600],
		fallbacks: ['Georgia', 'serif'],
		preload: false,
	},
];

Bookish

Handgloves & quartz

The quick brown fox jumps over the lazy dog — 0123456789, Il1 O0.

Newsreaderfor headings ·Newsreaderfor body

Serif throughout, at two sizes. Suits a site that is mostly writing — and it means one family to load rather than two.

export const fonts: FontDefinition[] = [
	{
		role: 'body',
		cssVariable: '--typeface-body',
		provider: 'google',
		family: 'Newsreader',
		weights: [400, 500, 600],
		fallbacks: ['Georgia', 'serif'],
		preload: true,
	},
];