This tool lets you create a cohesive typography system for your website with perfect font pairings, customisable sizes, and export-ready CSS. And yes, it works for all heading levels and body text, giving you complete control over your site's visual hierarchy.

Here's how to use it:

1. Start by selecting font styles for your headings and body text. Switch between tabs to customize each separately.
2. Choose from Sans-serif, Serif, Display, or Monospace categories, then select specific fonts from the dropdown menus.
3. Customise each heading level (H1-H6) by clicking the corresponding tab and adjusting size, weight, letter spacing, and styling options (uppercase, italic, underline).
4. For body text, adjust the size, weight, line height, and letter spacing to ensure optimal readability.
5. Customise your button text to match your site's calls-to-action, and see the results instantly in the preview area.
6. When you're satisfied with your selections, click "Export CSS" to generate clean, ready-to-use CSS code for your website.

Did you know? For faster results, try the "Popular Pairings" section to instantly apply proven font combinations that professional designers love.

Want a completely fresh look? Hit the "Randomise Fonts" button to discover unexpected combinations that might spark your creativity.

The preview updates in real-time, so you can see exactly how your typography will look on your website before you commit. Experiment freely until you find the perfect balance of style and readability.

Need to adjust after implementing? Just come back to the tool, make your changes, and export the updated CSS. Your website will maintain a consistent typography system across all pages.