LETTERKIND / 04

CSS recipe

Export scoped typography CSS and a validated JSON recipe for reuse.

YOUR LITTLE WORKBENCH

CSS recipe

ON YOUR DEVICE ✦

Try a sample on your device’s installed fonts. Settings remain in this page only; export a JSON recipe before switching tools. No remote font requests.

Primary font stackYour sample text

Base size · pxScale ratioRoot reference · pxBody size · pxLine heightLetter spacing · emColumn width · chFont weight

Import JSON recipe

Your scoped CSS recipe

/* Letterkind · root reference: 16px. No root override or remote fonts. */
.type-recipe {
  font-family: "Avenir Next", "Segoe UI", "PingFang SC", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0em;
  max-width: 60ch;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.type-recipe p { margin-block: 0 1em; }
.type-recipe h1 { font-size: 48.82813px; font-size: 3.05176rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h2 { font-size: 39.0625px; font-size: 2.44141rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h3 { font-size: 31.25px; font-size: 1.95313rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h4 { font-size: 25px; font-size: 1.5625rem; line-height: 1.2; margin-block: 1.4em .5em; }
.type-recipe h5 { font-size: 20px; font-size: 1.25rem; line-height: 1.2; margin-block: 1.4em .5em; }

A little space changes everything. Good typography helps ideas find their rhythm. Try your own headline, paragraph or a few words in another language. 留一点空间，让文字更好读。

Font rendering depends on what is installed. ch is not an exact character count; exported rem headings assume your chosen root reference. Preview in the actual page before use.

THE METHOD / 01

A clear wayfrom start to finish.

The recipe combines an allowlisted font stack, scale and spacing settings under a fixed .type-recipe class.

A worked example

Download CSS, apply .type-recipe to a content container, and review it in your own design.

Keep the assumptions clear

CSS contains no font downloads or site-wide reset. Recipe settings stay in page memory unless exported.

Read all workflows ↗

A FEW USEFUL ANSWERS

Good to know.

Are my inputs uploaded?

No. Processing runs locally in your browser. The host still receives normal requests for website pages and assets.

Can I keep my result?

Use the download controls for the current tool or print from your browser. Seating plans, flashcards and document drafts autosave in this browser; see the privacy page.

Do I need an account?

No sign-up, paid API or subscription is required. Both languages use the same tools. English always opens at the root address.

LETTERKIND / TOOLKIT

CSS recipe

CSS recipe

Your scoped CSS recipe

A clear wayfrom start to finish.

A worked example

Keep the assumptions clear

Good to know.

A little help for every step.

Font comparison

Type scale

Spacing lab