Chinese typography on the web

By Chen Hui Jing / @hj_chen

Hui Jing (Хуэй Джйн)

Chen (Чэнь)

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙
“Typography is writing with prefabricated letters”
—Gerrit Noordzij

Phoenician alphabet


(English) 12 letters

河马(Хе Ма)

(Russian) 17 letters

食品(Щи Пин)

(Irish) 21 letters

摄影(Ще Ин)

Evolution of the Latin alphabet
Serif Sans-serif
Evolution of Hanzi
Song Ti (Сон Ти)
Kai Ti (Каи Ти)
Fang Song Ti (Фан Сон Ти)
Hei Ti (Хеи Ти)
Example of FangSongTi
Example of FangSongTi
Example of Kaiti
Example of KaiTi
Example of Serif typeface Example of Serif typeface Example of Serif typeface
Cover of Vogue Cover of Harper's Bazaar
SongTi + Serifs HeiTi + Sans-serifs

Web characteristics

  • Multiple outputs
  • Partial control
  • Uncertain delivery
The web is a unique medium on its own.

Font formats for web use

WOFF2 (Web Open Font Format 2)
WOFF (Web Open Font Format)
OTF (OpenType)
TTF (TrueType)
EOT (Embedded Open Type)
SVG (Scalable Vector Graphics)

@font-face rule

@font-face {
    font-family: 'Magnetic Pro';
    src: url('../fonts/magnetic-pro-light.woff2') format('woff2'),
         url('../fonts/magnetic-pro-light.woff') format('woff');

Declare your Latin fonts first

font-family: 'Gentium Basic', 'PingFang TC', 'Microsoft JhengHei', '微軟正黑體', 'Heiti TC', '黑體-繁', sans-serif;

Font rendering for Mac and Windows is different, and sometimes the Latin characters in Chinese fonts don't look good on Windows.

Put your font names in quotes. Just in case.

Generic font families

Dependent on OS, HTML language, character set and browser.

serif Times New Roman, SimSun, SongTi SC
sans-serif Arial, Microsoft Yahei, PingFang SC
monospace Consolas, SimSun, PingFang SC
cursive Comic Sans MS, Apple Chancery, SimSun (oblique), SongTi SC (oblique)
fantasy Gabriola, Impact, Papyrus, Microsoft Yahei, PingFang SC

Level 4 is adding system-ui, emoji, math and fangsong

Basic font properties

font-weight Specifies the weight of the glyphs in the font. Can use keywords or numerical values.
font-stretch Selects a normal, condensed or expanded face from a font family. Range spans over 9 keywords.
font-style Allows italic or oblique faces to be selected.
font-size Indicates the desired height of the glyphs. Takes absolute or relative values.
font-size-adjust Adjusts the font-size to preserve the x-height of the first choice font.
font-synthesis Controls whether user agents are allowed to synthesize bold or oblique font faces when missing.

Using non-system fonts

The @font-face rule allows us to link to fonts, either locally or external, which are fetched and activated when needed.

We can use multiple @font-face rules to construct font families.

A rule consists of the @font-face keyword followed by a block of font descriptors.

Anatomy of an @font-face rule

@font-face {
    font-family: <family-name>
    src: [ <url> [format(<string> #)]? | <font-face-name> ] #
    font-style: normal | italic | oblique 
    font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
    font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
    unicode-range: <urange> # 
    font-variant: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] 
    font-feature-settings: normal | <feature-tag-value> # 
@font-face {
  font-family: 'Magnetic Pro';
  src: url('magnetic-pro-light.woff2') format('woff2'),
     url('magnetic-pro-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;

@font-face {
  font-family: 'Magnetic Pro';
  src: url('bender.woff2') format('woff2'),
     url('bender.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0020, U+0414, U+0425, U+0427, U+0436, U+0439, U+043d, U+0443, U+044c-U+044d;

Font feature properties (1/2)

font-kerning font-variant-position font-variant-position-ligatures
font-variant-numeric font-variant-caps font-variant-alternates

Font feature properties (2/2)

font-variant-east-asian font-language-override font-feature-settings

Provides low-level control of advanced OpenType features

Setting up Typekit
Configuring Typekit settings
“Be formless, shapeless, like water. Now you put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put it in a teapot, it becomes the teapot. Now water can flow, or it can crash. Be water, my friend.”
—Bruce Lee

Looks familiar?

Some (hopefully) relevant textBe thankful they didn’t ask for a carouselProbably some more marketing copy for each of the 3 images above that will only get passed to you after you’ve built most of site, which is never the length of the lorem ipsum your designer used and hence he/she will ask you how come the columns cannot be the same height.

The magic of Writing Modes

CSS Writing Modes Level 3 defines CSS features to support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

You can make your browser literally turn on its side from left-to-right.


Or make it read from right-to-left.


Vertical text is fun!

Behaviour of horizontal-tb
Behaviour of vertical-lr
Behaviour of vertical-rl

writing-mode property

horizontal-tb 从1987到现在
vertical-rl 从1987到现在
vertical-lr 从1987到现在
sideways-rl* 从1987到现在
sideways-lr* 从1987到现在

text-orientation property


text-combine-upright property

digits <integer>*
Codepen example for text-combine-upright

Typography suggestions

  • Use and declare the correct font-family
  • Make sure the font-size is large enough
  • Set line-height for sufficient breathing room
  • Use text-align: justify
  • Keep lines to around 25-35 characters
  • Set a margin-bottom for the p element
Vertical text experiment
Vertical text experiment
Vertical centring for vertical layout

Willem de Kooning

If Jackson Pollock was the public face of the New York avant-garde, Willem de Kooning could be described as an artist’s artist, who was perceived by many of his peers as its leader. He was born in Rotterdam, where he grew up in an impoverished household and attended the Rotterdam Academy, training in fine and commercial arts. In 1926, the adventurous young artist stowed away on a ship bound for Argentina. While the ship was docked in Virginia, de Kooning slipped off, skirted immigration, and made his way to New Jersey—and so began the rest of his life.

CSS Logical Properties

Vertical text with CSS
Bookshelf-style design with vertical text

A long list of references