Typography Is the Skeleton: A Font and Type-Scale System Guide for Vibe Projects

First, a clarification: every product name, person, number and conversation in this guide is a fictional example invented to explain the method. They are not real products or real user cases. The method itself is general, and the numbers are illustrative yardsticks, not measured results from any real product.

Many vibe projects look "fine" at first glance but tire the reader: headings barely differ from body text, paragraphs collapse into a wall, numbers sit unevenly next to Chinese characters, and bumping the font size two notches breaks the layout on mobile. The problem is usually not the color scheme or the component library. It is that typography never became a system: font sizes were filled in by feel, line height stayed at the default, and the font choice was "whatever renders". Typography is the cheapest experience lever a product has. Without changing features or adding pages, simply putting font sizes, line height, line length and the font stack in order can lift readability a full notch. This guide covers that job: how to define a typography system for a vibe project, land it in code, and keep it from drifting.

1. Start with a judgment: typography is about "readable", not "pretty"

Before touching anything, replace the aesthetic goal with verifiable criteria. Whether a screen's text passes can be answered with four questions: can users tell heading, body and secondary information apart within three seconds — is the hierarchy clear? Does a paragraph tire the eyes — are line height and line length right? Does the layout survive a different device and a larger font size — is the system elastic? And when Chinese, English, digits and punctuation mix, do they look like one kind of text rather than patches stitched together? If any question has no answer, the typography is still at the "typed in by hand" stage.

A fictional example: Lin Wan built a to-do product called "Songguo List" with AI tools, and users reported that it "looks dizzying". Checking it, she found five font sizes on the home screen — 28 for titles, 20 for subtitles, 16 for body, 14 for notes, 12 for footers — but 20 and 16 were visually almost indistinguishable, while the 14px notes, set at a line height of only 1.2, blurred into a slab. The problem was not too many sizes. It was that the sizes had no clear steps and no assigned jobs. The first step of a typography system is giving every size a post to hold, not letting them compete for attention on feel.

So the order of work is counterintuitive: do not pick a font first, define the hierarchy first. Once hierarchy is fixed, font, size, weight and color all have somewhere to land. Get the order wrong and everything is rework: a beautiful font turns out mushy at small sizes, or a big headline is chosen before body text has a rhythm to match it.

2. The type scale: one ratio to govern every size

A type scale is the list of font sizes a product is allowed to use, plus the ratio between them. Without one, sizes multiply with every "adjust it by eye" until even the developer cannot say where a stray 15px came from. With one, a new page needs no invented sizes — you pick from the list.

A workable starting point for a vibe project: body text at 16px as the base, two steps up and two steps down. Headings at 24 and 32, secondary information at 14, small captions at 12. Adjacent steps must differ by at least 4px, or roughly a 1.25x ratio — otherwise the eye cannot tell them apart. 16 next to 18 is the classic "different but not distinguishable" pair; keep only one. On mobile the whole scale can drop one notch, but the ratios stay: body at 15 with headings around 22 keeps the hierarchy intact.

The scale also needs a weight assignment. At the same size, weight is the second hierarchy signal: headings at 600 or 700, body at 400, secondary text at 400 but visually weakened by color. Never use weight to brute-force hierarchy: if every heading is 800 and body is 600, everything on the page is shouting, which reads worse than no hierarchy at all. The rule is that at most two visual weights compete for attention at once; everything else steps back.

A common failure is writing the scale into mockups but not into code. The right move is turning it into design tokens — CSS variables like --font-size-base, --font-size-lg, --font-size-xl, or a theme in the component library. Page code must not contain bare font sizes; each one that appears gets a token. Months later, nearly every place where typography drifted will be a place where a bare size slipped in.

3. Font selection: guarantee rendering first, personality last

The judgment order for fonts is: can it render reliably, is it tiring to read, and only then, does it look good. For Chinese-language products, the first gate is the font stack. Full Chinese webfonts are megabytes; loading one can visibly slow first paint. So the pragmatic route is: Chinese text on the system font stack, Latin text and digits on one matching Western font. System fonts are already on the user's device — no download, no failure mode, and the most stable rendering. In most vibe projects, "personality" can be expressed through hierarchy and spacing alone; it does not need an exotic font.

Write the full fallback chain, with languages assigned their jobs: Latin fonts first, Chinese fonts right behind, a generic family at the end. One detail matters when writing it: Chinese and Latin fonts do not share the same baseline and cap height on a line, so Latin digits can look slightly small or high next to Chinese characters. The fix is not swapping fonts; it is giving digits and Latin text a slightly larger size compensation, or simply accepting system-font mixing — users read system-font mixing every day and are used to it, while forced "leveling" often creates new problems.

When is a webfont worth it? Only when three conditions hold together: the font is part of the product's identity, such that swapping it would make users feel it is "not this product anymore"; you have measured its load size and its failure fallback, for example font-display: swap so text shows in a system font first and switches when the font arrives, instead of a long blank; and you have inspected small-size rendering device by device, with no blurring or missing glyphs. Missing any one condition, stay on system fonts — a vibe project's typography reputation comes from stable readability, not font taste.

There is one Chinese-specific trap: do not mix multiple Chinese fonts in body text. One font for headings, another for cards, a third for dialogs, and the page instantly looks patched together. Keep one Chinese body font throughout, and at most use a display font as an accent in brand headings — and only at large sizes, with small sizes always falling back to the body font.

4. Line height, paragraph spacing, line length: the three numbers that decide fatigue

If you can only change three numbers, change these. Body line height should be 1.6 to 1.75 times the font size — 16px type with 26 to 28px line height. Chinese body text below 1.5 lets adjacent lines interfere, so eyes skip lines when reading long passages; above 1.9 it feels loose and paragraphs lose cohesion. Headings can tighten to 1.2 to 1.3, since they are usually one or two lines and tightness reads as forceful; but once a heading wraps past two lines, bring line height back to 1.4 or more, or the second line will press against the first and read squashed.

Paragraph spacing is often ignored, yet it is the main source of paragraph identity. Separate paragraphs with margin, not blank-line characters, at roughly 0.75 to 1 times the line height. Chinese layouts that rely only on first-line indentation with no gap between paragraphs easily collapse into a wall on phone screens; spacing that is too large chops an article into fragments. A quick self-check: shrink a screenshot to half size. If paragraph boundaries are still visible, spacing is roughly right.

Line length is how many characters fit per line. Chinese body text reads comfortably at 35 to 45 characters per line; English at about 60 to 75 characters. Lines too long make eyes lose the next line's start on the return sweep; lines too short break rhythm with constant wrapping. The implementation is a max-width on the body container, not letting it stretch with the screen. Centered, width-capped body text on a wide screen is not wasted space; it is a signpost for the eye's return sweep. Cards and dialogs follow the same rule: fix the container width first, then talk about font size.

5. Mixed composition: digits, punctuation and mixed Chinese-Latin text betray sloppiness first

The places a typography system most often betrays itself are not headings but mixed composition. Digits first: prices, counts and percentages should use tabular figures so vertically stacked numbers align. When numbers in a table, bill or statistic misalign, users subconsciously feel "the math is wrong", even when the values are right. Tabular figures need no font change; most system and Western fonts support the feature, and enabling it is a one-line style.

Punctuation next. Chinese punctuation occupies a full-width cell, English punctuation half-width, so naively concatenated mixed text makes English punctuation inside Chinese sentences look cramped. The pragmatic rule: in Chinese context, prefer Chinese punctuation, and let English words and digits keep their natural spacing instead of swapping Chinese full stops for English periods "to look neat". Paired marks like quotes and book-title marks must appear in pairs, and half-width quotes inside Chinese sentences should not press tightly against adjacent characters. Each detail looks trivial alone; together they are direct evidence of whether a product is carefully made.

One more mixed-composition word: no broken words at line ends. An English word hard-split across lines is a common blemish on Chinese pages. Let whole English words wrap to the next line — a little trailing whitespace beats a word cut in half. Likewise, links, emails and long serial codes that "cannot break" should be set to not wrap, or allowed to break only at sensible points, rather than letting the browser cut them at arbitrary characters.

6. Elasticity: larger fonts, other devices — the system must not break

A typography system must pass two exams: the user turning browser font size up two notches, and the same page moving from desktop to phone. A scale that looks beautiful only in mockups fails both. For the first exam, the key is relative units for everything text-related and no fixed container heights. A card with a fixed height will overflow or clip text when fonts grow — the most common "breaks when enlarged" root cause. Card, button and input heights should be driven by content, not boxed in by fixed pixels.

For the second exam, the key is that mobile is not a scaled-down desktop; it is a re-layered hierarchy. A 32px desktop heading can drop to 24px on phones, but body text should not go below 15px — below that, Chinese strokes blur on small screens. Paragraph spacing can tighten slightly on mobile, but line height should not shrink with it; reading distance is closer on phones, so generous line height matters more, not less. Wide-screen elements like tables and long headings need a second layout for mobile: headings allowed to wrap, tables allowed to scroll horizontally or convert to cards, never squeezed onto one line.

One more group is easy to miss: users who set system font size to maximum. For them a page is not "slightly bigger" but scaled 1.5x or more. If a layout still reads and every button remains reachable at 200% zoom, the system has passed its hardest exam. A vibe project cannot adapt perfectly to every zoom level, but "nothing lost, no action lost when enlarged" is a floor, not a bonus.

7. Rollout: five steps to write the system into the project

Step one, audit: collect every font size, weight and line height on existing pages into a table, merge duplicates, drop steps with insufficient contrast, and produce the first scale. Step two, tokenize: write the scale, line heights and paragraph spacing into theme variables; page code may reference tokens only, never bare numbers. Step three, fix the font stack: complete Chinese-Latin fallbacks, and keep webfonts out of production unless they pass the three conditions from section 3. Step four, run the two exams: browser font size up two notches, phone widths, and fix overflows and clipping. Step five, write the checklist: every new page passes the next section's list before shipping, rather than being approved on feel.

The point of steps two through five is that typography stops being an aesthetic argument and becomes an execution checklist. When someone next wants a 17px, the discussion starts not with "does 17 look better than 16" but with "17 is not in the scale; to add it, change the scale and check everywhere it is used". That mechanism prevents drift better than any one-off visual polish.

8. Launch checklist and anti-patterns

Check before shipping: all sizes come from the scale, no bare numbers; adjacent steps differ by 4px or more; body line height 1.6 to 1.75; paragraph gaps use margin and are visible to the eye; body containers have a max-width with lines at 35 to 45 Chinese characters; digits align vertically; punctuation is consistent in mixed text and long words do not split; two notches larger browser font causes no overflow or clipping; on phone widths body text stays at or above 15px and headings wrap normally; the font stack has complete fallbacks and remains readable when a webfont fails.

Anti-patterns — send any of these back: more than seven font sizes site-wide; headings and body differing by only 2px with color forced to carry hierarchy; long-form line height below 1.5; zero paragraph spacing with first-line indentation as the only divider; full-width body text on wide screens running sixty or seventy characters a line; misaligned digits in tables; fixed card heights that overflow when fonts grow; three or more webfonts for "personality" with long blank first paints; two or more Chinese body fonts mixed in body text.

9. How to verify: no trained eye needed

Typography review needs no designer in the room; three rough methods suffice. First, "shrink to half": shrink a page screenshot to half size. If hierarchy is still distinguishable and paragraph boundaries still visible, the scale and spacing pass; if it dissolves into mush, hierarchy is being carried by color and detail, and size steps are too small. Second, "squint": squint at the page until only gray blocks remain. Heading, body and secondary blocks should still read as three different gray levels; uniform gray means weight and size were never separated. Third, "read on a real phone": take the cheapest, oldest phone available and read a full screen of body text. Losing your line or re-finding rows means line height and line length are wrong. None of these need tools, and all three beat "looks fine to me".

Back to the starting point: typography is not the final beautification step before launch; it is part of the product's skeleton. Once scale, line height, line length and font stack are fixed, every new page reuses instead of inventing, and every visual drift has a checklist to catch it. Fast-moving vibe projects need this kind of "decide once, reuse endlessly" system most, because without it every new feature pushes typography back to being typed in by hand. Make text readable first; good looks will follow on their own.