How it works
The workflow, examples and limits behind every tool.
Font comparison ↗
Only allowlisted system-font stacks are used. The browser selects an installed font or the stack’s generic fallback.
Example: Compare a serif and sans-serif stack on your own device using the same headline and paragraph.
Results vary with installed fonts and glyph coverage. Chinese may use a fallback even when Latin uses the first family.
Type scale ↗
Size at step n = base × ratio^n. Pixel and rem values use an explicitly entered root size.
Example: A 16 px base with ratio 1.25 yields 20, 25, 31.25 and 39.0625 px.
The generated hierarchy is a starting point, not a guarantee of readability on every screen or language.
Spacing lab ↗
Line height is unitless; letter spacing uses em; the column width uses ch with a responsive maximum.
Example: At 18 px and line height 1.6, the line box is 28.8 px before font-specific layout effects.
ch refers to the font’s zero-glyph advance, not a precise number of characters per line, especially for CJK.
CSS recipe ↗
The recipe combines an allowlisted font stack, scale and spacing settings under a fixed .type-recipe class.
Example: Download CSS, apply .type-recipe to a content container, and review it in your own design.
CSS contains no font downloads or site-wide reset. Recipe settings stay in page memory unless exported.
Local work, explicit limits
Each workspace reports its input and file limits. Imports validate the supported format before asking to replace saved work. Plain text is displayed as text, never executed as markup. Both languages use the same tools; the root address always opens in English, with Chinese under /zh/.