Picking the Right Web Font
Typography becomes an incredibly powerful tool if everything is done correctly. Let’s turn to the writings of Robert Bringhurst, whose book The Elements of Typographic Style for decades served as a witty guide for professionals. There you will find the sublime formula of the craft. According to Bringhurst, the typography “exists for the respect of content” and the correct typography “shows each element, every relationship between elements and every logical nuance of the text”.
How to pick up the right font? A font is more than just a digitized set of symbols created by a brush on paper or in an illustrator — inside each of it lies 98% of finishing and polishing, hinting and testing on different platforms. It looks good and is handled nicely by both printers and displays.
However, one should be especially careful when choosing a font. It is important to follow the appropriateness and correspondence of the font to the method of use and the tasks assigned to it. If you work with designs, you need to understand how it works. Understanding the technologies used will mean the better experience. For example, every self-respecting typographer knows why it is undesirable to use TrueType in offset printing; which can be used in texts, and which ones are only for headings or pointers.
Do web fonts need hinting? Hinting — is a special instruction that rigidly binds the abstract curves of the font to the pixels on the monitor. The absolute majority of fonts (including commercial ones) is not hinted, because it is a laborious and complicated procedure. For TrueType and PostScript, hinting is performed in different ways. If you take a cheaper type-bundle, the OTF format is safer, because in TT the procedure has remained unchanged since the black-and-white rasterization era. For the PS, the procedure is way easier and a designer has the opportunity to choose automatic hinting.
Besides, the era of 300 DPI monitors is rapidly approaching. With a huge number of mobile devices already having such characteristics, there will be no need for hinting at all. But since Windows still remains hinting-dependent and focused on low-resolution monitors, try to choose high-quality hinted or standard fonts, otherwise, the text will be unreadable and difficult to perceive.
How do browsers depict fonts? They say that browsers themselves depict fonts, so they look different in every single browser. But in fact, the special graphics subsystem of the OS is responsible for that: in Windows, it’s GDI or DirectWrite, OS X and iOS boast CoreText. There are 3 common mechanisms for rasterization (rendering) of fonts: two-color (black and white) pixel, monochrome pixel (it is often called antialiasing or usual smoothing) and subpixel. Subpixel system uses the feature of LCD and plasma displays, where each pixel is divided into 3 parts (red, green and blue), in order to increase the horizontal resolution of the rendered image and enhance clarity.
However, browsers choose the way they depict fonts from those means that are provided by the OS. For example, as part of GDI, there are 3 rendering options: b/w, normal anti-aliasing, and sub-pixel ClearType. The peculiarity of the latter is that smoothing occurs only horizontally, in accordance with the arrangement of subpixels. That’s why when utilizing it, we often see annoying prongs on horizontal and diagonal strokes of the font. Fortunately, Microsoft is slowly improving the mechanism, and GDI was replaced by DirectWrite technology, where vertical smoothing appeared.
TTF or OTF? TrueType and PostScript previously served as different font formats. TrueType uses quadratic Bezier curves, and PostScript — cubic curves, familiar to designers working in Illustrator and Photoshop. Today, both methods of curves describing are used in the same OpenType format, with the only difference being that the files with TrueType have a TTF extension, and with PostScript — OTF. Each technology has its own features of hinting and application principles.
Where the TrueType font is much more readable in a small pincushion (large sizes result in characteristic prongs), the PostScript is exactly the opposite. This happens because browsers choose different methods of rasterization for PS and TT. For PS, the browser uses normal monochrome smoothing, while TT is processed by ClearType. So it turns out that for texts, TrueType will be preferable — for headers and large inscriptions PostScript is better. The DirectWrite feature is supported by a limited number of browsers so far.
Fonts without hinting have a risk to get riddled when rasterized, and the height of the letters can jump a bit.
On the one hand, fonts with hinting get bonus clearance, contrast, and uniform, and on the other — the shapes of the letters are distorted depending on the size, and the intervals may differ from the real ones. The letters strictly follow the pixels.
In Windows, we see perhaps the most radical approach: such popular fonts as Tahoma, Verdana, Arial, and Georgia were specially hinted for GDI ClearType, and when DirectWrite appeared, they had to rehint and update the main typeface in the OS bundle.
Unlike Microsoft, Apple adheres to the opposite approach, therefore, its operating systems use algorithms that allow more or less qualitative output of any font, and hinting is not taken into account at all.
So why do we need particular web fonts when we have the standard ones? The first thing that comes to mind is that the standard is horribly boring, making it quite difficult to create something original. As a rule, most of them cast a gloom and despondency over users and web designers. Non-standard fonts, in this case, are more expressive with a wide selection to pick from. What is more, font stands as an integral part of the brand, meaning every company from a web-store to an online casino, seeks the ways to use it more actively.
It would be possible to completely abandon standard fonts, regarding the fact that many mobile operating systems do not support them (Arial, Taһoma, Verdana, and Georgia). But, unfortunately, the industry, which has been adjusted for 96 DPI screens for many years, is not quite ready for rapid changes, whereas earlier versions of Windows are still out of the game, having problems with displaying non-standard fonts due to the features of the rasterization mechanism. In conclusion, let us note that the ongoing trends are tilting towards the font optimization for mobile platforms, thus UX/UI designers should pay extra attention while picking printing types that will be displayed appropriately both in desktop and mobile browsers.