Chinese typography on the web

By Chen Hui Jing / @hj_chen

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

Chen (Чэнь)

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

Phoenician alphabet

甲骨文

Hippopotamus
(English) 12 letters

河马(Хе Ма)

продовольственный
(Russian) 17 letters

食品(Щи Пин)

Grianghrafadóireachta
(Irish) 21 letters

摄影(Ще Ин)

Web characteristics

Multiple outputs
Partial control
Uncertain delivery

The web is a unique medium on its own.

We first need to understand the web as a medium, and to be fair, it is a rather young medium. But the web is nothing like we've seen before. It is a dynamic and interactive medium, and many designers, especially those who are used to having absolute control over the final presentation, find this disturbing.

The thing is, with the web there is no longer a single final form of presentation, as multiple output devices could be used to view it.

Authors can only influence the presentation, rather than control it. A combination of influences from various sources, like the browser and users themselves will determine how the final output looks like.

Dependable delivery is also uncertain, as web resources are distributed across multiple connected servers and the possibility of any of them being unavailable is pretty significant.

Although many would like to think the web is simply print expressed on an electronic screen, it is not. It 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)

Here's a list of common font formats used on the web. But why on earth do we need so many formats? Well, here's my non-technical explanation. Fonts are simply containers for glyphs, and font formats describe these glyphs. The earliest fonts were pixel-based bitmaps, which were fine for low-resolution screens, but for printing on high-resolution printers, we needed a better solution. Either compress the bitmapped glyphs, or find an alternative rendering method.

Donald Knuth created Metafont in 1978 for the TeX system, which generated compressed bitmap fonts. John Warnock, founder of Adobe, came up with Postscript in 1985, which was the very first vector font.

TrueType was Apple and Microsoft's answer to Adobe's font monopoly. Both companies then worked separately to improve TrueType, especially with regards to fonts for East Asian writing systems. And Apple came up with TrueType GX, later renamed Apple Advanced Typography. Microsoft came up with TrueType Open and eventually Adobe joined in and together they developed OpenType.

EOT, or embedded OpenType is Microsoft's proprietary standard, which is a compact form of OpenType fonts meant for use on web pages. Although they tried to submit this as a W3C recommendation, it was rejected in favour of WOFF, or the Web Open Font Format. WOFF was quite the industry effort, involving Microsoft, Mozilla and Opera.

@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');
  }

Those of us who have worked on projects with self-hosted fonts would probably have used something called the @font-face rule, where we declare a list of different font formats, in the hopes our fonts will show up correctly in as many browsers as possible. The number of font formats we need to declare has decreased over the years and right now, you can pretty much get away with declaring just WOFF and WOFF2.

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.

Not counting the font shorthand, there are six basic font properties. The last two were introduced in Fonts Level 3. I'll quickly run through the first four. font-weight is for indicating the stroke thickness of your font, and can take values from 100 to 900 or keywords, like bolder or lighter.

font-stretch is used to select fonts based on their widths, ranging from condensed to expanded. font-style allows for the selection of italic or oblique faces. Italics are cursive, but obliques are sloped versions of a regular face.

font-size indicates the desired height of the glyphs, and we can use absolute values like pixels and ems or relative values like percentages or viewport units, as well as keywords like larger or smaller.

font-size-adjust was put in to address legibility issues. Faces with low x-heights may sometimes be less legible, especially when they are triggered as fallback fonts. This property adjusts the font size of the fallback such that its x-height matches the first-choice font.

font-synthesis is also new, and was put in to address the issue of faux bolds and faux italics. Sometimes the true italic or heavier version of a font does not exist and the browser will try to mimic those styles, and the end result often does not look good. So now you can set this property to a value of none, to prevent the browser from doing that.

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.

The @font-face rule allows us to use fonts beyond those available on a given platform by linking to those font files, which could be locally available or from an external source. Each rule specifies the characteristics of a single font within a family. These fonts will only be loaded when required. Multiple @font-face rules can be used to build an entire font family. And it consists of the @font-face keyword plus a bunch of font descriptors. Font descriptors and CSS properties are not the same thing.

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> # 
  }

This is how an @font-face rule looks like. I don't think most people read through the CSS specification like they would a novel, so it's perfectly fine if this looks excessively complicated to you. Even though there's a whole lot of stuff in here, only the font-family descriptor and the src descriptor are mandatory.

If either of them are absent, the entire rule is ignored. Now the font-family descriptor is simply a label that we reference in other CSS declarations. So even if you're using say, Frutiger, you could actually label it “Pelmeni” and it would still work.

The src descriptor is comma-separated list of external references or locally-installed font face names. It is made up of the declaration of the font file's location, and an optional format hint. If the browser doesn't support a particular font format stated in that hint, the font file won't be loaded.

The next 3 descriptors, for style, weight and stretch, are used to match styles to a particular typeface in later declarations. Again, they are descriptors, so technically you could assign a black typeface to a font-weight of 100 and proceed to confuse your team members who cannot figure out why setting a weight of 100 gives them this massively bold typeface. Please don't do that.

Every Unicode character is represented by a unique code point. The unicode-range descriptor allows us to specify individual code points or a range of code points for characters we want displayed using a particular font face. We can make use of this to create custom font families with glyphs from different typefaces.

@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 were introduced in Fonts Level 3. Earlier, when I talked about all the different font formats, I mentioned that Apple and Microsoft worked to improve the original implementation of TrueType. OpenType and Apple Advanced Typography are what we term modern font technologies, and they can contain a lot more glyphs that previous font formats.

So we can utilise a variety of typographic features like swashes, ligatures, old-style numerals and so on. The original font-variant property that could only be used to trigger small-caps was also expanded, a great deal. Because there are so many properties available, each with lots of values, I'm just going to do a general overview. Some of you may be wondering, what's the point of having all these typographic features?

They are part and parcel of good typography, which is necessary to hold your reader's attention. The written word is a transference of speech, which is heard, into something visual, to be seen. Good speakers will vary their cadence, use gestures, emphasise certain words.

Typographic features like small caps, correct use of italics and punctuation do the same for text. Other features like old style numerals and ligatures help maintain typographic colour, to make reading more comfortable.

So these are the features you can turn on via CSS, but note that the font you are using must have these features to begin with. This lot up there, are the features most often mentioned at web typography talks.

Font feature properties (2/2)

font-variant-east-asian

font-language-override

font-feature-settings

Provides low-level control of advanced OpenType features

Few people talk about font-variant-east-asian. What this property does is allow for glyph substitution and positioning in East Asian text. For the benefit of the audience who can't read Han characters, it might seem like these languages share the same glyphs but actually, it depends. Han unification, involves assigning the same code point to different glyphs, and it has been quite a controversial issue.

But essentially, the same code point can have variant glyphs depending on the language being used. Like, simplified Chinese glyphs versus traditional Chinese glyphs. Japanese glyphs have their own specification known as JIS or Japanese Industrial Standard, and they too have alternate glyphs for the same character. This property allows us to toggle these variant glyphs.

Now the font-language-override property controls the rendering of language-specific glyphs in the typeface used. A commonly raised use case is the use of common ligatures, for the fi combination. The Turkish alphabet has both a dotted and dotless i, so the fi ligature shouldn't be used. Maybe a typeface doesn't recognise a lesser-known language like the Azeri language, which, similar to Turkish, has a dotless i, the font-language-override property can be used to force the usage of Turkish glyphs instead.

font-feature-settings allows us to toggle very specific OpenType properties. Last I checked, there were 141 OpenType feature tags to cover things like vertical kerning, unicase, scientific inferiors and so on.

Browser support for each of these individual properties varies at the moment, with Firefox being the only browser that has supported all of them since version 34.0. font-feature-settings, on the other hand, has quite good support across most browsers. The specification recommends to utilise the respective font-variant properties over the font-feature-settings property, but until browser support becomes more robust, I guess we'll continue to see this property being used instead.

Screenshot of Google Fonts website — Google Fonts

Screenshot of Adobe Typekit website — Adobe Typekit

Screenshot of cloud.typography website — cloud.typography

Setting up Typekit — Configuring Typekit settings

Screenshot of justfont website — justfont

Screenshot of iFontCloud website — iFontCloud

Screenshot of 华康威font website — DynaFont Online

Screenshot of Font Squirrel website — Font Squirrel

Screenshot of FontPrep interface — FontPrep

Screenshot of FontSpider website — Font Spider

But at the end of the day, we still need to keep in mind that CJK fonts weigh in on a megabyte scale. The font hosting services do offer optimisations like lazy loading and dynamic subsetting, so hopefully that helps. If you want to serve your own fonts, there are also tools available to help reduce the size of your font files.

If I'm building a non-Chinese site, I always turn to Font Squirrel to generate my webfonts, because subsetting. Font Squirrel's web font generator allows for a very granular level of customisation that I haven't found in other tools. There is a desktop application for Mac called FontPrep, which does subsetting quite well too.

Font Spider is an open-source command line tool that does smart webfont compression and conversion. It offers the ability to subset fonts based on the glyphs being used on your site. Interestingly, it seems they all like to use animals for branding.

But if you're really concerned about speed and page weight, you can simply choose not to use any webfonts at all, because honestly, I think that system fonts shipped with the newer OSes are getting much better.

I personally use a hybrid technique, where the body text is set in a system font, but for the big titles and display text, where there is a limited number of characters I know will not change much over time, I generate webfonts containing only those glyphs, which makes the font file much much smaller than the full character set.

“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?

Responsive websites are often mentioned in the same breath as media queries, the conditional rule that allows us to create different layouts at different screen widths. Often, people use frameworks to help them build responsive websites, and I can understand why. Especially if they are not familiar with CSS, or they are short of time, or they just don't like CSS in general. But frameworks quite prescriptive, and that's how we end up with a lot of websites that utilise very similar layouts.

CSS layout has become so much more mature since it first began. There had never been a specification that was created specially for layout until Flexbox and Grid came along. And that is fantastic. We have a lot of CSS properties at our disposal now. Around 496 the last time I checked. And it is up to us to combine and implement them creatively.

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 — horizontal-tb

Let's cover some basic terminology. First up, inline base direction, which is that blue arrow there. It is the direction that content is ordered on a line, and defines where the line starts and ends. The green arrow indicates block flow direction, which is the direction block-level boxes stack and the direction of this stacking within their container. The writing-mode property dictates the block flow direction. What you see here is the standard default value of horizontal-tb.

Rotate

Translate

There are two ways to do this, by rotation or by translation. Scripts that have native vertical orientations will have an intrinsic bi-orientational transform, so regardless of whether the text is laid out horizontally or vertically, the glyphs transform and will always be upright. Latin-based characters, on the other hand, rotate. But glyphs can always be set sideways or upright with the text-orientation property.

`writing-mode` property

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

This is what happens to your text when the different values of writing-mode are applied. These examples look correct because I'm using Firefox at the moment, but the last two examples, sideways-rl and sideways-lr have actually been deferred to Writing Modes Level 4, so it might be a while before we see them in other browsers.

`text-orientation` property

从1987到现在

mixed

从1987到现在

upright

从1987到现在

sideways

`text-combine-upright` property

民國106年7月3日

none

民國106年7月3日

all

民國106年7月3日

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

Because East Asian composition is quite different from Western composition, the W3C Japanese Layout Task Force has published a document known as the Requirements for Japanese Text Layout, which serves as a reference for browser implementers so Japanese web layouts can be rendered correctly. There is currently a Chinese equivalent being worked on right now.

Based on those documents, and through my own personal experimentation, I sort of settled onto certain typographic conventions when I'm setting Chinese text.

Use the appropriate font family. For example, Source Han Serif has typefaces for simplified Chinese, traditional Chinese, Japanese and Korean. Pick the right one.
This one I mentioned earlier, that Chinese characters are denser than typical Latin-based alphabets, because of all the strokes, so you may want to bump up the font size a little bit. Reading small characters on a screen is not a pleasant experience.
For line-height there is actually a magic number. Ideally, setting it between 1.5 to 2 works fine so 1.7 is a good choice. This gives the text enough breathing room and a more even typographic colour.
Every Chinese character takes up the same height and width, they are squares, even punctuation are full width characters. Using text-align: justify lines everything up neatly.
Keeping lines to between 25 and 35 characters is something I picked up from print books. A lot of text-heavy books I find have lines with around 26 to 28 characters.
For print books, the start of a new paragraph is indicated by a two character indent, but for the web, it looks better to have spacing between paragraphs, so just set a margin-bottom to distinguish different paragraphs of text.

As I mentioned earlier, 25-35 characters per line is a reasonable length, and that's done by clamping the height of the content block. Because Chinese characters are squares, that also implies that in normal circumstances, a height of 25 ems gives you 25 characters per line. To vertically centre the content block, we can actually set the top and bottom margins to auto, something we wished we could do but couldn't for horizontal writing. But trying to centre things horizontally is equally painful, if not more, for vertical writing.

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

That's why we have a CSS Logical Properties specification, which introduces new CSS properties that are flow-relative equivalents of physical box model properties. Properties like that use block-start and block-end or inline-start and inline-end instead of left and right. This specification is in the thick of working draft status but I'm eager to see it developed and implemented. For now, support is kind of limited.

Screenshot of PGHK homepage — Penang Hokkien website

Vertical text with CSS — Bookshelf-style design with vertical text

I also kept the switcher, which is actually a checkbox hack implementation. When I built this site, Grid hadn't landed yet, so I used Flexbox for a lot of the layout. Flexbox support is great, I mean, it has wider coverage than border-radius, but Flexbox with writing-mode? Not so good. I'll be honest, there are quite a large number of cross browser issues. Like, on Firefox, if you don't specify a width on the element with a vertical writing mode, it gets kicked off the page.

Raising bugs for Firefox — Bugzilla@Mozilla

But that doesn't mean we should just shy away from using vertical text altogether. In fact, there's never been a better time than now to live on the cutting edge. Evergreen browsers are a thing now, with bug fixes and new features being shipped faster than ever. CSS Grid, I feel, is one of the best rollouts of a new major CSS feature ever, with almost all the major browsers shipping it in March this year. By now, more than 60% of the market is using a browser that supports Grid.

And here's a little secret I discovered, by raising bugs we find when trying out new features, we are actually showing browser vendors that these features are in demand.

This works both ways, if we don't use features simply because they are buggy, browser vendors will think that nobody really cares about that feature and choose to fix more pressing bugs instead. But if more of us use those features and raise the bugs we discover, it sends a signal to browser vendors that people are using these features and encourage them to address related bugs sooner than later.

A long list of references

Consumer barriers to mobile internet adoption in Asia
The Relationship between Local Content, Internet Development and Access Prices
Usage of content languages for websites
No @font-face Syntax will ever be Bulletproof, Nor Should It Be.
字体漫谈
Source Han Serif / Noto Serif CJK History & Development
Chinese Fonts & Related Issues
Zhang, X. & Han, Q. (2009). The history of Chinese printing: (illustrated). Paramus, N.J: Homa et Sekey Books.
Brokaw, C. & Reed, C. A. (2010). From woodblocks to the Internet: Chinese publishing and print culture in transition, circa 1800 to 2008. Leiden: Brill.
Tsien T. (2011). Collected writings on Chinese culture. Hong Kong: The Chinese University Press.
Tsien, T. & Shaughnessy, E. L. (2013). Written on bamboo & silk: the beginnings of Chinese books & inscriptions. Chicago: The University of Chicago Press.
Houston, K. (2016). The book: a cover-to-cover exploration of the most powerful object of our time. New York: W.W. Norton & Company.
厉致谦 (2013). 西文字体的故事. 上海市: 同济大学出版社.
Choi, K. E., & Kim, M. S. (2015). A Comparative Study on the Sociocultural Drivers in the Development of Printing Technology in Korea and Europe. Korea Journal, 55(4), 7-35.
Park, H. O. (2014). The History of Pre-Gutenberg Woodblock and Movable Type Printing in Korea. International Journal of Humanities and Social Science, 4(9), 1.
Haralambous, Y., & Horne, P. S. (2007). Fonts & encodings.

Web awards for vertical writing — http://tategaki.github.io/awards/

Jen Simmons' experimental layout lab — http://labs.jensimmons.com/

Спасибо!

https://www.chenhuijing.com

@hj_chen

@huijing

Chinese typography on the web

Phoenician alphabet

甲骨文

Web characteristics

Font formats for web use

@font-face rule

Declare your Latin fonts first

Generic font families

Basic font properties

Using non-system fonts

Anatomy of an @font-face rule

Font feature properties (1/2)

Font feature properties (2/2)

Looks familiar?

The magic of Writing Modes

writing-mode property

text-orientation property

text-combine-upright property

Typography suggestions

Willem de Kooning

CSS Logical Properties

A long list of references

Спасибо!

Anatomy of an `@font-face` rule

`writing-mode` property

`text-orientation` property

`text-combine-upright` property