Personal Site Typography: Size, Weight, and Narrow-Screen Reading
Product design
The homepage paired 12px section labels with 16px descriptions, making the explanation more prominent than its section. Smaller body text can repair that hierarchy, but small type is not automatically refined. The real questions are whether a quick scan reveals the structure and whether sustained reading survives the density and wrapping. This is a case study of the current layout, not a universal size prescription.
Assign a reading task before assigning a size
The homepage distributes attention: About, Shop, and Articles are sections; their descriptions help a visitor decide where to go. An article supports sustained reading, with a title, sections, evidence, and captions. Reusing one size hierarchy would turn the homepage into an essay or an essay into a list of entry points.
This homepage uses 16px / 600 section headings, 14px descriptions, and 12px supporting text. Articles use a 20px main title, 16px section headings, and 14px body text at 1.9 line height. The 14px choice balances density in this narrow column with this font; it should not prevent enlarging longer articles later.
With a 2px difference, weight, colour, and spacing also establish structure. Keep semantic h1 / h2 headings rather than using a span to make a heading smaller. Assistive technology reads that structure; visual styling should express it.
| Element | Current style | Purpose |
|---|---|---|
| Homepage section heading | 16px, 600 | Identify a section during scanning |
| Description / article body | 14px, regular body weight | Read the information |
| Article main title | 20px, 600 | Identify the article |
| Date / caption | 12px | Provide time and source context |
Calculate available width and line height
The max-w-xl container is 36rem, or 576px with the default 16px root size. Two 24px side paddings leave 528px for desktop text. At a 390px viewport the text area is 342px; at 320px it is 272px. Density changes before the font size does.
If a Chinese glyph occupies approximately 1em, 14px text fits roughly 24 glyphs across 342px and 19 across 272px. Punctuation, font metrics, and word groupings change the actual result. This estimate predicts wrapping pressure; it does not replace browser inspection. Latin widths in a monospace family also differ from Chinese glyph widths, so Chinese character counts are not English line-length targets.
The article’s 1.9 line height produces 26.6px lines at 14px, leaving space for mixed Chinese, numerals, and links. For difficult long-form reading, compare size, line length, and paragraph length together. More leading alone can just add scrolling; smaller type compresses the glyphs. Read the same mixed-language paragraph at 14px and 16px before deciding whether the article column should widen.
A 600 declaration does not guarantee the intended font file
The Maple Mono CN CDN package publishes Medium and SemiBold under separate family names. Requesting 600 only from the regular family may produce synthesized weight or fallback rather than select the SemiBold file. The apparent one-number change then hides a different glyph rendering.
This site adds the SemiBold family to font-semibold, falling back to regular Maple Mono and system monospace. The declaration below is used here; the utility itself supplies the weight. Inspect both successful font loading and network failure. Wider fallback metrics tend to expose collisions between titles and adjacent actions.
The pre-load state is part of the interface too. Natural wrapping and independent button hit areas are safer than a fixed row height. Preserving one attractive screenshot is not a reason to clip a real English title.
.font-semibold {
font-family: "Maple Mono CN SemiBold", "Maple Mono CN",
ui-monospace, SFMono-Regular, Menlo, monospace;
}Test bilingual layouts with the longest real content
Chinese and English titles should not be mechanically translated to equal lengths. English connective words often need another line. This site keeps article titles complete and allows wrapping, with More as a separate navigation action.
The language button shows its destination only: EN on Chinese pages and 中 on English pages. Removing the redundant translation icon reduces noise, while an accessible name still explains which language the control selects.
Use full English titles, mixed-script product names, dates, and the fallback font state. Check that a wrapped title still clearly belongs to its link and does not squeeze adjacent controls. A layout tested only with “Hello” or short Chinese labels misses its production content.
Reading must survive zoom and keyboard navigation
Accessibility is not solved by repeating “body text must be 16px”. WCAG’s resize-text criterion concerns content and functionality at 200% text enlargement. Here that means checking titles, language controls, captions, and purchase links rather than disabling page zoom to hide overflow.
Check ordinary content at 320 CSS pixels for one-direction reading. Tables and code may need their own horizontal scrolling without widening the whole page. An image preview has its own scaling, which should remain separate from document text zoom.
A reusable review starts with heading and paragraph boundaries, then covers both languages, font loading, and themes, and finishes with keyboard and enlarged reading. A default-state screenshot cannot verify all those states.
As content grows, reduce homepage inventory before type size
The homepage shows three recent articles and the archive paginates by ten. These are organizational choices, not claimed SEO advantages. The homepage introduces the writing, the archive helps locate it, and the article develops the argument. Combining those tasks often ends with ever-smaller text trying to contain everything.
When topics and volume grow, add useful discovery through categories or search before revisiting page size. A complicated filter interface with only a handful of articles adds weight before there is enough content to justify it. Typography should reduce reading effort rather than advertise how much a page can hold.