East Asian web typography

Crossing cultural boundaries for web layout inspiration

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

What is typography?

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

A a	B b	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	R r	S s	Š š
Z z	Ž ž	T t	U u	V v	Õ õ
Ä ä	Ö ö	Ü ü		Estonian (27)

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

א	ב	ג	ד	ה	ו
ז	ח	ט	י	ך כ	ל
ם מ	ן נ	ס	ע	ף פ	ץ צ
ק	ר	ש	ת	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)

Communication
(English) 13 letters

沟通

Sagedussõnastik
(Estonian) 15 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

🇪🇪

Population: 1,306,788 population (est. 2018)

Internet users: 1,276,521 (Dec 2017)

97.7% internet penetration rate

Sources: Internet World Stats

Distribution of content languages on the web

Sources: W3Techs

“…smaller languages are not being given a chance to evolve and keep up to speed in the digital age…”
—Rihards Kalniņš, The Guardian

“In order to tend to the continued development of our languages, we must continue to create technologies that provide smaller languages with the same support enjoyed by larger ones.”
—Rihards Kalniņš, The Guardian

Let's talk about CSS

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)

But why do we have so many different font formats anyway? Time for a bit of history. 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: 'Reforma';
  src: url('reforma1969-gris.woff2') format('woff2'),
       url('reforma1969-gris.woff') format('woff');
}

On the practical side of things, we use the @font-face rule to declare a list of different font formats for browser support but 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.

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. You could call it “Buratino” if you wanted.

The src descriptor tells the browser where to find the font file, it could be an external URL, or a local 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 looking for 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 */
}

Toggle font highlighter tool from about:config

Go to about:config from your address bar

Search for fonthighlighter and double-click it to change its value to true

I learned the difference between the 2 after watching Chris Lilley, who chaired the group that developed @font-face, explain it during 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.

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

https://wakamaifondue.com/

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.

Axis Praxis — https://www.axis-praxis.org by Laurence Penney

Font Playground — http://play.typedetail.com by Zhang Wenting

Variable Fonts — https://v-fonts.com by Nick Sherman

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

The last property in this set is the text-combine-upright property, which address the issue of numerals and abbreviations in vertical text. For example, if your text contains dates. This property lets us fit all the digits into the width of one character and display them upright.

古巴Cuba

愛沙尼亞共和國Estonia

列支敦斯登Liechtenstein

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

Logical directions

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. So these directions continue to make sense, even if the writing mode of the document changes.

CSS Logical Properties

Increment navigation and menu — https://increment.com by Stripe

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

Responsive vertical to horizontal layout

Vertical mobile navigation

Broken flexbox layout — https://www.chenhuijing.com/blog/vertical-typesetting-revisited

Statistically, there aren't that many sites which use the writing-mode property. When I tried to use Flexbox with vertical writing-mode, I broke my browser.

💩

Frequency of major browser releases

Raising bugs for Firefox — Bugzilla@Mozilla

Raising bugs for Webkit — Webkit Bugzilla

Raising bugs for Edge — EdgeHTML issue tracker

A long list of references

Language Diversity Index Tracks Global Loss of Mother Tongues
The Internet Is Killing Most Languages
The Endangered Languages Project
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
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.
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/

Aitäh!

https://www.chenhuijing.com

@hj_chen

@huijing

Font used is Reforma, by PampaType

East Asian web typography

Crossing cultural boundaries for web layout inspiration

What is typography?

Phoenician alphabet

甲骨文

Distribution of content languages on the web

Let's talk about CSS

Web fonts

What is a font?

And what are glyphs?

Font formats for web use

@font-face

Anatomy of an @font-face rule

CSS font properties

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

Logical directions

CSS Logical Properties

Frequency of major browser releases

A long list of references

Aitäh!

Anatomy of an `@font-face` rule

`font-synthesis`

`font-variant-east-asian`

`writing-mode` property

`text-orientation` property

`text-combine-upright` property