CSS fonts trivia

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, which was the very first vector font.

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

Can I Use woff? Data on support for the woff feature across the major browsers from caniuse.com.

Can I Use woff2? Data on support for the woff2 feature across the major browsers from caniuse.com.

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
iif 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, like this Chinese character called biang, you'll end up with a white square or missing symbol glyph instead. This is less common now, 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. Sometimes the true italic or heavier version of a font does not exist and the browser will try to mimic those styles, and it doesn't look very good. So now you can set this property to a value of none, to prevent the browser from doing that.

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 to you. 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 “Pelmeni” 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.

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.

Краткая история создания Тетриса

Алексей Пажитнов написал первый Тетрис на компьютере Электроника-60. Он работал в ВЦ Академии наук, где изучал вопросы распознавания речи и искусственного интеллекта. Для обкатки своих идей Пажитном использовал головоломки, включая и пентамино. Он попытался сделать автоматической укладку в заданные фигуры пентамино, но не хватило мощности того оборудования для его вращения. Пришлось отлаживать на тетрамино, так и родилось название игры. Те опыты Алексея и родили главную идею Тетриса – падение фигурок и исчезновение заполненных рядов.

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

@font-face {
  font-family: 'Magnetic Pro';
  src: url('bender.woff2') format('woff2'),
       url('bender.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0400-U+04FF;
}

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. 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. Good speakers 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

Few people talk about font-variant-east-asian. 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 these 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.

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 individual 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. The specification recommends to utilise the respective font-variant properties over the font-feature-settings property, but until browser support becomes more robust, I guess we'll continue to see this property being used instead.

THE END

https://www.chenhuijing.com

@hj_chen

@huijing