East Asian web typography

Crossing cultural boundaries for web layout inspiration

Hui Jing (Хуі Джинг)

Chen (Чен)

🇲🇾 🏀 👩‍💻 📝 🦊

What is typography?

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

ا	ب	ج	د	ه	و
ز	ح	ط	ي	ك	ل
م	ن	س	ع	ف	ص
ق	ر	ش	ت	ث	خ
ذ	ض	ظ	غ	Arabic (28)

А а	Б б	В в	Г г	Ґ ґ	Д д
Е е	Є є	Ж ж	З з	И и	І і
Ї ї	Й й	К к	Л л	М м	Н н
О о	П п	Р р	С с	Т т	У у
Ф ф	Х х	Ц ц	Ч ч	Ш ш	Щ щ
Ь ь	Ю ю	Я я		Ukranian (33)

א	ב	ג	ד	ה	ו
ז	ח	ט	י	ך כ	ל
ם מ	ן נ	ס	ע	ף פ	ץ צ
ק	ר	ש	ת	Hebrew (22)

A a	B b	C c	D d	E e	F f
G g	H h	I i	J j	K k	L l
M m	N n	O o	P p	Q q	R r
S s	T t	U u	V v	W w	X x
Y y	Z z			English (26)

Source Hans Serif Regular (65,535 glyphs)

Hippopotamus
(English) 12 letters

河马(Ге Ма)

місцезнаходження
(Ukrainian) 16 letters

位置(Вей Жи)

Grianghrafadóireachta
(Irish) 21 letters

摄影(Ше Їн)

Phoenician alphabet

甲骨文

“Chinese-script projects are crazy. The scope is mind-blowing.”
—David Březina from The long, incredibly tortuous, and fascinating process of creating a Chinese font

Distribution of languages used around the world

Distribution of content languages on the web

Sources: Worldometers, Ethnologue, W3Techs

Local content

“Local content is a critical component of efforts to bridge the digital divide.”
—Internet Society Policy Brief: Local Content

Internationalisation (i18n)

“To ensure that the technology supports text in any writing system of the world.”
—W3C Internationalisation

Web fonts

The CSS3 Fonts specification describes the basic controls CSS provides for selecting and using fonts within documents.

http://bit.ly/css-font-history/

What is a font?

And what are glyphs?

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)

If you've ever used web fonts before, you would have seen these font formats. To understand why we have so many of them, we need to go back a time a little bit. The earliest fonts were pixel-based bitmaps, which didn't work out so well when it came to high-resolution printing.

A lot of smart people worked on this problem. And one of the solutions came from Adobe founder, John Warnock. He created Postscript in 1985, the very first vector font, and it really took off.

TrueType was Apple and Microsoft's answer to Adobe's font monopoly. Microsoft came up with TrueType Open in 1994 and eventually Adobe joined in and together they developed OpenType.

Microsoft also came up with EOT or embedded OpenType, a proprietary format 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. WOFF2 is an improvement over WOFF with significantly better compression rates.

@font-face

@font-face {
    font-family: 'Infini';
    src: url('infini.woff2') format('woff2'),
         url('infini.woff') format('woff');
  }

On the practical side of things, we use the @font-face rule to declare a list of different font formats in the hopes that our fonts will show up correctly in as many browsers as possible. Nowadays, it's safe enough to declare just WOFF and WOFF2.

The @font-face rule has many descriptors but only font-family and src, are mandatory.

If either of them are absent, the entire @font-face rule block is ignored. The font-family descriptor is simply a label that we reference in other CSS declarations. So maybe you're using Helvetica, you don't have to put “Helvetica” as the descriptor, вареники (va-re-ny-ky) would work just fine.

The src descriptor tells the browser where to find the font file, it could be an external reference, or a locally installed font. It also includes an optional format hint. If the browser doesn't support a particular font format stated in that hint, it won't bother loading the font at all.

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: 'Infini';
  src: url('fonts/infini.woff2') format('woff2'),
       url('fonts/infini.woff') format('woff');
  /* no range specified, defaults to entire range */
}

@font-face {
  font-family: 'Infini';
  src: url('fonts/linbiolimum.woff2') format('woff2'),
       url('fonts/linbiolimum.woff') format('woff');
  unicode-range: U+0400–U+04FF; /* Unicode range for Cyrillic characters */
}

I really have to shoutout Firefox Devtools here. if you're doing a lot of design work in the browser, it's just awesome. It has the best Grid Inspector tool, a Flexbox inspector, I could go on.

But anyway, there's also the font panel that shows which fonts are loaded on your page. And if you're using the latest Firefox Nightly 62, you can toggle a brand new font highlighter feature.

Here, you can see that both Infini and Biolinum are loaded for my custom Infini font-family. And when I hover over elements, I can see which characters are using which loaded fonts.

If a page does not contain any Cyrillic characters, Biolinum won't be loaded at all because it is not needed. Same goes for any pages that don't contain Chinese characters, then Ping Fang won't be loaded either.

All these font descriptors I've talked about thus far look very similar to CSS properties, but they are 2 completely different things.

Chris Lilley, who chaired the group that developed @font-face, explained it really well in his dotCSS talk. That properties are requests for styling and descriptors are descriptions of capabilities. A font-weight: bold; within a @font-face rule means this font can do bold. While a font-weight: bold; applied as a property means style this element with a font that can do bold.

Basic CSS font properties

`font-size`	Indicates the desired height of the glyphs. Takes absolute or relative values.
`font-weight`	Specifies the weight of the glyphs in the font. Can use keywords or numerical values.
`font-style`	Allows italic or oblique faces to be selected.
`font-stretch`	Selects a normal, condensed or expanded face from a font family. Range spans over 9 keywords.
`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.

CSS font properties are our typesetting tools for the web. When you use them in your CSS declarations, imagine that you're running your own printing workshop. And you're telling your apprentice, in this case, the browser, that you need a font which is a particular size, style, weight and so on.

Your apprentice then runs off to the back room, where all the fonts are kept, and tries to find the font that best matches your instructions based on their descriptors, which were assigned in the @font-face rule.

I believe most people have used the first 3 or 4 on this list in your stylesheets. And Lea already covered how they have been updated to take extra values for variable fonts, as well as font-display earlier. So I'm going to talk a bit about the last 2.

`font-size-adjust`

See the Pen Demo of font-size-adjust by Chen Hui Jing (@huijing) on CodePen.

The browser is a pretty smart apprentice. If a font file can't be found, they're not going to come back empty-handed. They'll find you a fallback font instead. When the fallback font has a lower x-height than the first choice font, it may be hard to read. With font-size-adjust, you can tell the browser to adjust the font-size so it matches the aspect ratio of the first choice font.

`font-synthesis`

Image credit: Piotr Grochowski

Font feature properties

`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. Modern font technologies allow fonts to contain a lot more glyphs that before. So we can utilise a variety of typographic features like swashes, ligatures, old-style numerals and so on.

These features 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.

We can turn these features on or off with 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-variant-east-asian`

Variable fonts

OpenType Variable font axes — Image credit: John Hudson

Mandy Michael's variable font demo showcase

See the Pen Grassy Text with Variable fonts. by Mandy Michael (@mandymichael) on CodePen.

https://www.axis-praxis.org/

Earlier, Lea showed us v-fonts.com, so I'm going to show you Axis Praxis by Laurence Penney, which is also a playground for the available variable fonts on the web. Taipei-based type foundry Arphic Technology created the first Chinese variable font, and you can play with it on Axis Praxis.

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).

So I want to introduce the writing-mode property, which deals specifically with vertical text.

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!

You literally turn the browser on its side. Some people might be saying, no big deal, we can do that with transforms too. Not exactly. Changing the writing-mode affects an elements box alignment axes.

`writing-mode` property

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

Properties marked with * have been deferred to Writing Modes Level 4.

This is what happens to your text when the different values of writing-mode are applied. The default is horizontal, top-to-bottom. To change the direction to vertical, we use vertical-rl or vertical-lr.

`text-orientation` property

从1987到现在

mixed

从1987到现在

upright

从1987到现在

sideways

`text-combine-upright` property

民國107年5月25日

none

民國107年5月25日

all

民國107年5月25日

digits <integer>*

Codepen example for text-combine-upright

Yayoi Kusama

A vital part of New York’s avant-garde art scene from the late 1950s to the early 1970s, Yayoi Kusama developed a distinctive style utilizing approaches associated with Abstract Expressionism, Minimalism, Pop art, Feminist art, and Institutional Critique—but she always defined herself in her own terms. “I am an obsessional artist,” she once said. “People may call me otherwise, but…I consider myself a heretic of the art world.”

Kusama was born in 1929 into a well-off but dysfunctional family in Nagano, Japan. Largely shielded from the horrors of World War II, she was, as she has claimed, nevertheless scarred by her mother’s cruelty, her father’s infidelities, and her family’s discouragement of her interest in art making. She started painting at the age of 10 when she began experiencing the visual and aural hallucinations that would plague her, while also fueling her creativity, for the rest of her life. She has maintained that her “artwork is an expression of my life, particularly of my mental disease.”

CSS Logical Properties

That's why we have a CSS Logical Properties specification. So instead of left or right, we use properties like block-start and block-end or inline-start and inline-end.

https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

W3C Internationalization (I18n) Activity website

Screenshot of PGHK homepage — Penang Hokkien website

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

Responsive vertical to horizontal layout

Vertical mobile navigation

Statistically, there aren't that many sites which use the writing-mode property. When I started building vertical layouts, 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 number of cross browser issues.

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.

And here's a little something I learned along the way. By raising bugs we find when trying out new features, we are actually telling browser vendors that these features are in demand.

Conversely, if we don't use features simply because they are buggy, browser vendors will think that nobody really cares about that feature and focus on something else instead. Because we all have to prioritise.

Raising bugs will probably gain you karma points and helps make the web better for all of us.

A long list of references

Source Han Serif / Noto Serif CJK History & Development
Chinese Fonts & Related Issues
Variable fonts, a new kind of font for flexible design
Introducing OpenType Variable Fonts
fvar — Font Variations Table
Variable Fonts on the Web
How to Use Variable Fonts on the Web
Getting started with variable fonts
全球首款! 文鼎晶熙黑體支援可變式字體格式
Creative text effects with CSS by Mandy Michael (video)
W3C Internationalization & Text Layout Requirements
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/

If you need inspiration for vertical layouts, the Tateyoko Web Awards site has a really nice list. While Jen Simmons has an experimental layout lab where she showcases all the different things that are now possible with modern CSS.

The thing about attending conferences, at least for me, is not so much to gain expertise overnight, but rather to get inspired. To learn of things that I did not know existed, to discover something new and perhaps gain insights and hear perspectives that never occurred to me before.

All these techniques I mentioned may or may not be relevant to you right now, and that's perfectly fine. But I do hope that you keep them at the back of your mind, so that one day, when the time comes, you can reach for them and create something extraordinary.

Дякую!

https://www.chenhuijing.com

@hj_chen

@huijing

Font used is Infini, Sandrine Nugue / Cnap

East Asian web typography

Crossing cultural boundaries for web layout inspiration

What is typography?

Phoenician alphabet

甲骨文

Local content

Internationalisation (i18n)

Web fonts

What is a font?

And what are glyphs?

Font formats for web use

@font-face

Anatomy of an @font-face rule

Basic CSS font properties

font-size-adjust

font-synthesis

Font feature properties

font-variant-east-asian

Variable fonts

The magic of Writing Modes

writing-mode property

text-orientation property

text-combine-upright property

Yayoi Kusama

CSS Logical Properties

A long list of references

Дякую!

Anatomy of an `@font-face` rule

`font-size-adjust`

`font-synthesis`

`font-variant-east-asian`

`writing-mode` property

`text-orientation` property

`text-combine-upright` property