Web Typography

where East meets West

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙
Launch of the web Where the web was born
“I imagined the web as an open platform that would allow everyone everywhere to share information, access opportunities and collaborate across geographic and cultural boundaries.”
Sir Tim Berners-Lee
“A great deal of the content available to Asian users is simply translated into local languages and does not reflect the significant cultural diversity found across the region.”
Consumer barriers to mobile internet adoption in Asia

Unicode

Unicode provides a unique number for every character,
no matter what the platform,
no matter what the program,
no matter what the language.

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

Phoenician alphabet

甲骨文

Hippopotamus
(English) 12 letters

河马

Lebensgefährte
(German) 14 letters

伴侣

Grianghrafadóireachta
(Irish) 21 letters

摄影

Evolution of the Latin alphabet
Serif Sans-serif
Evolution of Hanzi
SongTi
SongTi
KaiTi
KaiTi
FangSongTi
FangSongTi
HeiTi
HeiTi
Example of FangSongTi Example of Kaiti
Example of Serif typeface Example of Serif typeface Example of Serif typeface
Cover of Vogue Cover of Harper's Bazaar
SongTi + Serifs HeiTi + Sans-serifs

Web characteristics

  • Later binding
  • Multiple outputs
  • Partial control
  • Uncertain delivery
The web is a unique medium on its own.

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 rule

@font-face {
  font-family: 'Magnetic Pro';
  src: url('../fonts/magnetic-pro-light.woff2') format('woff2'),
       url('../fonts/magnetic-pro-light.woff') format('woff');
}

Picks font Matches criteria? No Next alternative ‘font-family’ Yes

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.

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

Basic font properties

font-weight Specifies the weight of the glyphs in the font. Can use keywords or numerical values.
font-stretch Selects a normal, condensed or expanded face from a font family. Range spans over 9 keywords.
font-style Allows italic or oblique faces to be selected.
font-size Indicates the desired height of the glyphs. Takes absolute or relative values.
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.

Using non-system fonts

The @font-face rule allows us to link to fonts, either locally or external, which are fetched and activated when needed.

We can use multiple @font-face rules to construct font families.

A rule consists of the @font-face keyword followed by a block of font descriptors.

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> # 
}
/* fallback font - size: 4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.woff);
  /* no range specified, defaults to entire range */
}

/* Japanese glyphs - size: 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.woff);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* Latin, Greek, Cyrillic along with some punctuation and symbols - size: 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.woff);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

Font feature properties (1/2)

font-kerning font-variant-position font-variant-position-ligatures
font-variant-numeric font-variant-caps font-variant-alternates

Font feature properties (2/2)

font-variant-east-asian font-language-override font-feature-settings

Provides low-level control of advanced OpenType features

Setting up Typekit
Configuring Typekit settings
“Be formless, shapeless, like water. Now you put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put it in a teapot, it becomes the teapot. Now water can flow, or it can crash. Be water, my friend.”
—Bruce Lee

Looks familiar?

Some (hopefully) relevant textBe thankful they didn’t ask for a carouselProbably some more marketing copy for each of the 3 images above that will only get passed to you after you’ve built most of site, which is never the length of the lorem ipsum your designer used and hence he/she will ask you how come the columns cannot be the same height.

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!

Behaviour of horizontal-tb
horizontal-tb
Behaviour of vertical-lr
vertical-lr
Behaviour of vertical-rl
vertical-rl
钱存训钱存训
Rotate
钱存训
Translate

writing-mode property

horizontal-tb 从1987到现在
vertical-rl 从1987到现在
vertical-lr 从1987到现在
sideways-rl* 从1987到现在
sideways-lr* 从1987到现在

text-orientation property

从1987到现在
mixed
1987到现在
upright
从1987到现在
sideways

text-combine-upright property

民國106年7月3日
none
民國10673
all
民國10673
digits <integer>*

Typography suggestions

  • Use and declare the correct font-family
  • Make sure the font-size is large enough
  • Set line-height for sufficient breathing room
  • Use text-align: justify
  • Keep lines to around 25-35 characters
  • Set a margin-bottom for the p element
Vertical text experiment
Vertical centring for vertical layout

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

Screenshot of PGHK homepage PGHK about and post pages
Vertical text with CSS
Bookshelf-style design with vertical text

A long list of references

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing