The technology behind beautiful text. Part 2 of 3.

Part 1. Unicode and Font Fallback
Part 3. Layout and Reading

2. OpenType

OpenType is not just a file format, it’s a modern cross-platform standard. For a rare exception, every modern font is based on the OpenType standard. Including WOFF and WOFF2, which are widely used on the Web. Technically you can use any OpenType font on the Web if you have an appropriate license. The beauty of WOFF and WOFF2 is that they can be used in browsers but cannot be installed on the user’s system. Also, they have better compression.

What is so special about the standard? OpenType files can be used on any operating system, they support Unicode and contain up to 65 536 glyphs (the limit can be overcome using Collections).

The standard supports:
1. Color
2. Advanced typographic “layout” features
3. Font Variations

Color

Yes, if Emojis have colors why can’t all other characters? Now they can have several sets of predefined colors and even gradients. All this stuff can be controlled from CSS. More information can be found in the Google knowledge base.

OpenType Features

Advanced typographic “layout” features provide a special script for Type Designers to specify conditions of repositioning or substitution of any symbol. It’s the main feature of the standard.

Pos (position) function can shift any symbol horizontally or vertically. Horizontal shifting allows kerning symbols.

Kerning is a visual correction of the mathematically equal distance between a pair of symbols. For example, a pair of “LD” looks good, but “L​T” without kerning look as if they have an extra space between them.

OpenType fixes it using a simple script like this: pos L T -50;
Yes, a Type Designer needs to specify the right amount of kerning for every possible problem pair.

Kerning is a bare minimum that any modern font must have. It’s enabled by default but can be disabled if you wish (a lot of professional applications provide interfaces to control OpenType features). On the Web, you can control any OpenType feature via CSS.

The vertical shifting allows the use of case-sensitive punctuation:

This effect can also be implemented using the sub (substitution) function. Substitutions can be enabled automatically based on the context or deliberately for certain purposes. Once again: OpenType font can contain several variants of the same glyph. Sub function can substitute one glyph with another one or even replace several glyphs with one. This operation does not change the code of the string, the text remains the same for copy/pasting and for search engines.

Common ligatures
The classic example in English, when two or more glyphs are replaced with one, is a ligature. The code inside OpenType:

feature liga { sub f i by f_i; } liga;

In the left example (created with the OpenType feature) you are still able to select f and i separately even after they are replaced with one glyph (nothing is changed for Search engines as well).

Unicode has a special address for “fi” ligature, and you can paste it directly if you want to. But in this case, if the font doesn’t support this ligature, font fallback will happen. For the system, it’s one Unicode symbol, not “f” and “i” anymore. A standard page search will not recognize it as “f”+“i” either (to recognize it, a Unicode Normalization procedure needs to be activated).
Common ligatures like “ff”, “fi”, “fl”, “ffi”, “ffl” and “th” are enabled in browsers by default and it’s wonderful because they improve readability.

Non-standard ligatures like “ch”, “ck”, “ct” and “st” are mostly decorative, they are closer to stylistic alternatives and must be enabled manually if needed.

Stylistic alternatives
A font can have several sets of stylistic alternatives. Some fonts provide different graphemes for a character, some have different variants of swashes to imitate handwriting better or just to create additional decorating effects.

feature salt {sub a by a.salt; sub g by g.salt; } salt;

But Stylistic alternatives can also contribute to readability. For example, single-story “a” and “g” are more legible in small sizes, and some symbols can be hard to recognize outside the context: l and I, O and 0, etc. The alternatives will help though.

Traditional Typographic Alternatives
I won’t talk a lot about Small Caps and fractions — it’s nice to have them. It is also nice to have all these sets of different figures: Lining and Old-Style; Subscript and Superscript; Open and Closed. It’s really important to have the ability to switch between Proportional and Monospace Figures. The difference between them will be covered in the next Chapter.

You can control all these features using traditional CSS syntaxis as:

font-variant-numeric: diagonal-fractions; 
font-variant-caps: small-caps;

Or you can use the special font-feature-settings property, and list all the features in one place using the same names as in OpenType.

font-feature-settings: "frac", "smcp";

Variable Fonts

Remember I said that it was the main OpenType feature? Maybe, but the most exciting is sure a Font Variations also known as Variable Fonts.

The idea is based on old good linear interpolation. In OpenType, every glyph is represented by a Bezier curve, and if we create two Master Glyphs with the same amount of vertexes, the algorithm can generate any number of in-between glyphs.

This means that such a font file will take less space than two separate ones (because it doesn’t need to duplicate encoding tables and other shared information); the change of the parameter can be smoothly animated.

But what is really powerful — is the ability to create multiple axes of transformation in one font file. Say, you have a Width axis with 100 possible variants and a Weight axis with 900 variants. Combining them together gives you 90 000 different visuals. Roboto Flex has twelve different axes, and it gives you such incredible possibilities that sometimes it’s hard to realize that you are using one Type Family.

Speaking of Font Width, some parameters have a non-linear dependency, but interpolation in Variable Fonts (at least while I’m writing this) is linear only. To correct it, type designers have to insert additional Master Glyphs into one axis. From the user's perspective, everything works the same way. An unexpected moment can happen when a glyph needs to change its form drastically, for example, $ loses its vertical line at some point while gaining weight to keep the form clean. In this case, the change happens immediately and can’t be interpolated.

A type designer can create a whole axis from such discreet Master glyphs. It allows for creating crazy stuff like using keyframes in classic animation.

Font Rasterization

Ok, we created our message using Unicode, applied font fallback, and selected all the glyphs from our font using all these amazing OpenType technologies. Let’s say we already created the layout for the text, so now the system just needs to render the text. And that’s the territory where new technologies step in and new troubles arise.

The glyph outline data (the vector description of a character) in an OpenType font may be in one of two formats: either TrueType format (usually .ttf extension), or Compact Font Format based on PostScript (.otf).

TTF uses quadratic Bezier curves to describe the contour, while CFF uses cubic Bezier. The CFF requires fewer points to describe the same curve and therefore reduces file size.

Using fewer control points per the same curve also makes it more smooth, which might be important at large type sizes. So, is CFF better? In an ideal world — yes. The thing is that these two technologies have different algorithms of rasterization and TrueType looks better at small sizes on low-density screens.

But how often do we need to rasterize fonts? The answer is Always. Font rasterization is the process of converting text from a vector description provided by the font file to a raster description to match the pixel grid of your screen. Screens are only able to show raster data, no rasterization — no text at all.

Let’s step aside and talk about pixels first. Will you believe me if I say that the pixel is actually an angle? Well, on your screen pixels are small squares, don’t worry. But on the Web, we call them physical pixels, and the word “pixel” refers to a virtual one, which is the abstract unit like “em” or %.

So, what is the pixel on the Web? The W3C defines pixel as the visual angle of 0.0213°. This is equal to one pixel on a device with a density of 96 dpi and a distance from the reader of an arm’s length (28″, or 71 cm). This definition makes the size of 1/96″ (0.26 mm) on the monitor and 1.3 mm on the TV visually equal.

Thus, in theory, the size of 16 px should look the same on any device, but in practice, it doesn’t work yet. Imagine: if your device density is slightly more than 96 dpi (100 dpi for example) then scaling everything by 104.16(6)% will only make things worse.

Anyway, when the symbol of 16 px rasterizes to a low-density monitor screen, it is projected to the same 16 physical pixels. But in the case of a high-density monitor (320 dpi), the same symbol is projected to 54 pixels. It makes the task much easier, and a standard grayscale antialiasing works fine.

And what if the font size is less than 16 px? On a low-density screen, we just don’t have enough pixels to show the glyph correctly. Fortunately, modern operating systems can use subpixel antialiasing.

In the majority of standard monitors, a pixel consists of 3 vertical subpixels, and that means that the system can use them to draw a line or to position glyphs with the accuracy of 1/3 of a pixel. It’s almost the same as using 3 times wider resolution. Almost — because in this case, we cannot use grayscale antialiasing anymore. For grayscale, all subpixels should have equal brightness. If we turn off one of them to draw a black line, the other two cannot create a gray color and an unexpected color will appear. Fortunately, it’s hard to spot by the naked eye because our brain doesn’t percept pixels separately and continues mixing nearby colors even above pixel level.

Meanwhile, vertical resolution remains the same. Fortunately, it’s not so crucial for letterforms. That’s why, by the way, it’s a bad idea to use a standard monitor in portrait orientation for reading.

But it’s not the end of the story. When a vector form is projected on a raster grid, a standard algorithm draws a pixel if the center of the grid cell is inside the vector shape. It means that if a vector line of ~1px width is directly above a pixel — it will be rendered using one pixel, but if the line is on the border of two pixels — it will be rendered as a blurry two-pixel line. Another problem is: all the round letters in a font are slightly bigger than rectangle ones for visual compensation, so they can catch extra pixels.

That’s why hinting is important. Hinting is a set of instructions (embedded in the font) on how to match the pixel grid better. CFF format has simpler hinting instructions: “Just stick to these lines”, while TTF can provide an alternative vector form for each symbol for each small size. That’s why TTF looks better at low resolution, but any hinting is better than no hinting at all.

Mac OS ignores any hinting information and uses simple grayscale antialiasing. It relays on its retina displays and it’s a beautiful solution. Unfortunately, people using Windows and Linux form 30% of Internet traffic including 70% of desktop Internet traffic. So, if you are a web developer on Mac and consider your project cross-platform, please, spend 5 minutes testing the selected font in Windows.

Another nuance is that Mac and Windows render fonts differently even on the same screens. Moreover, any Windows application can use its own render mechanism. Thus, the same font of the same size on the same screen looks different on different platforms and even in different browsers in Windows. Any Mac browser and Firefox for Windows tend to display fonts bolder than Chrome for Windows.

So, if you are a purist, you may try to use Variable fonts with individual sets for each browser. By the way, black on white looks thinner than white on black. Another case where Variable fonts can help. Just keep in mind that Variable fonts can’t be hinted as well as static ones.

3. Layout and Reading (how font choice and layout affect readability)