explaingit

sofish/typo.css

4,541HTMLAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

A single CSS file that makes Chinese text look consistent and readable across browsers, providing a reset layer and ready-made styles for articles, lists, tables, and Chinese-specific formatting conventions.

Mindmap

mindmap
  root((repo))
    What it does
      Browser default reset
      Chinese text styling
      Mobile and desktop
    Features
      typo class container
      Emphasis dots
      Proper name underline
      Serif font class
    Use Cases
      Blog posts
      Article pages
      CJK web apps
    Audience
      Frontend devs
      Chinese bloggers
      Web designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add proper Chinese typography to a blog or article page by including one CSS file and wrapping content in the typo class

USE CASE 2

Style Chinese text consistently across Chrome, Firefox, and Safari without fighting browser default spacing rules

USE CASE 3

Apply Chinese editorial conventions like emphasis dots and proper name underlines to article text

USE CASE 4

Format individual content sections using standalone class utilities like typo-ul without a parent container wrapper

Tech stack

CSSHTML

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial projects, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
I'm building a Chinese blog with plain HTML. Show me how to use typo.css to style my article content, what class do I add and which elements does it cover?
Prompt 2
Using typo.css, write the HTML for a blog post container with Chinese headings, an ordered list, and a table that all render with consistent, readable typography.
Prompt 3
I want to apply the Chinese emphasis dot style from typo.css to highlight key terms in an article. Show me the exact markup and what it looks like.
Prompt 4
I already use Bootstrap on my site. How do I integrate typo.css so it only affects article content without breaking my existing Bootstrap styles?
Open on GitHub → Explain another repo

← sofish on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.