Build a type scale and spacing system in CSS

Get a consistent set of font sizes, line heights and spacing steps as CSS variables, with usage notes.

You'll attach

Text only

Works with

ChatGPTClaudeGeminiGrokCopilotGrok Bot

How to use it

1. Open chatgpt.com or claude.ai (or another AI listed here).
2. Fill in the highlighted blanks ([WEBSITE OR APP], [E.G. 16PX], [FONT NAME]…) below, or edit them after pasting.
3. Copy the prompt, paste it into the chat and send.
4. Paste the CSS into your stylesheet and replace hard-coded sizes one section at a time.

Create a type scale and spacing system for my [WEBSITE OR APP].

Body text size: [E.G. 16PX]
Heading font: [FONT NAME]
Body font: [FONT NAME]
Style: [CALM AND ROOMY / DENSE AND COMPACT]

Give me:
1. A type scale from small print to the biggest heading, with size, line height and weight for each step, using a ratio you name and explain.
2. A spacing scale (for padding, margins and gaps) that matches it.
3. All of it as CSS custom properties, plus responsive sizes using clamp() for the headings.
4. A short guide: which step to use for page titles, section titles, cards, buttons and captions.