Typesetting East Asian languages on the web

(and how it can inspire alternative web layouts)

By Chen Hui Jing / @hj_chen

Chen Hui Jing
🇲🇾 🏀 👩‍💻 📝 🦊
А а Б б В в Г г Д д Е е
Ё ё Ж ж З з І і Й й К к
Л л М м Н н О о П п Р р
С с Т т У у Ў ў Ф ф Х х
Ц ц Ч ч Ш ш Ы ы Ь ь Э э
Ю ю Я я Belarusian (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)
Source Hans Serif Regular (65,535 glyphs)

(Belarusian) 10 letters


(English) 13 letters


(Irish) 21 letters


Phoenician alphabet


Evolution of Hanzi
Song Ti
Kai Ti
Fang Song Ti
Hei Ti
“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

Distribution of content languages on the web

Sources: W3Techs

“People long for their national identity, to be different, to be proud of who they are. Political is daily, cultural is eternal.”
Alena Makouskaya, coordinator of Budzma
“Only 13% of pupils in Belarus study in the Belarusian language.”
Alesia Rudnik, Belarus Digest
“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

Fonts on the web
CSS to do typography
Layout on the web
CSS to do layout

Web fonts

The CSS3 Fonts specification describes the basic controls CSS provides for selecting and using fonts within documents.


What is a font?

Analogue fonts Digital fonts

And what are glyphs?

A metal sort AKA type
A bitmap glyph
A vector glyph

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)


@font-face {
  font-family: 'Farro';
  src: url('farro-light.woff2') format('woff2'),
       url('farro-light.woff') format('woff');


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: 'Farro';
  src: url('fonts/farro-light.woff2') format('woff2'),
       url('fonts/farro-light.woff') format('woff');
  /* no range specified, defaults to entire range */

@font-face {
  font-family: 'Farro';
  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

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.


Faux bold effect
Faux italic effect
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



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.

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

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.

text-orientation property


text-combine-upright property

digits <integer>*
Codepen example for text-combine-upright

Typography suggestions

Use and declare the correct font-family

Different glyphs for the character 次
Image credit: Tetsuhiro Ueda

Make sure the font-size is large enough

白俄罗斯 Belarus

Set larger line-height for sufficient breathing room



Set appropriate margins between paragraphs



Use text-align: justify



Vertical centring for vertical layout

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

Logical directions

CSS Logical Properties

Increment navigation and menu
https://increment.com by Stripe
Vertical text with CSS
Bookshelf-style design with vertical text
Vertical blog tags
Vertical blog tags
Responsive vertical to horizontal layout
Vertical mobile navigation
Broken flexbox layout




Frequency of major browser releases

Frequency of browser releases

A long list of references






Font used is Farro, by Grayscale