DOCSEARCHbyAlgolia
Submit Docs

typo.css

repository·master·Indexed 26 days ago

https://github.com/sofish/typo.css

A CSS library version 2.1.2 designed for consistent web typography optimized for Chinese language reading on desktop and mobile platforms. It provides a clean reset and advanced enhancements via the .typo class, including optimized line heights, CJK line breaking, automatic spacing, and punctuation squeezing. The library includes helper classes for readability (.typo-readable), vertical layout (.typo-vertical), full justification (.typo-justify), and specific Chinese font styles like Kai and Fangsong.

Tokens
1.8K
Snippets
0
Records
18
Agent score
89%

What's inside typo.css

  1. Configure language-aware font stacks

    master

    Typo.css automatically adjusts font stacks based on the document or element language.

    • Simplified Chinese: The default stack used for historical compatibility.
    • Traditional Chinese: Automatically switches .typo and body to Traditional Chinese stacks when the language is set to zh-Hant, zh-HK, zh-MO, or zh-TW.

    You can also access CSS variables for Simplified and Traditional Chinese sans and serif stacks to implement custom styling.

  2. Use .typo as a Chinese-first article container

    master
    Apply the .typo class to a container to enable a Chinese-first article surface. This provides optimized typography for modern browsers while maintaining a dependency-free baseline. For improved readability, you can also use the .typo-readable class, which caps content width at 48em without forcing layout constraints on the parent .typo container.

  3. Enable typography styles with the .typo class

    master

    To enable optimized typography for articles or document reading pages (including styles for table, ol, ul, etc.), add the .typo class to a container element. This enables optimized font weights, line heights, CJK line breaking, automatic CJK spacing, punctuation squeezing, native emphasis marks, and improved wrapping strategies.

    If a parent container does not have the .typo class, you can target specific elements using helper classes like .typo-ul or .typo-ol to achieve the same effect as .typo > ul.

  4. Use the .typo container for Chinese typography

    master

    The .typo selector serves as the primary article container for modern Chinese typography. When applied, it provides progressive native CSS enhancements for improved reading quality, including:

    • Optimized line height (1.75)
    • Improved line breaking (line-break: strict)
    • Word wrapping (overflow-wrap: break-word)
    • Hanging punctuation support
    • Automatic text spacing (text-autospace and text-spacing-trim)
    • High-quality text wrapping (text-wrap: pretty) where supported
    • Modern text emphasis positioning

    By default, it uses local CJK system fonts to avoid the performance overhead of heavy webfonts.

  5. Apply typo.css to your project

    master
    To use typo.css, include the typo.css file in your project. It provides a clean reset (removing default styles from elements like ul and ol to avoid specificity conflicts) and advanced typography enhancements for Chinese text.

  6. Control line length and alignment with .typo-readable

    master
    To control the maximum line length for body text to ensure optimal readability, add the .typo-readable class to your article container. To center the content while maintaining this line length, add .typo-readable-center.

  7. Implement vertical Chinese layout

    master

    Use the .typo-vertical class to set the writing mode for vertical Chinese text. Note that .typo-vertical is a low-level helper and does not provide a complete layout. For a polished vertical composition (like a poem card), you should manually implement:

    • A fixed or responsive column width.
    • Sufficient padding before and after columns.
    • Visible or implied column boundaries.
    • Horizontal scrolling for narrow viewports.

  9. Enable Box-Sizing Reset with .borderbox

    master
    For projects requiring consistent box-sizing behavior (especially for older browser support), add the .borderbox class to the <html> element. This applies box-sizing: border-box to all elements and pseudo-elements.

  10. Apply typography styles using the .typo class

    master
    To apply the core typography and reset styles designed for Chinese reading, wrap your content in an element with the .typo class. This sets the base font size, line height, color, and optimized text rendering properties.

  11. Configure typography with CSS variables

    master

    The stylesheet uses CSS variables for font families and colors. You can override these in your own CSS to customize the look of the typography system.

    Available variables:

    • --typo-font-sans: Sans-serif font (defaults to Simplified Chinese stack).
    • --typo-font-serif: Serif font (defaults to Simplified Chinese stack).
    • --typo-font-mono: Monospace font.
    • --typo-font-kai: Kai/Kaiti font.
    • --typo-font-fangsong: Fangsong font.
    • --typo-color-text: Primary text color.