What's the difference between this and the Typography Scale Generator?

The Typography Scale Generator builds a whole ladder of related font sizes for a design system. This tool designs one specific text style in full — family, size, weight, style, line-height, spacing, and transform together — for a single heading, button, or paragraph.

Why do some fonts load and others don't need loading?

System UI and Georgia are already installed on virtually every device, so no download is required. The other options are Google Fonts, fetched live from Google's CDN for the preview — the copied CSS assumes you've also linked that font in your own page's .

What line-height should I use for body text?

A unitless line-height between 1.4 and 1.6 is the common sweet spot for paragraph text — it gives lines enough breathing room to scan easily. WCAG's text-spacing guidance specifically calls for at least 1.5× the font size for body copy to remain readable for people with low vision or dyslexia.

Why is line-height shown without a unit?

A unitless line-height (like 1.5) is computed relative to that element's own font-size, so it stays correct if the font-size changes or is overridden by a media query. A fixed px or em line-height can be inherited unchanged into child elements with a different font-size, producing cramped or overly loose text.

Does this tool upload my preview text anywhere?

No — the text you type is only used locally to render the live preview in your browser. Nothing is sent to a server.

CSS FONT GENERATOR

Design a full text style — family, size, weight, spacing — and copy the CSS.

Font family

Size: 18px

Weight: 400

Line height: 1.5

Letter spacing: 0em

Italic

.styled-text {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0em;
  text-transform: none;
}

How to build a CSS text style

1
Type or paste your own text into the preview box.
2
Pick a font family — web-safe or a Google Font, loaded live for preview.
3
Drag the sliders for size, weight, line-height, and letter-spacing.
4
Toggle italic and pick a text-transform if you need one.
5
Copy the generated CSS class and drop it into your stylesheet.

Questions

What's the difference between this and the Typography Scale Generator?: The Typography Scale Generator builds a whole ladder of related font sizes for a design system. This tool designs one specific text style in full — family, size, weight, style, line-height, spacing, and transform together — for a single heading, button, or paragraph.
Why do some fonts load and others don't need loading?: System UI and Georgia are already installed on virtually every device, so no download is required. The other options are Google Fonts, fetched live from Google's CDN for the preview — the copied CSS assumes you've also linked that font in your own page's <head>.
What line-height should I use for body text?: A unitless line-height between 1.4 and 1.6 is the common sweet spot for paragraph text — it gives lines enough breathing room to scan easily. WCAG's text-spacing guidance specifically calls for at least 1.5× the font size for body copy to remain readable for people with low vision or dyslexia.
Why is line-height shown without a unit?: A unitless line-height (like 1.5) is computed relative to that element's own font-size, so it stays correct if the font-size changes or is overridden by a media query. A fixed px or em line-height can be inherited unchanged into child elements with a different font-size, producing cramped or overly loose text.
Does this tool upload my preview text anywhere?: No — the text you type is only used locally to render the live preview in your browser. Nothing is sent to a server.