Web Typography

where East meets West

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙

“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

Bruce Lawson is here today. And I'm very thankful for the chance to meet him. When I read his Smashing Magazine article earlier this year, one of the things that stood out to me was the fact that it's not simply the cost of internet access that is stopping people from coming online. It is lack of digital skills and locally relevant content.

I'm quite sure Bruce will cover this in a lot more detail in his talk later. But a key statistic I want to highlight is that roughly 17% of the world's population are native Chinese speakers, and yet only 2% of websites are in Chinese. In contrast, an estimated 51% of the world's websites are in English, when native English speakers make up only around 5% of the world's population. The fact that digital computing originated from places that were predominantly English-speaking plays a big role in this.

Unicode

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

I do think that internationalisation efforts have been substantial over the years, and will continue to be for years to come. All the work coming out of the Unicode Consortium has been significant in this regard. Their goal is to be able to represent every character in any system, regardless of platform, program or language.

East Asian languages still present a huge challenge due to the volume of glyphs we have. Han unification is also a very controversial issue, and I don't claim to understand the full ins and outs of it. But we are at a point where content generation by locals for locals doesn't involve hours of troubleshooting and jumping through flaming hoops any more. At least, I feel that's the case for Chinese. And typography is integral to the presentation of content.

“Typography is writing with prefabricated letters”
—Gerrit Noordzij

Phoenician alphabet

甲骨文

Hippopotamus
(English) 12 letters

河马

Lebensgefährte
(German) 14 letters

伴侣

Grianghrafadóireachta
(Irish) 21 letters

摄影

Web characteristics

Later binding
Multiple outputs
Partial control
Uncertain delivery

The web is a unique medium on its own.

We first need to understand the web as a medium, and to be fair, it is a rather young medium. In his doctoral thesis, inventor of CSS, Håkon Wium Lie (Hor-ken Wee-um Lee), described a number of key differences between the distribution of content on paper versus electronic distribution over the web.

Late binding in computer programming parlance refers to function calls that are not resolved until runtime, but in publishing, late binding refers to delaying the conversion of data into an optimised output format for presentation for as long as possible. This happens very late on the web and presents a performance challenge as binding now takes place while the user is waiting, and the author is not present to verify if the presentation is correct or not.
There is no longer a single final form of presentation either, multiple output devices could be used.
Authors can influence the presentation, but he or she no longer holds complete control, instead, a combination of influences from various sources, like the browser and the users themselves, form the final presentation.
Dependable delivery is also uncertain, as web resources are distributed across multiple connected servers and the possibility of any of them being unavailable is pretty significant.

Although many would like to think the web is simply print expressed on an electronic screen, it is not. It is 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)

Here's a list of common font formats used on the web. Why on earth are there so many formats? Well, here's my non-technical explanation. Fonts are simply containers for glyphs, and font formats describe these glyphs. The earliest fonts were pixel-based bitmaps, which were fine for low-resolution screens, but for printing on high-resolution printers, we needed a better solution. Either compress the bitmapped glyphs, or find an alternative rendering method.

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 first vector font, and boy did it take 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. And Apple came up with TrueType GX, later renamed Apple Advanced Typography. Microsoft came up with TrueType Open 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. WOFF was quite the industry effort, involving Microsoft, Mozilla and Opera.

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

The earliest implementation of CSS had a relatively small section on fonts, which covered font properties that could be set via CSS, as well as the font matching algorithm so browsers could determine what fonts to use.

The algorithm itself has since been expanded over the last 2 decades but the general guideline to what font is used for a given character in a run of text is as follows:

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:
- font-stretch
- font-style
- font-weight
- font-size
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

If a character cannot be displayed using any font at all, perhaps the famous, or infamous biang character, you'll end up with a symbol of the missing glyph, or what we endearingly call 豆腐, which personally, I see much less of these days, compared to 10 years ago, thanks to the widespread use of Unicode.

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.

Not counting the font shorthand, there are six basic font properties. The last two were introduced in Fonts Level 3. I'll quickly run through the first four. font-weight is for indicating the stroke thickness of your font, and can take values from 100 to 900 or keywords, like bolder or lighter.

font-stretch is used to select fonts based on their widths, ranging from condensed to expanded. font-style allows for the selection of italic or oblique faces. Italics are cursive, but obliques are sloped versions of a regular face. font-size indicates the desired height of the glyphs, and we can use absolute values like pixels and ems or relative values like percentages or viewport units, as well as keywords like larger or smaller.

font-size-adjust was put in to address legibility issues. Faces with low x-heights may sometimes be less legible, especially when they are triggered as fallback fonts. This property adjusts the font size of the fallback such that its x-height matches the first-choice font.

font-synthesis is also new, and was put in to address the issue of faux bolds and faux italics. You know, when the true italic or a heavier version of a font does not exist and the browser tries to pretend it does? It doesn't look good at all. So now you can set this property to a value of none, to tell the browser to quit it.

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.

The @font-face rule allows us to use fonts beyond those available on a given platform by linking to those font files, which could be locally available or from an external source. Each rule specifies the characteristics of a single font within a family. These fonts will only be loaded when required. Multiple @font-face rules can be used to build an entire font family. And it consists of the @font-face keyword plus a bunch of font descriptors. Font descriptors and CSS properties are not the same thing.

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. I don't think most people read through the CSS specification like they would a novel, so it's perfectly fine if this looks excessively complicated and undecipherable to you. I'll do my best to make this quick and simple. Even though there's a whole lot of stuff in here, only the font-family descriptor and the src descriptor are mandatory.

If either of them are absent, the entire rule is ignored. Now 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 label it “Dumplings” 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. Again, they are descriptors, so 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. Please don't do that.

Remember when I said the goal of Unicode is to support every single character on the planet? Every Unicode character is represented by a unique code point and all these code points are organised into code blocks, 273 code blocks as of Unicode 9.0. The unicode-range descriptor allows us to specify individual code points or a range of code points for characters we want displayed using a particular font face. We can make use of this to create custom font families with glyphs from different typefaces.

/* 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 were introduced in Fonts Level 3, so it's been around for 6 years or so, give or take. Earlier, when I talked about all the different font formats, I mentioned that Apple and Microsoft worked to improve the original implementation of TrueType. OpenType and Apple Advanced Typography are what we term modern font technologies, and they can contain a lot more glyphs that previous font formats.

So we can utilise a variety of typographic features like swashes, ligatures, old-style numerals and so on. The original font-variant property that could only be used to trigger small-caps was also expanded, a great deal. Because there are so many properties available, each with lots of values, I'm just going to do a general overview. 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 been. Speakers whom we consider compelling 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 feature properties (2/2)

font-variant-east-asian

font-language-override

font-feature-settings

Provides low-level control of advanced OpenType features

Nobody talks about font-variant-east-asian, at least, I haven't met them yet. What this property does is allow for glyph substitution and positioning in East Asian text. For the benefit of the audience who can't read Han characters, it might seem like the East Asian languages share the same glyphs but actually, it depends. As I mentioned before, Han unification, which is assigning the same code point to different glyphs has been the subject of a lot of debate, so I'm just going to explain this here property.

Essentially, the same code point can have variant glyphs depending on the language being used. Like, simplified Chinese glyphs versus traditional Chinese glyphs. Japanese glyphs have their own specification known as JIS or Japanese Industrial Standard, and they too have alternate glyphs for the same character. This property allows us to toggle these variant glyphs.

Now the font-language-override property controls the rendering of language-specific glyphs in the typeface used. A commonly raised use case is the use of common ligatures, for the fi combination. The Turkish alphabet has both a dotted and dotless i, so the fi ligature shouldn't be used. Maybe a typeface doesn't recognise a lesser-known language like the Azeri language, which, similar to Turkish, has a dotless i, the font-language-override property can be used to force the usage of Turkish glyphs instead.

font-feature-settings allows us toggle very specific OpenType properties. Last I checked, there were 141 OpenType feature tags to cover things like vertical kerning, unicase, scientific inferiors and so on.

Browser support for each of these font feature properties varies at the moment, with Firefox being the only browser that has supported all of them since 34.0. font-feature-settings, on the other hand, has quite good support across most browsers. Although the specification recommends to utilise the respective font-variant properties over the font-feature-settings property, until browser support becomes more robust, I guess we'll continue to see it being used instead.

Screenshot of Google Fonts website — Google Fonts

Screenshot of Adobe Typekit website — Adobe Typekit

Screenshot of cloud.typography website — cloud.typography

Setting up Typekit — Configuring Typekit settings

Screenshot of justfont website — justfont

Screenshot of iFontCloud website — iFontCloud

Screenshot of Font Squirrel website — Font Squirrel

Screenshot of FontPrep interface — FontPrep

Screenshot of FontSpider website — Font Spider

But at the end of the day, we still need to keep in mind that CJK fonts weigh in on a megabyte scale. The font hosting services do offer optimisations like lazy loading and dynamic subsetting, so hopefully that helps. If you want to serve your own fonts, there are also tools available to help reduce the size of your font files.

If I'm building a non-Chinese site, I always turn to Font Squirrel to generate my webfonts, because subsetting. Font Squirrel's web font generator allows for a very granular level of customisation that I haven't found in other tools. There is a desktop application for Mac called FontPrep, which does subsetting quite well too.

Font Spider is an open-source command line tool that does smart webfont compression and conversion. It offers the ability to subset the fonts based on the glyphs being used on your site. Look, I don't know why animals are the branding of choice for these tools, they just are.

And if you're really concerned about speed and page weight, you can simply choose not to use any webfonts at all, because honestly, I think that system fonts are getting much better. This, coming from someone who is running the latest macOS Sierra and the Fast Ring Insider version of Windows 10. But point being, the newer OSes are shipping with much better fonts than before.

I personally use a hybrid technique, where the body text is set in a system font, but for the big titles and display text, where there is a limited number of characters I know will not change much over time, I generate webfonts containing only those glyphs, which makes the font file much much smaller than the full character set.

“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?

Look, I'm on Twitter quite a bit. I have seen the flame wars over frameworks, over how CSS sucks, over how CSS should be done with Javascript. People get very worked up about these things, it seems. I personally enjoy the cascade.

Responsive websites are often mentioned in the same breath as media queries, that wonderful conditional that allows us to create different layouts at different screen widths. I can understand why people reach for frameworks, especially if they are not familiar with CSS or don't have time, or just don't like CSS in general. But frameworks are kind of prescriptive, and that's how we end up with a lot of websites that utilise very similar layouts.

CSS layout has become so much more mature since it first began. There had never been a specification that was created specially for layout until Flexbox and Grid came along. And that is fantastic. We have a lot of CSS properties at our disposal now. Around 496 the last time I checked. And it is up to us to combine and implement them creatively.

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

Let's cover some basic terminology. First up, inline base direction, which is that blue arrow there. It is the direction that content is ordered on a line, and defines where the line starts and ends. The green arrow indicates block flow direction, which is the direction block-level boxes stack and the direction of this stacking within their container. The writing-mode property dictates the block flow direction. What you see here is the standard default value of horizontal-tb.

Rotate

Translate

There are two ways to do this, by rotation or by translation. Scripts that have native vertical orientations will have an intrinsic bi-orientational transform, so regardless of whether the text is laid out horizontally or vertically, the glyphs transform and will always be upright. Latin-based characters, on the other hand, rotate. But glyphs can always be set sideways or upright with the text-orientation property.

`writing-mode` property

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

This is what happens to your text when the different values of writing-mode are applied. These examples look correct because I'm using Firefox at the moment, but the last two examples, sideways-rl and sideways-lr have actually been deferred to Writing Modes Level 4.

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

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

There is a very comprehensive document called the Requirements for Japanese Text Layout, created by the W3C Japanese Layout Task Force. It addresses the aspects of Japanese composition that differ from Western composition and is meant to serve as a reference for browser implementers so Japanese web layouts can be rendered correctly. And now the Chinese Layout Task Force is working on a similar document for Chinese composition and layout. This is still a work in progress.

Bobby Tung, who is a W3C i18n Invited Expert, wrote an article covering the best practices for Chinese layout a while back. So together with that article, as well as through my own personal experimentation, I sort of settled onto certain typographic conventions when I'm setting Chinese text.

Use the appropriate font family. For example, Source Han Serif has typefaces for simplified Chinese, traditional Chinese, Japanese and Korean. Pick the right one.
This one I mentioned earlier, that Chinese characters are denser than typical Latin-based alphabets, because of all the strokes, so you may want to bump up the font size a little bit. Reading small characters on a screen is not a pleasant experience.
For line-height there is actually a magic number. Ideally, setting it between 1.5 to 2 works fine so 1.7 is a good choice. This gives the text enough breathing room and a more even typographic colour.
Every Chinese character takes up the same height and width, they are squares, even punctuation are full width characters. Using text-align: justify lines everything up neatly.
Keeping lines to between 25 and 35 characters is something I picked up from print books. A lot of text-heavy books I find have lines with around 26 to 28 characters. So, just a suggestion there.
For print books, the start of a new paragraph is indicated by a two character indent, but for the web, it looks better to have spacing between paragraphs, so just set a margin-bottom to distinguish different paragraphs of text.

As I mentioned earlier, 25-35 characters per line is a reasonable length, and I did that by clamping the height of the content block. Because Chinese characters are squares, that also implies that in normal circumstances, a height of 25 ems gives you 25 characters per line. To vertically centre the content block, we can actually set the top and bottom margins to auto, something we wished we could do but couldn't for horizontal writing. Don't worry, trying to centre things horizontally is equally painful, if not more so, for vertical writing.

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.

Vertical text with CSS — Bookshelf-style design with vertical text

I also kept the switcher, which is actually a checkbox hack implementation. When I built this website, 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 around 60% 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
No @font-face Syntax will ever be Bulletproof, Nor Should It Be.
字体漫谈
Source Han Serif / Noto Serif CJK History & Development
Chinese Fonts & Related Issues
OpenType features in CSS
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/

If you need inspiration for vertical layouts, the Tateyoko Web Awards site has really nice list. My friend, Jen Simmons, also has an experimental layout lab where she showcases all the different things that are now possible with modern CSS.

Sometimes it feels like being a web developer doesn't sound like much. We're just building websites, right? But our actions, however small, do make an impact. Raising a bug report? That makes a difference. Ensuring your site loads properly on slow connections? That counts. Making knowledge accessible to more people? That's definitely a thing. Even if just one person benefits, that's one more than if we didn't make the effort.

So if you're not a native English speaker, if you're Chinese, Russian, Indian or wherever in the world you're from, consider creating more content that is in your own native language. You never know who it might help.

And even if you don't end up using any of what I've covered immediately in your next project, I hope that you keep these techniques and properties in the back of your mind. And maybe one day, when you're tired of building the same old layouts again and again, you'll reach for them and create something amazing.

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

Web Typography

where East meets West

Unicode

Phoenician alphabet

甲骨文

Web characteristics

Font formats for web use

@font-face rule

Declare your Latin fonts first

Generic font families

Basic font properties

Using non-system fonts

Anatomy of an @font-face rule

Font feature properties (1/2)

Font feature properties (2/2)

Looks familiar?

The magic of Writing Modes

writing-mode property

text-orientation property

text-combine-upright property

Typography suggestions

Willem de Kooning

CSS Logical Properties

A long list of references

Thank you!

Anatomy of an `@font-face` rule

`writing-mode` property

`text-orientation` property

`text-combine-upright` property