Typography Change Log: Chinese, English, Code, and One H

The typography pass split normal text, code, the homepage script, and the intro H into separate font stacks with practical fallbacks.

Typography is partly visual, but it starts with compatibility.

A personal site can have character, but it cannot assume every visitor has the same fonts installed. So the site uses font stacks instead of one fixed font name.

The Global Text Stack

The main font tokens live in globals.css:

CSS

--font-serif:
  "Times New Roman", Times, "STZhongsong", "华文中宋", "Songti SC", SimSun,
  "Noto Serif CJK SC", "Noto Serif SC", serif;
 
--font-sans:
  "Times New Roman", Times, "STZhongsong", "华文中宋", "Songti SC", SimSun,
  "Noto Serif CJK SC", "Noto Serif SC", serif;

The site no longer treats sans-serif as the default reading voice. Chinese text aims for a Song-style feel. English falls back to Times New Roman.

If STZhongsong is not available, the browser tries Songti SC, SimSun, Noto Serif, and finally the generic serif.

Code Uses a Practical Stack

Code has its own token:

CSS

--font-code:
  ui-monospace, "Cascadia Mono", "Cascadia Code", "SFMono-Regular", Menlo,
  Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

JetBrains Mono and Nerd Fonts are good fonts, but they are not installed by default on most systems. That is why they are not first in the stack.

The code stack favors fonts that Windows, macOS, Linux, and browsers commonly know. If none match, monospace still keeps code readable.

The Welcome Text and the H Are Special Cases

The homepage welcome line uses a script stack:

CSS

--font-roundhand:
  "Pinyon Script", "Bickham Script Pro", "Snell Roundhand",
  "Edwardian Script ITC", "Segoe Script", cursive;

The first-visit H uses a blackletter stack:

CSS

--font-gothic:
  "Manufacturing Consent", "UnifrakturCook", "Old London",
  "Old English Text MT", "Cloister Black", "Lucida Blackletter",
  "Engravers Old English", Georgia, "Times New Roman", serif;

The main choice is Manufacturing Consent from Google Fonts. It is closer to the wanted blackletter feeling than UnifrakturCook, and it is less noisy.

Google Fonts Does Not Require Local Installation

The site imports the web fonts:

CSS

@import url("https://fonts.googleapis.com/css2?family=Manufacturing+Consent&family=Pinyon+Script&family=UnifrakturCook:wght@700&display=swap");

If the browser can reach Google Fonts, it downloads the font. The visitor does not need it installed locally.

If that request fails, the browser continues through the local fallback names. If those also fail, it lands on generic serif or cursive families. The result is less specific, but the page remains readable.

About the New York Times Letterform

I wanted the intro H to feel closer to old newspaper blackletter. The New York Times logo is not just a normal font typed into a page. It is a custom letterform, or at least heavily customized.

So the goal here is not to copy it. The goal is to choose a public, stable web font with a similar mood.

Manufacturing Consent is the current choice. If this needs to be more reliable later, the next step is self-hosting the font files.

Takeaway

The rule is simple:

Normal reading text should be stable. Code should stay readable. Special fonts should stay in special places.

A font stack is just an ordered fallback list. Try the intended font first. If it is missing, keep going until the visitor still gets something readable.