typo.css

typo.css is a small CSS file designed to make Chinese text look good and consistent across different browsers. Browsers apply their own default spacing and sizing rules to HTML elements, and those defaults were largely designed for Western languages. This stylesheet resets those defaults and replaces them with settings optimized for Chinese reading, covering both desktop and mobile screens.

The project provides two layers of styling. The first is a reset layer that strips away browser defaults from common elements like lists, headings, and paragraphs, leaving a clean base to build on. Unlike normalize.css, which adds opinionated default styles to every element, typo.css tries to remove styles rather than prescribe them, so that your own custom styles do not need to fight against built-in rules.

The second layer is applied by adding a class called typo to a container element, such as the wrapper around a blog post or article. Within that container, tables, ordered lists, unordered lists, and other elements receive pre-defined styles tuned for readable Chinese prose. Individual tags can also be styled in isolation using class names like typo-ul without needing a parent container.

The file also includes several Chinese-specific helper classes that address formatting conventions not covered by standard Western CSS. These include a style for proper name underlines (a Chinese editorial convention for marking names of people and places), an emphasis dot style (a Chinese alternative to italic text for highlighting), a serif font class, forced text wrapping for CJK characters in tables, and a clearfix utility.

The project is a single CSS file, open-sourced under the MIT License, with a live demo available at typo.sofi.sh.