Google Fonts Typography System

Generate complete typography systems from Google Fonts. Suggests single fonts or pairs across 1,900+ families tagged by personality and contrast, then outputs a full type scale as CSS custom properties, Tailwind config, and embed links.

This skill searches a dataset of 1,900+ Google Fonts enriched with typographic personality tags (geometric, humanist, neo-grotesque), contrast levels, width, and body-suitability ratings. It recommends a single font (strict mode) or a contrasting pair, builds a complete typographic scale following Tailwind Typography rhythm, and emits ready-to-use CSS variables, a Tailwind config block, and font embed links.

When to use

Use when choosing a font or font pairing, building a typographic scale, generating CSS custom properties or Tailwind config for type, or picking heading and body fonts for a web project.

Examples

Font pairing

Get a contrasting heading and body pair

Suggest a Google Font pairing for a modern fintech landing page and give me the CSS variables

Type scale

Generate a full typographic scale

Build a typographic scale using Inter and output it as a Tailwind config and embed link