Typography tool

Free font family builder for website typography.

Choose a practical type system, preview it, and export CSS or JSON. Font file downloads should only be added after license-safe font handling is in place.

Website typeHeading fontBody fontAccent font

Preview

Build a site people can read quickly.

Use this type system for a local service business where headings need to be clear, body text needs to scan quickly, and accent text should be used sparingly.

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

:root {
  --font-heading: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-accent: "Arial", serif;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-hero: clamp(2.6rem, 6vw, 5.5rem);
  --leading-tight: 1.04;
  --leading-body: 1.65;
}

body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); line-height: var(--leading-tight); }
.accent { font-family: var(--font-accent); }

Paazaa Atlas Sans font kit

Download the generated font package with OTF, WOFF2, CSS, license, specimen, metadata, and QA report.

Download font kit Open specimen

Free font family builder for website typography.

Practical service business

Editorial creator

Hospitality

Premium professional

Build a site people can read quickly.