Web typography: a non-English perspective

Chen Hui Jing / @hj_chen

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)

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

@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 */
}

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

Web typography: a non-English perspective Chen Hui Jing / @hj_chen Mno servus oameni buni, sunt Hui Jing, și voi vorbi despre… no I'm kidding, that's the extent of my Romanian. But today, I am going to talking about web typography, which is fairly common. And I'm also going to be talking a bit about non-English web typography, which might be slightly less common.

WOFF2 (Web Open Font Format 2)
WOFF (Web Open Font Format)
OTF (OpenType)
TTF (TrueType)
EOT (Embedded Open Type)
SVG (Scalable Vector Graphics)

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

`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-kerning`	`font-variant-position`	`font-variant-position-ligatures`
`font-variant-numeric`	`font-variant-caps`	`font-variant-alternates`

`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

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 typography
by 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!

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