Typesetting for a global web

Chen Hui Jing / @hj_chen

The 2000 Sydney Olympics were broadcast live back then. I was 13 years old. That was the first time I saw the Lithuanian team play. I didn't know much about Lithuania before that Olympics, but as the tournament went on, it was obvious they were an excellent team.

That clip was from the semi-finals between Lithuania and the United States. And I think most people at the time thought the Americans would cruise to the finals. Lithuania was down 12 points during half-time. But they came out scorching hot in the 2nd half and tied the game with 15.30 to go.

As the Lithuanians matched the Americans point for point, it seemed like the improbable could happen. That Lithuania would knock off the high and mighty Americans on one of the world's biggest stages.

My heart just sank when that last shot by Šarūnas Jasikevičius [Sha-ru-nas Yeh-se-ka-vih-chus] came up short. But Lithuanian basketball had left an impression on me for life. When 2004 rolled around, Šaras didn't miss.

Typesetting for a global web

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

🥑 Developer Advocate 🥑

What is typography?

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

—Wikipedia

Typography is the visual component of the written word.

—Matthew Butterick

Typography, the design, or selection, of letter forms to be organized into words and sentences to be disposed in blocks of type as printing upon a page.

—Encyclopedia Britannica

✨ Typography is writing with prefabricated letters. ✨

—Gerrit Noordzij

http://www.worldswritingsystems.org/

World writing scripts usage
(as of 2017)

A large number of the world's writing systems are alphabetic in nature, where a relatively small set of letters can be combined in many different ways to form words, phrases and sentences. Transforming something we hear and say, into something we see and read.

Currently, the dominant writing system is the Latin alphabet, originating from Italy in the 7th century. It has roots in the Etruscan, Greek and Phoenician alphabet.

This writing system spread with the expansion of the Roman Empire and yet again in the early modern period during which massive waves of European colonisation of the Americas, Oceania and parts of Asia and Africa took place.

The result of which gave us the numbers you see on this chart here, where Chinese and Arabic are a distant second and third.

Latin script distribution

A, a	Ą, ą	B, b	C, c	Č, č	D, d
E, e	Ę, ę	Ė, ė	F, f	G, g	H, h
I, i	Į, į	Y, y	J, j	K, k	L, l
M, m	N, n	O, o	P, p	R, r	S, s
Š, š	T, t	U, u	Ų, ų	Ū, ū	V, v
Z, z	Ž, ž			Lithuanian (32)

ا	ب	ج	د	ه	و
ز	ح	ط	ي	ك	ل
م	ن	س	ع	ف	ص
ق	ر	ش	ت	ث	خ
ذ	ض	ظ	غ	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)

What are glyphs?

And what about fonts?

Distribution of content languages on the web

Sources: W3Techs

As a result of the Sausio Sukilimas in 1863, Tsar Alexander II banned the use of the Latin alphabet and no publication in the Lithuanian language was permitted. This ban remained in force for 40 years, from 1864 to 1904, which I believe most of you are very aware.

But what the Russians did not realise was that this cemented the Lithuanian language as central to the national identity. And it consolidated support for an independent Lithuanian nation-state amongst the almost all the Lietuviai [Li-eh-tu-vay].

In spite of harsh measures to snuff out the lietuvių kalba [Li-eh-tu-vue], and by extension, Lietuvos kultūra [Li-eh-tu-vos], Knygnešiai [Ki-nig-ner-shei] kept Lithuanian literature alive and by the final years of the ban, Lithuanian books had reached every settlement in the country.

When you lose your language, you lose your soul.

—Ghil’ad Zuckermann

Writing systems on the web

Typesetting on the web

Authors should language-tag their content accurately for the best typographic behaviour.

—CSS Text Module Level 3

Declaring a content language on an element is one of the most basic things we can do, because it identifies the specific written form of the language to be used in that element, AKA the content writing system.

This is important because language and writing system conventions affect lots of typographic effects like line breaking, hyphenation, justification, glyph selection and more.

For CSS, language-specific typographic tailorings are only applied when the content language is explicitly declared. So it is in our best interest to tell the browser exactly what language our content is in to ensure a higher quality typographic experience for our users.

But before we go deeper into typesetting, let's talk about the characters we are trying to typeset first.

Bitmap fonts

PostScript

Structure of a Type 1 font program and dictionary structure which is created when it executes — Type 1 font program

One of the solutions to this problem came from Adobe founder, John Warnock. He had founded Adobe Systems in December 1982, with Charles Geschke. Together with Doug Brotz, Ed Taft and Bill Paxton, they created a page description language called PostScript, which went to market in 1984.

PostScript was great for printing, but it also handled fonts very well. An issue with fonts at the time was that they did not scale linearly at small sizes. Glyphs would get distorted during scaling, but PostScript handled this by providing additional metadata as font hints.

This was highly secret technology and the hinted fonts were compressed and encrypted into what Adobe called a Type 1 font, which only stored outline information. The first vector font format, and it did really well on the market.

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)

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.

Apple came up with TrueType GX, later renamed Apple Advanced Typography. Microsoft came up with TrueType Open in 1994 and eventually Adobe joined in the effort and together they developed OpenType.

Microsoft also came up with EOT or embedded OpenType, and tried to submit this as a W3C recommendation. However, it was rejected in favour of WOFF, or the Web Open Font Format.

WOFF is a font packaging format designed to provide lightweight, easy-to-implement compression of font data. Any properly licensed TrueType/OpenType/Open Font Format can be packaged in WOFF for web use. WOFF2 is an improvement over WOFF with significantly better compression rates.

Fonts on web pages

Fonts defined in CSS1 — Fonts section in CSS1 (17-Dec-1996)

Font tag defined in HTML3.2 — Font tag in HTML3.2 (14-Jan-1997)

Bridging a font reference with font data

Webfonts early public working draft — Earliest reference of webfonts I could find (21-Jul-1997)

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

There's an algorithm browsers use to determine which fonts to load and use. And even though it has expanded over the last 2 decades, here's a general idea of what goes on beneath the hood:

the User Agent (UA) takes the first family name defined in the font-family property (⏬)
if it's a generic family keyword, the UA will just pick the one it always uses and load that, otherwise it will try to find the family from fonts declared through @font-face (⏬)
once matched, the UA will assemble the set of font faces in the family, then pick the appropriate font face based on declared font properties
But if no matching face exists, or if the matched face is missing the glyph that needs to be rendered, the next family name is considered, and the UA runs through the steps again< (⏬)
Once a font face is matched (⏬), the font will be loaded (⏬)
If all the font family names have been run through, and still no font face matches, a system fallback font will be called into play

Font stacks

/* This text is in Lucida Grande */
.sans { 
  font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; 
}

/* A typical Chinese font stack, declare Latin fonts first */
.zh-hans {
  font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
}

Subset fail

Subsetting gone wrong on Medium for letters beyond the basic Latin set

Subsetting gone wrong on Medium for Lithuanian characters

@font-face rule

@font-face {
  font-family: 'Bellato';
  src: url('Bellota-Regular.woff2') format('woff2'),
       url('Bellota-Regular.woff') format('woff');
}

So this is an example of the lovely @font-face rule, and if you've ever tried loading webfonts before, you probably have written something similar. Given the support status these days, it's fairly safe to use just WOFF and WOFF2 at this point.

Some fun facts about the @font-face rule. It may have many descriptors but only font-family and src, are mandatory.

The font-family descriptor works purely like a label, so we can reference the font data via CSS. So maybe you're using Helvetica, you don't have to put “Helvetica” as the descriptor. You could call it “Šaltibarščiai” [Shal-tee-bars-che-yee] if you wanted.

The src descriptor tells the browser where to find the font data, it could be an external URL, or a local font. The font hint is optional though.

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

Firefox Font Tools

At this point, I want to shout-out the Firefox Font Tools and the entire team who works on DevTools. Some time last year, Patrick Brosset, who did a lot of work on the Font Tools, pinged me on Twitter about a feature for detecting missing characters.

I'm sure he had been thinking about it for a bit, but it was still an amazing surprise to see that he already had a working prototype the following day. The Fonts panel had been around in Firefox for a long time, possibly since version 24, but over the past 2 years, Firefox has really up-ed their DevTools game.

They've got by far the best Grid inspector, a Flexbox inspector, Shapes editor, I could go on. But fonts, right? Version 63 shipped with a suite of font tools including the polished up version of the font highlighter demonstrated in the above tweets.

Slides for This world mixed and blended by Gao Wei.

This is how it looks in action. Where you can see which fonts are loaded on the page, and which fonts are being loaded for which characters on your page. There's also information about all the fonts on the page in the bottom section there as well, so you can check your @font-face rules for any potential shenanigans.

@font-face {
  font-family: 'Raleway';
  src: url('fonts/raleway-regular.woff2') format('woff2'),
        url('fonts/raleway-regular.woff') format('woff');
  /* no range specified, defaults to entire range */
}

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

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

Variable fonts

Dragons

Space

Weight

Source Hans Serif (65,535 glyphs)

Progressive Font Enrichment

to enable the ability for only the required part of the font be downloaded on any given page, and for subsequent requests for that font to dynamically ‘patch’ the original download with additional sets of glyphs as required on successive page views—even if they occur on separate sites

—Jason Pamental on Web Fonts & Typography News #11

Incremental Transfer Demo

Google Fonts’ Incremental Transfer Demo

http://eepurl.com/ghd9b9/

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

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 CSS Fonts Level 3. They give us access to a variety of typographic features like swashes, ligatures, old-style numerals and so on, if the font we're using contains these features. Which means we can toggle them via CSS.

And if you're wondering, what's the point of having these so-called typographic features anyway? Aren't letters just letters?

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 the reading experience more comfortable.

`font-variant-east-asian`

Allows control of glyph substitution and sizing in East Asian text

一个简体字可能对应多个繁体字，如简体字「发」，其相应的繁体字可能为「發」或「髮」；一个繁体汉字对应多个简体汉字的情况与前者相比数量极少但仍需注意，如繁体字「乾」可能对应简体字「干」或「乾」。繁简汉字的对应关系具体应由上下文决定。

唖芦溢茨鰯嘘欝厩噂

`font-language-override`

To control the use of language-specific glyph substitutions and positioning

<!-- Macedonian lang code -->
<body lang="mk">
  <h4>Члeн 9</h4>
  <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
</body>

body {
  /* Serbian OpenType language tag */
  font-language-override: "SRB";
}

Example lifted from CSS Fonts Module Level 4

https://wakamaifondue.com/

http://book.webtypography.net/

Golden rules for web typography
by Richard Rutter

Don't trust computers
Use the default font size for paragraph text
Adjust type size according to reading distance
Adjust the font size if the typeface requires it
Set tables to be read
Set text at display sizes, even on small screens
Resize display text as you would an image
Reduce your payload
Optimise page render timing
Learn to use variable fonts

Web Typography @ CSS Day 2018

The `text-transform` property

If I want [flowers], I’m going to send them to myself.

Süße Soßen-Klöße genießen maßgeblich gefräßige preußische Nutznießer.

Ουδέν κακόν αμιγές καλού.

ァィゥェォヵㇰヶ

Line breaks in inline boxes

If an element generates zero boxes, was it really there at all?

If an element generates zero boxes, was it really there at all?

CSS for controlling line breaks

`line-break`	allows choosing various levels of “strictness” for line breaking restrictions
`word-break`	controls what types of letters are glommed together to form unbreakable “words”, causing CJK characters to behave like non-CJK text or vice versa
`hyphens`	controls whether automatic hyphenation is allowed to break words in scripts that hyphenate
`overflow-wrap`	allows the UA to take a break anywhere in otherwise-unbreakable strings that would otherwise overflow

Line breaking by Florian Rivoal @ dotCSS

If you're thinking, breaking lines, how hard can that be? Well, there is a lot of nuance because word breaking works differently depending on the language we're typesetting for.

For example, English wraps at spaces. But for Japanese or Chinese characters, the break is per character, usually but not always. Becauese line breaks are prohibited before certain punctuation marks.

A number of Southeast Asian scripts are written without spaces between words, then text is wrapped at syllable boundaries in addition to word boundaries. We could keep going here.

There is interplay between the 4 properties here to provide developers more precise control over line breaking, because some rules take precedence over others if both are present, or some only take affect if white-space property allows wrapping, for example.

Hyphenation

If you don't give a lang attribute, you don't get automatic hyphenation.

—Florian Rivoal

Browsers use language-specific dictionaries to figure out where the hyphenation points should be.

`text-align` & `text-justify`

Sets the text-align-all and text-align-last properties
Describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.

text-align: start | end | left | right | center | justify | match-parent | justify-all

Values other than justify-all or match-parent are assigned to text-align-all and reset text-align-last to auto.

Selects the justification method used when a line’s alignment is set to justify

text-justify: auto | none | inter-word | inter-character

Text justification is not a trivial computer science problem. I've seen programming assignments for Markov Chains asking for text justification algorithms. And whether we realise it or not, most of us would have encountered 2 major justification algorithms.

The Greedy algorithm, which analyses only a single line, and the much more advanced Knuth/Plass algorithm which analyses every line in a paragraph. Design software with advanced typesetting capabilities like InDesign use Knuth/Plass. But browsers, sadly, use the simple one. Probably for performance reasons, maybe? I'm not sure.

Although we don't have a robust justification algorithm, CSS Text Level 3 does include the text-justify property to allow some further tweaking of justified text.

Text alignment and justification

定义了CSS如何支持各种不同国际化语言的书写模式，例如拉丁（Latin）语系及印度（Indic）语系采用从左到右的书写模式，希尔伯特语（Hebrew）或阿拉伯语（Arabic）采用从右到左的书写模式，一些混合了拉丁语和阿拉伯语的文字可能采用双向书写（bidirectional），而一些东亚文字则需要竖排（从上到下）的书写模式。

Vertical text on the web

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

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

The writing-mode property specifically caters for vertical writing on the web. The default is horizontal, top-to-bottom. To change the direction to vertical, we use vertical-rl or vertical-lr. There's a sideways option that's formally been moved to Level 4 but Firefox has it implemented.

`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

古巴Cuba

立陶宛Lithuania

列支敦斯登Liechtenstein

Not just for East Asian text

MAGIJA

“…lietuvių tauta privalo būti išsaugota, nes joje slypi raktas visoms mįslėms – ne tik filologijos, bet ir istorijos — įminti”

Kaip ąžuol's drūt's prie Nemunėlio
Lietuvis nieko neatbos!
Kaip eglė ten prie Šešupėlės
Ir vėtroj, ir žiemą žaliuos!

Lietuviais esame mes gimę,
Lietuviais norime ir būt!
Tą garbę gavome užgimę,
Jai ir neturim leist pražūt!

Ką darai, daryk gerai!

I spoke a bit more about East Asian typography because Chinese is my mother tongue and I am involved with the Chinese Layout Task Force. If you notice, there are also Layout Task Forces for numerous other scripts and this is definitely a step in the right direction when it comes to preserving language diversity on the web.

An ideographic language like Chinese was not a good candidate for moveable type printing. The calligraphic style of Arabic writing also resulted in efforts to reduce the number of variations of letters and diacritical marks. Such typographical compromises are akin to having the finest sculptures in the world caked in dirt and mud.

I think the digital age presents an opportunity clean off the dirt and mud off scripts that have long had to compromise to “get with the times”. Our digital age is the age of light and electronic signals. There are far fewer limitations as compared to a physical medium like moveable type.

If the virtual world is being touted as a realm with limitless possibilities, then it should only be reasonable to expect that all our scripts can be restored to their full artistic glory on the world wide web.

Ačiū!

https://www.chenhuijing.com

@hj_chen

@huijing

Header font is Movement by María Ramos and Noel Pretorius.
Body font is PT Sans by Alexandra Korolkova

Typesetting for a global web

Typesetting for a global web

What is typography?

World writing scripts usage(as of 2017)

Latin script distribution

What are glyphs?

And what about fonts?

Distribution of content languages on the web

Writing systems on the web

Typesetting on the web

Bitmap fonts

PostScript

Font formats for web use

Fonts on web pages

Bridging a font reference with font data

Generic font families

Font stacks

Subset fail

@font-face rule

Anatomy of an @font-face rule

CSS font properties

font-synthesis

Variable fonts

Progressive Font Enrichment

Incremental Transfer Demo

OpenType features

Font feature properties

font-variant-east-asian

font-language-override

Golden rules for web typographyby Richard Rutter

The text-transform property

Line breaks in inline boxes

CSS for controlling line breaks

Hyphenation

text-align & text-justify

Text alignment and justification

Vertical text on the web

writing-mode property

text-orientation property

text-combine-upright property

Not just for East Asian text

MAGIJA

Ačiū!

World writing scripts usage
(as of 2017)

Anatomy of an `@font-face` rule

`font-synthesis`

`font-variant-east-asian`

`font-language-override`

Golden rules for web typography
by Richard Rutter

The `text-transform` property

`text-align` & `text-justify`

`writing-mode` property

`text-orientation` property

`text-combine-upright` property