Web typography refers to the typography for digital texts and the use of fonts on the web. Typography for digital texts deals with the visual design of text documents such as websites or e-books, primarily by means of typeface, as well as the other possibilities of typography.
The main purpose of typography is to make texts easier to read and thus easier to understand, as well as to present them in a visually appealing way that invites you to read. In the course of its history, an aesthetic has emerged that is also understood as typographical rules. Furthermore, typography uses orthographic and orthotypographic rules – or deliberately breaks them (e.g. in advertising).
When choosing fonts, a web designer turns to those designed for good reading on the screen and found on the majority of platforms. For many, the originality of these fonts has turned into conformism as they are so popular. That’s why the idea of going beyond these limits has been gaining ground since the early days of the Web.
---
Different techniques allow the user to display a font that he does not have, all having advantages and disadvantages, whether in terms of syntax or semantics. In general, the process boils down to transforming a text element into a graphic element. Thus, the browser does not have to lay out the text because it is decoded as a whole, an image, an animation, etc. In addition to these compromises, there is a layout code that indicates the location of a font and then downloads it to the visitor’s computer.
Typography for digital documents initially adopts all the possibilities of classic “paper typography”. At the beginning of digitization, however, the displaying output devices and technical possibilities were significantly worse than they are today, and so many disadvantages and compromises had to be accepted in the reproduction of digital texts compared to printed matter. In the meantime, however, even with websites, similarly good results can be achieved as in print. As a result of general digitization, the group of people who create digital text documents has also been greatly expanded; today, it is no longer just professional typesetters who create such documents, but practically everyone.
The basis of every screen display are pixels, called pixels. The first screen fonts were pixel fonts. These are so named because they are purely grid dots and each letter pixel is displayed on the screen as it was designed, provided that the font grid matches the screen grid. Pixel fonts cannot be enlarged later. In the early days of computer technology, when the screen resolution was still very low, only capital letters were usually used, as lower case letters were difficult to read in this low resolution.
With the development of high-resolution screens, the web font display also changed. Since the fonts are smaller on higher-resolution screens, web fonts have been enlarged to 14 to 16 pixels. Over time, people also moved away from pixel fonts and towards vector fonts. Today, all web fonts are first designed as vector graphics and then rasterized by the respective operating system, i.e. converted into a pixel matrix in order to be able to display the web font in a browser.
Rasterization or rendering has gone through three stages of development: Initially, there was only the 1-bit method (also called black-and-white rendering), followed by grayscale smoothing, today the subpixel rendering method is mainly used, in which only one of three colored subpixels (red, green and blue) is controlled instead of a complete pixel. As a result, a higher sharpness can be achieved in the display of web fonts. Depending on the browser and operating system, different rendering methods are used, which means that web fonts are displayed differently from browser to browser.
In order to refine the display of web fonts, the raster method had to be made more precise, for which hinting was invented and declared the standard for TrueType fonts. As the name suggests, hinting saves rasterization hints in the font file so that the web font fits perfectly into the pixel grid later and does not blur. For example, information regarding the adaptation of the web font to different font sizes or the importance of different lines is stored. For even more concise results, some web font designers do the hinting by hand. In the case of free web fonts, hinting is usually omitted.
Technical Part of Typography on the Web
Standardization is a major issue in the world of the Web. A so-called standard multimedia product responds both functionally and visually for different resolutions, different generations of browsers, slow and extremely fast connection speeds. It is with this in mind that the WOFF format was developed. It is not a cast iron in itself but rather a suitcase to transport and identify it. This file is downloaded from the browser history but cannot be used by any other document or software. This limitation to the visitor assures the creator that his work will not be reused for other purposes. The most recent generations of browsers have quickly adopted this format. In parallel, they implemented import support via the font-face rule as standardized by CSS. This is the starting point for the large-scale use of this method.
The fonts supported by browsers vary. The most common font formats are TrueType-OpenType (TTF) or CFF-OpenType (OTF), their compressed Web Open Font Format (WOFF) or EOT, and SVG Fonts (SVG). The developers of the main browsers have agreed on the use of the Web Open Font Format as a standard.
EOT is the first format dedicated to the Web, already usable in Internet Explorer 6, but it uses advanced compression algorithms limiting its use subject to licenses. Now it is a standard format for the Web.
TrueType or CFF font formats can be used as web-based fonts and are the same as those used for traditional digital fonts.
The WOFF format, also dedicated to the Web, is developed as a free and open format, using a relatively simple compression to compress the different OpenType font formats.
SVG Fonts allow the use of fonts in several colors or as animated. SVG fonts are an independent format supported by most browsers. The WOFF 2.0 formatis an improvement of WOFF by offering better compression of font information, and formalizes support for OpenType SVG fonts.
