When East meets West

Web typography and how it can inspire modern layouts

Chen(surname) Hui Jing(given name) 🏀 👩‍💻 📝

What does the web mean to you?

Distribution of languages used around the world

Distribution of content languages on the web

Sources: Worldometers, Ethnologue, W3Techs

Gal Gadot Wonder Woman poster — https://youtu.be/JJv9ifzVh-U?t=23m33s

Internationalisation (i18n)

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

Do developers even care about typography?

“Web design is 95% typography”
—Oliver Reichenstein

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

There are many definitions of Typography out there, and I personally like this one, by Gerrit Noordzij. Letters are the building blocks of a writing system, regardless of language. Now I want you to think about the languages you're familiar with, which I assume is Hebrew and English. Both of these are alphabetic languages.

Israel is a world leader in technology and innovation, with a robust startup scene. So it is no wonder that Chinese investments in Israeli startups exceeded $500 million in 2015. Earlier this year, Israel and Japan signed 2 agreements in Jerusalem that would increase collaboration on both business and cyber-security ventures in the hopes it would double the trade volume between both countries.

There's a bit of an East-Asian relationship developing here. So you can think of this talk as providing a little bit of cultural exchange. Now I'm going share about an East Asian language that I am very familiar with, which is Chinese.

Phoenician alphabet

甲骨文

Hippopotamus
(English) 12 letters

河马

וכשבזרועותיהם
(Hebrew) 13 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? We'll need to go a bit back in time for this. The earliest fonts were pixel-based bitmaps, which were fine for low-resolution screens, but for printing on high-resolution printers, a better solution was needed.

It was such a worthy problem that smart people came up with two different solutions. 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, the very first vector font, and it really took off.

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. Microsoft came up with TrueType Open in 1994 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. WOFF2 is an improvement over WOFF with significantly better compression rates.

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

On the practical side of things, the @font-face rule is used to declare a list of different font formats. We do this 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.

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, with all the available descriptors you can declare. Font descriptors and CSS properties are 2 different things.

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.

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

And these, as mentioned earlier, are font descriptors, and only the font-family descriptor and the src descriptor 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 “Kreplach” 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. 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. Perhaps an idea for next year's April Fool's day.

@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('carmelitregular.woff2') format('woff2'),
     url('carmelitregular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+05D5, U+05DB, U+05E9, U+05D1, U+05D6, U+05E8, U+05D5, U+05E2, U+05D5, U+05EA, U+05D9, U+05D4, U+05DD, U+05D0;
  }

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.

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`

`font-feature-settings`

Provides low-level control of advanced OpenType features

aalt
abvf
abvm
abvs
afrc
akhn
blwf
blwm
blws
calt
case
ccmp
cfar
cjct
clig
cpct
cpsp
cswh
curs
cv01-cv99
c2pc
c2sc
dist
dlig
dnom
dtls
expt
falt
fin2
fin3
fina
flac
frac
fwid
half
haln
halt
hist
hkna
hlig
hngl
hojo
hwid
init
isol
ital
jalt
jp78
jp83
jp90
jp04
kern
lfbd
liga
ljmo
lnum
locl
ltra
ltrm
mark
med2
medi
mgrk
mkmk
mset
nalt
nlck
nukt
numr
onum
opbd
ordn
ornm
palt
pcap
pkna
pnum
pref
pres
pstf
psts
pwid
qwid
rand
rclt
rkrf
rlig
rphf
rtbd
rtla
rtlm
ruby
rvrn
salt
sinf
size
smcp
smpl
ss01
ss02
ss03
ss04
ss05
ss06
ss07
ss08
ss09
ss10
ss11
ss12
ss13
ss14
ss15
ss16
ss17
ss18
ss19
ss20
ssty
stch
subs
sups
swsh
titl
tjmo
tnam
tnum
trad
twid
unic
valt
vatu
vert
vhal
vjmo
vkna
vkrn
vpal
vrt2
vrtr
zero

Web layouts over the years

Within the short span of the web's life, we've seen web layouts evolve as browser technologies and web standards matured. In the web's infancy, there was no layout whatsoever. We were still amazed that the web even existed.

Then, during the pre-school age of the web, we started to use tables to do layout. And that was fun, because like most kindergarteners, everything seemed like a good idea. There were all sorts of crazy, creative layouts on the web.

But when we got to the pre-teen era, things started to conform a little more. We got a bit more self-concious, a little less radical, it wasn't that cool to be different. Float-based layouts to build sites with headers, sidebars and footers were the most socially acceptable.

By high school, life had gotten complicated, and angsty. CSS was hard. Responsive design, what? People suck. Browsers are broken. Oh, someone will do all that for me? Frameworks? Sure! I don't give a crap. So we ended up with sites that utilised very similar layouts.

2017: the year of CSS Grid

“We need to translate ideas that we find in other places, not transfer them.”
—Jen Simmons

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.

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

When East meets 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 rule

Anatomy of an @font-face rule

Basic CSS font properties

Anatomy of an @font-face rule

Declare your Latin fonts first

Font feature properties

font-variant-east-asian

font-feature-settings

Web layouts over the years

2017: the year of CSS Grid

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

תודה!

Anatomy of an `@font-face` rule

Anatomy of an `@font-face` rule

`font-variant-east-asian`

`font-feature-settings`

`writing-mode` property

`text-orientation` property

`text-combine-upright` property