Web typography: a non-English perspective

Chen Hui Jing / @hj_chen

@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 a myriad of ways to form words, phrases and sentences. All of which become a visual representation of the spoken word.

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 Americas, Oceania and parts of Asia and Africa took place.

Resulting in numbers that look like this, with Chinese and Arabic 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	Î, î
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				Romanian (31)

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

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.

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)

The earliest digital fonts were pixel-based bitmaps, okay for low-resolution screens, but problematic when content needed to be printed.

One of the solutions to this problem came from Adobe founder, John Warnock, who 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, and tried to submit this as a W3C recommendation. However, it was rejected in favour of WOFF, or the Web Open Font Format. 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-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 “Sarmale” 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 on your @font-face rule as well.

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

Variable fonts

Dragons

Space

Weight

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

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 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 bounderies 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 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, 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），而一些东亚文字则需要竖排（从上到下）的书写模式。

If I search for “text justify web” on Google, the top result is titled Don't use fully justified text alignment on your website, and the next one is Justify text with HTML/CSS? Don't do it!. It seems that justified text has a bad rap on the web.

This might be true for Latin-based scripts but not so for Chinese characters, which are also known as square characters. Each character is composed within a uniform square and Chinese texts can be typeset into neat rows and columns. In fact, it is ideal to do so.

But when there are both Latin-based alphabets and Chinese characters, it's impossible for everything to line up both vertically and horizontally. The next best thing is to ensure the start and end of every line is aligned well.

And we can make adjustments between adjacent typography character units in Chinese texts with inter-character.

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

罗马尼亚Romania

列支敦斯登Liechtenstein

Not just for East Asian text

MAGIE

“Nu pot fi fericiţi decât oamenii care nu gândesc nimic, adică aceia care gândesc numai cât trebuie vieţii.”

Din umbra falnicelor bolți
Ea pasul și-l îndreaptă
Lângă fereastră, unde-n colț
Luceafărul așteaptă.

Privea în zare cum pe mări
Răsare și străluce,
Pe mișcătoarele cărări
Corăbii negre duce.

Calul bun se vinde în grajd

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 be reasonable to expect that all our scripts can be restored to their full artistic glory on the world wide web.

References

Mulţam fain!

https://www.chenhuijing.com

@hj_chen

@huijing

Font used is Bellato, by Kemie Guaida

Web typography: a non-English perspective

What is typography?

http://www.worldswritingsystems.org/

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

Font formats for web use

Fonts on web pages

Bridging a font reference with font data

Generic font families

@font-face rule

Anatomy of an @font-face rule

CSS font properties

Variable fonts

font-synthesis

Font feature properties

font-variant-east-asian

font-language-override

http://book.webtypography.net/

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

MAGIE

Calul bun se vinde în grajd

References

Mulţam fain!

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