Between East and West

Web typography and how it can inspire modern layouts

What does the web mean to you?

Michelle Yeoh — https://youtu.be/0b6HxVA_q2U?t=190

Distribution of languages used around the world

Distribution of content languages on the web

Sources: Worldometers, Ethnologue, W3Techs

Internationalisation (i18n)

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

هانق تواه هو محارب وبحار ملايوي من ملاكا عاش في عهد حكم السلطان منصور شاه في القرن الخامس عشر الميلادي، وكان واحداً من أقدر أميرالات السلطان الذين يسمون لكسامانا إلى جانب هانق كاستوري ، وهانق ليكيو، وهانق ليكير، وهانق جيبات.

从前，在马来西亚的西海岸边上，住着一个叫左汉的渔夫，他每天早出晚归出海捕鱼，卖鱼的钱除了吃饭、穿衣等必需的日常开销外，剩下的就不多了。左汉对辛辛苦苦的捕鱼生活很不满意，一心只想着发财。可是，左汉心里明白：靠捕鱼，自己是永远不会成为富翁的。

မိုးလင်းကတည်းကပင် ကောင်းကင်သည် အုံ့မှိုင်း ညို့မှုန်လျက်ရှိသည်။ တိမ်တိုက်ဟူ၍ ဘာမှကြည်လင်စွာမမြင်ရ။ မိုးကိုကြည့်ရသည်မှာ မြူသန်းနေသော ပင်လယ်ပြင်ကြီးလို ဝိုးဝိုးဝါးဝါးနေသည်။ မိုးသည် ကင်းကင်းလွတ်လွတ်စဲသည် ဟူ၍မရှိ၊ တဖွဲဖွဲ ဖွဲနေလိုက်၊ တဖြိုင်ဖြိုင်ရွာချလိုက်နှင့်၊ နောက် စွေ၍ နေလေသည်။

ลิลิตพระลอเป็นเรื่องความรักที่มีอนุภาพรุนแรงยิ่ง จนแม้ชีวิตก็ยอมพลีให้แก่กัน เนื้อเรื่องกล่าวถึงเมืองสองเมือง คือ เมืองสรอง กับเมืองสรวงเป็นศัตรูกัน เจ้าเมืองสรวงได้ฆ่าเจ้าเมืองสรองตายในสนามรบ พระชายาเจ้าเมืองสรองมีความแค้นเจ้าเมืองสรวงอย่างยิ่ง

ຄັນເມື່ອຄວາຍຕົວນັນຕາຍໄປແລ້ວຂຸນທັງສອງຈຶ່ງຝັງມັນໄວ້ທີ່ຫົວນາ ຕໍ່ມາຈຶ່ງມີເຄືອຫມາກນໍ້າເຕົ້າສອງເຄືອ ເກີດມາຈາກຮູດັງຄວາຍແລ້ວກໍ່ມີຫມາກນໍ້າເຕົ້າໃຫຍ່ສອງ ຫນ່ວຍ ເມື່ອຫມາກນໍ້າເຕົ້າໃຫຍ່ສອງຫນ່ວຍນັ້ນແກ່ແຫ້ງແລ້ວ ກໍ່ເລີຍໄດ້ຍິນສຽງຄົນ ຮ້ອງຊວ່າ ແຊວຢູ່ໃນຫມາກນໍ້າເຕົ້າຫນ່ວຍກົກ.

អាចោរនោះថា «បងស្រលាញ់ស្មោះហើយនាងពុំដឹងចិត្តបងចង់អោយបងស្បថ រឺអោយបងធ្វើម្ដេច ? » ។ មេនោះថា «បើស្រលាញ់ចិត្តមួយនឹងគ្នា មានតែលិទ្ធអណ្ដាតគ្នា » ទើបមេនោះលៀនអណ្ដាតហើយអោនទៅរកអាចោរនោះ។

Chẳng là xƣa nay bọn mình chƣa viết chung thƣ bao giờ. Cho nên cuối cùng phải thỏa thuận với nhau là cứ viết riêng thôi. Nhƣng lại xảy ra chuyện tranh cãi là để ai viết trƣớc bây giờ. Đành rút thăm vậy. Kết quả là mình trúng đầu tiên.

Isa pang round at nagka-ayawan na pagka 11:00 na halos ng gabi. Namahagi si Manuel ng kaunting balato at ang natirang malinis niyang pinanalunan ay P700 na kanyang ibinukod habang matuling tumatakbo ang taksi na patungo sa kanyang inuuwian.

生命對幾米來說，剛開始像「接龍」，有了這一張牌，才能找到下一張牌，他在罹患血癌之後，靠一本本創作，才能維繫生命絲線。他作品呈現的「童真的憂鬱」，帶給讀者深深的共鳴。功成名就的幾米也越來越自信從容，但他說：「外面的虛浮都是假的，空洞的，只有當我的手握著筆，埋頭工作的時候，我才是最堅強。」

🇲🇾 🏀 👩‍💻 📝 🎙

Do developers even care about typography?

“Web design is 95% typography”
—Oliver Reichenstein

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

Phoenician alphabet

甲骨文

Hippopotamus
(English) 12 letters

河马

Lebensgefährte
(German) 14 letters

伴侣

Grianghrafadóireachta
(Irish) 21 letters

摄影

The web is a unique medium of its own

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. Have you wondered why there are so many? There's a bit of history here. 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: 'Magnetic Pro';
    src: url('../fonts/magnetic-pro-light.woff2') format('woff2'),
         url('../fonts/magnetic-pro-light.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. 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.

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

If either of them are absent, the entire @font-face rule is ignored. 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 call it “Dumplings” 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, 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: 'Heiti Plus';
  src: local('Heiti SC');
  /* no range specified, defaults to entire range */
}

@font-face {
    font-family: 'Heiti Plus';
    src: url('fonts/meccanica-regular-webfont.woff2') format('woff2'),
         url('fonts/meccanica-regular-webfont.woff') format('woff');
    unicode-range: U+0-2FF; /* Unicode range for Latin characters */
}

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.

`font-size-adjust`

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

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. We can set the value of this property to the aspect ratio of the first choice font. Any fallback fonts triggered will have their font-size adjusted to match this ratio.

`font-synthesis`

Image credit: Piotr Grochowski

font-synthesis 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 so the browser will try to compensate. Unfortunately, the end result isn't pretty. With this property, you can set a value of none, to tell the browser, it's fine, appreciate the effort, but no thanks.

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.

Perhaps 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-variant-east-asian`

Few people talk about font-variant-east-asian. What this property does is allow for glyph substitution and positioning in East Asian text. If you're unfamiliar with Han characters, it might seem like these languages share the same glyphs, but it depends. Han unification involves assigning the same code point to different glyphs, and it has been quite a controversial issue.

We won't get into that, but the point is, 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.

Variable fonts

OpenType Variable font axes — Image credit: John Hudson

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

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!

`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

民國106年7月3日

none

民國106年7月3日

all

民國106年7月3日

digits <integer>*

Codepen example for text-combine-upright

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.

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 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 last year. By now, more than 70% 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

Usage of content languages for websites
The faces of Microsoft
No @font-face Syntax will ever be Bulletproof, Nor Should It Be.
字体漫谈
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
全球首款! 文鼎晶熙黑體支援可變式字體格式
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/

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

Between East and West

Web typography and how it can inspire modern layouts

What does the web mean to you?

Internationalisation (i18n)

Do developers even care about typography?

Phoenician alphabet

甲骨文

The web is a unique medium of its own

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

Willem de Kooning

CSS Logical Properties

A long list of references

Thank you!

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