A typeface (or type) is a unique set of letterforms and characters (or glyphs or symbols) with common visual design features. A collection of related typefaces that share common design features and name is referred to as a type family. A common type family is the Arial family, which includes Arial, Arial Black, Arial Narrow, and Arial Rounded MT Bold. A font, on the other hand, is a specific combination of size, style, and weight of a typeface; for example, “Times New Roman 12pt bold” is a font, and so is “Times New Roman 14pt bold,” both of which are derived from the Times New Roman typeface. The fonts of a typeface are altogether known as a family of fonts or a font family. The two terms, typeface and font, are commonly used interchangeably. In CSS, it is the font that is favored and the two primary CSS components used for specifying it are the font-family property and the @font- face at-rule.
1. font-family
The font-family property allows a typeface or a list of typefaces to be specified for the text inside selected element or elements. It is inherited and the two types of values it takes are described in Table 13.1.
A font family name or a generic font family name can be specified alone, or the two can be specified together. When the two are used together, the generic family name is placed last. It is good practice to specify a generic family name, as this ensures that the essence of a design is largely maintained even when the specified font is not available. How it works is that when the browser displays a document, it uses the first font from the list that it can find. Figures 13.2 and 13.3 show an example of how the property is used and the result.
In the example, the body{} rule tells the browser to use Times, but if this is not available to use “Times New Roman,” and if this is not found to use Georgia, and if this is not available use any serif font. The h3{} and p.author{} rules are interpreted similarly. A prioritized list of fonts specified in the font-family property is known as a font stack and various suggestions can be found on the Web.
2. @font-face
The @font-face at-rule allows online fonts and their URLs to be specified, so that copies can be downloaded for use within a page. Fonts that are downloaded from the Web for use in a page are known as Web fonts. They are very important in Web design, as they remove the restriction that specified fonts must be installed on the user’s system. An additional advantage of the approach is that it allows the use of custom fonts. Table 13.2 lists the descriptors that the at-rule takes and their functions, and Figures 13.4 and 13.5 show the basic use of the at-rule and the result.
In the @font-face{} rule in the example, the font-family specifies a made-up name “My Serif Bold” to describe the font to be specified. This name could be anything, but must be in quotes if it contains white space. The src property uses the url() function to specify the name and location of the font. In this case, it says the font file is in the fonts folder/directory inside the folder in which the stylesheet referencing it is located. The .one{} rule uses the font-family property as normal to specify to use the font declared in the @font-face{} rule for the <p> element of class=“one”, quoting the made-up name and a generic font to use if the specified one is not available.
In the example, all the glyphs in the specified font family are downloaded, even if only a small part of them will be used. To minimize the amount of font data downloaded, just the set of glyphs required can be specified using other descriptors listed in Table 13.2. For example, to limit the number of glyphs downloaded to include only those that represent the normal font-style, you would include the font-style descriptor and set its value to normal. Similarly, the unicode-range descriptor can be used to limit the set of glyphs downloaded. Figure 13.6 shows an example of how this is done. It says to download from the specified font family only the glyphs that represent normal characters in Latin and Japanese. The font-style descriptor, and others in the table (i.e., font-stretch, font- weight, and font-variant), are fully discussed later in this chapter as CSS properties.
2.1. Providing Broad Browser Support
Different Web browsers support different font file formats, therefore in order to ensure that as many users as possible get to see a design as intended, it is important to provide a font in all the commonly used formats. One of the benefits of the @font-face rule is that it allows multiple sources to be specified with the src descriptor. How this is done is shown in Figure 13.7.
In the example, the local() tells the browser to check for the font specified on the user’s system before- attempting to download it. More than one local location is specified to account for the possibility of different filenaming conventions. The url() values specify the name and location for different font formats on the Web server. The format() values are used to specify the format of a font file. The formats specified are as of time of writing the five main formats, although the trend is more toward WOFF and WOFF2, because they are compressed and therefore load faster. They are also widely supported by browsers and with minimal licensing restrictions. With multiple font declarations, the browser basically goes through each in turn, using the first one it can successfully use. The order in which the formats appear in the example (i.e., eot, woff2, woff, ttf/otf, and svg) is arbitrary but the typically recommended. The order is generally based on various factors, such as the fonts that are most likely to be available and the fastest to load on most systems. This means that it can change according to the prevailing situations.
The ?#iefix used with the eot value is to address font-loading problems with Internet Explorer 8 and below, although just a question mark is usually enough. The # in the svg value points to the ID of the <font> element that defines the svg font in the SVG file, so that only the font definition is loaded. Not including the hash will cause the entire SVG file to be loaded, including headers that may prevent the defined font from being recognized. The name after the # is the name given to the svg font when it was created. If not known, it can be found by opening the SVG font file in a text editor and looking at the beginning inside the opening tag of the <font> element. If all necessary formats for a font are not available for the font you want to use, the font can be converted to different formats, using, for example, online services, such as fontsquirrel.com, that provide format conversion. These websites convert fonts to just the specified format or provide a folder containing all the common font formats. Either way, they also typically generate the necessary CSS code for the @font-face rule. In all cases, once the @font-rule is set, the relevant font is specified in the body{} rule, using the font-family property as normal.
In the examples in Figures 13.4, 13.6, and 13.7, the online font file, VeraSeBd.ttf, is downloaded from the same Web server that serves the HTML document and the corresponding stylesheet. However, an online font does not have to be located on the same server that serves the HTML document and the corresponding stylesheet. It can be downloaded from another server, in which case, the absolute URL for the location must be specified. Typically, you will get an online font from a Web font or font-hosting service, such as Google Fonts, Typekit, FontSquirrel, Fonts.com, Font Deck, and Cloud Typography. Using Web fonts from these services can typically be achieved through using the CSS @import rule, which is used to import rules from other stylesheets. Font-hosting services would typically generate the necessary @import rule for adding a font, which can then be copied and pasted. At Google Fonts, for example, all that was required to obtain the @import rule used in Figure 13.8 to get the result in Figure 13.9 was to choose the required font and character set and the rule was automatically generated.
GoogleFonts also generates a link that can be used in the <link> element to link to a font file on its server, much like when you link to an external stylesheet. For example, the following line links to the same font file used in Figure 13.8.
<link href-7/fonts.googleapis.com/css?family=Indie+Flower” rel=“stylesheet” type=“text/css”>
3. Fonts in Design
There are numerous typefaces, the result of a collection that has built up over centuries and still being added to today. This means that there is an incredibly wide variety of typefaces to choose from that both compare and contrast in characteristics, such as shown in Figure 13.10. The result of this is that identifying the most appropriate fonts for a design is seldom straightforward, if common fonts are not used. It often requires the consideration of various factors, such as similarities and differences typefaces, design situation, how well different typefaces combine, and availability.
Other ways of grouping typefaces often prove to be easier to use and more useful than classifications, including grouping them under:
- Those that have serifs, known as serif typefaces.
- Those that do not have serifs, known as sans serif typefaces.
- Those that simulate handwriting, known as script or cursive typefaces.
- Those that simulate fifteenth century Northern European manuscript decorative handwriting, known as decorative or fantasy typefaces.
- Whether they are suitable for body-text or display.
- Whether they are monospaced or proportionally spaced
3.1. Typeface Classifications
In order to make navigating and working with typefaces easy, people have tried to classify them. The most commonly known classification standard is the Vox-ATypI classification, which attempts to put typefaces into classes based on similarities and differences in their characteristics. However, the Vox-ATypI classification and indeed many classifications are seldom of much use to a beginner. A detailed understanding and interpretation is normally necessary to be able to make use of them productively. This is why they are mostly used by professional designers. Indeed, most text design programs, such as Word, simply list typefaces in alphabetical order. Only professional design programs, such as some of those by Adobe, offer them within classifications.
Whether serif or sans serif is used depends largely on the tone a design is intended to project. For example, for serious and conservative applications, serif typefaces are a good choice, whereas sans serif is more appropriate for projecting a more modern or contemporary feel and the more commonly used on the Web for the body of text. As to legibility, the difference between the two is unlikely to be significant, as long as other factors that affect legibility, such as text size and color, are addressed properly.
3.1.1. Script and Decorative Typefaces
Examples of these typefaces are shown in Figure 13.12. Script typefaces are designed to look like handwriting. This means that they are mostly used to create the impression that a text has been created using pen, marker, or engraving. There are two kinds: those with joined-up lowercases (known as scripts), and those with all-separate letters (known as cursive). Decorative typefaces (sometimes called fantasy typefaces), on the other hand, are designed for visual impact, so they tend to be bold, have character, and can even be three dimensional. They can be serif, sans serif, or script, but are not as legible as plain serif or sans serif typefaces. Because they can be fashion- driven, they can, like any fashion, quickly go out of date and can also easily become boring after their initial impact, so overuse is not recommended. Also, as with most things that are decorative, they are more prone to provoke stronger reactions, which can be positive or negative, than typefaces that project neutral moods.
3.1.2. Body-Text and Display Typefaces
Body-text typefaces are those used in order to ensure text is easy to read. They are usually used for the body of text and small prints. Therefore, if there is a lot of text to deliver on a Web page, for example, these should be considered. Display typefaces are generally those considered most useful at large sizes. For this reason, some are only available in uppercases. Some are also considered best suited for decorative purposes. They are usually used for situations where there is not a lot of text to read, such as in logos and for headlines and short text. Because some have different characteristics that project different looks, they are suitable for expressing specific moods. While body-text typefaces can be used successfully for display purposes, using display typefaces for reading purposes is likely to make text difficult to read. Compared to display typefaces, body-text typefaces are usually simpler, tidier, and more serious-looking, while display typefaces are relatively complex, less tidy, have character, and are more expressive; or perhaps more fun, even if some of them can also look weird and crazy. Figure 13.13 presents some common examples of each type.
3.1.3. Monospaced and Proportional Typefaces
The words “monospaced” and “proportional” refer to the amount of space used by each character of a typeface, which means that legibility, and indeed aesthetics, can be affected by whether a typeface is monospaced or proportional. In monospaced typefaces, every character uses the same (i.e., fixed) amount of space. Although they were typically designed for typewriters, and so possibly old-fashioned, monospaced typefaces are still used, but not widely. The most common use is for displaying computer source codes. Examples include Courier and Monaco. You may remember from Chapter 3 that the <code>, <samp>, and <kbd> elements display their content in monospaced fonts and are used to display computer code and outputs.
In proportional typefaces, different characters take up variable amounts of space. They are usually easier to read and more visually appealing than monospaced, because the space between words are relatively uniform. They are also more commonly used. Figure 13.14 shows an example of each type. Note the differences in the spaces between the words.
3.2. Choosing a Typeface
A number of factors influence the choice of the right typeface, some of which have already been implied earlier under typeface classification. More guidelines worth knowing about are discussed here.
3.2.1. About the Rules
You should know the rules that guide how to use typefaces and fonts effectively, but not be afraid to break them. Most of the rules are only there to inform about what has been tried and tested, but not cast in stones. As well as being seen as providing a safe way of working, they should be seen to serve as a comfortable starting point that gives the confidence to experiment with new things where possible. Essentially, knowing and understanding rules provides the knowledge necessary to make intelligent decisions about what rules to break and how to break them, and how to evaluate a design effectively. In many cases nothing different from what is tried and test is required, even if they are familiar and unexciting. There is a reason that some typefaces have been used in certain ways and for certain purposes for ages—they work well.
3.2.2. Legibility
Legibility is whether people are able to see, distinguish, and recognize the characters and words of a text. This should not be confused with readability, which more describes how easy the words and sentence structure of a
text are to understand. A typeface should be used that has letters and characters that have good level of legibility. Typefaces that enable this include:
- Typefaces with conventional letterforms, that is, without novel shapes or characteristics, as these make it difficult for readers to quickly recognize letters.
- Typefaces with ample spacing, as very tight spacing can, again, make it difficult to recognize letters and words. Note, of course, that it is possible to increase letter-spacing for any typeface in most text production programs. Letter-spacing is discussed later in the chapter.
- Typefaces with x-height that is not too small, as a small x-height can make some letters less legible; for example, the smaller the x-height, the less distinguishable some lowercase letters, such as “c” and “e,” become.
- Typefaces designed to enhance legibility, such as body-text typefaces discussed earlier. If numbers are involved, whether or not a typeface has numbers that are as legible as the letters should be checked.
- Typefaces which look similar across different operating systems and devices. For example, text that renders smoothly on a Mac may render less smoothly on a PC and be less legible.
3.2.3. Fitness for Purpose
Some typefaces are more suitable for certain audience and for projecting certain images or moods than others. An important aspect of choosing the right typeface for a design is to find which best fits the defined goals. Whether a- typeface is fit for purpose is determined by multiple factors, ranging from its appearance to its history, including its original intent. Appearance contributes to the image or mood projected, while history contributes to appropriateness. For example, if a typeface is associated with the oppression of a people, it would be insensitive and inappropriate to use it in a design intended to celebrate the freedom of those people. Likewise, a typeface designed for a purpose is likely to be best used for that purpose.
Typeface should match the image being projected. For example, it would be inappropriate to use a playful- looking or fancy typeface for a business website, unless, of course, the business is about fun, as might be in the case of travel, holiday, or music websites. By the same logic, a playful-looking or casual typeface may be more appropriate for a celebration website than a formal, traditional, no-frills one like Garamond.
Typeface should match the sense of aesthetics of the target audience. For example, a typeface that works well with an adult audience might not be the most effective for children. The typeface on the left in Figure 13.15, for example, is more formal than the one on the right and more likely to be acceptable for adults, while the one on the right is more casual and more playful and more likely to be appreciated by children. Naturally, cheerful text color can also add to the fun for children.
Typefaces can also be used to communicate sensory information. To consciously experience the effects of different typefaces, try a little experiment: Study a collection of different typefaces, and you would soon find that it is possible to roughly group them according to the character, personality, mood, or attitude they project. You probably would find that they project various senses, such as fun, seriousness, weirdness, time period, childlikeness, masculinity, femininity, and so on. You might even be able to sense that some actually suit some human personalities more than others; or one gender more than the other. In text design, the expressive properties of typefaces should not be overlooked and should be put to good use in evoking the desired mood. To choose the right typeface to communicate a particular type of sensory information, a good practice is to actually study a typeface and write down words that it “communicates” to you and compare these with the design goal.
3.2.4. Typeface Range
Choose a typeface that has all the characters as well as enough variations to cover all the fonts, such as sizes, weights, italics, and mall caps, needed in a design. For example, some typefaces, such as display typefaces, only have uppercases; and while the letters of some may be all right, their numbers may not be very legible, or they may not have numbers at all, which means that if the use of numbers is required in a design they will not be the best choice to make. Likewise, if a typeface does not have a lot of fonts, then it would not be the best choice for a design that has an extended hierarchy of text. To have enough fonts for big and diverse projects, an extended type family, such as Arial or Helvetica, is usually the best, as extended families usually have a wide range of elements, including multiple weights, as well as full sets of characters and even serif and sans serif versions. The goal of choosing a typeface that adequately serves all the typographical needs of a design is best achieved by analyzing situations right at the beginning of a Web design project and mapping out the level of hierarchy required.
3.2.5. Combining Typefaces
The use of more than one typeface on a page is an acceptable and common practice, but it is not necessarily considered good practice to use too many. One school of thought is that no more than two should be used, but this is really just an arbitrary rule, although still a good recommendation. To some extent, whether or not to use more than one typeface depends on the quantity of text and the complexity. If there is very little text, using more than one typeface is hardly necessary. On the other hand, if there is a lot of text and/or the need to project different feels and purposes, then the use of more than one may be justified. By far the most common practice is to use two typefaces; one for the headings and subheadings, and the other for the body of text.
If more than one typeface is used, there should be enough difference between them to easily tell them apart, otherwise the exercise may be pointless. Also, it is likely to make people think an error has been made, thereby diminishing the quality of a design. Ways to ensure there is enough difference or contrast include using size, weight, structure (i.e., shape, e.g., serif or sans serif), and color (e.g., black and white), as well as choosing from different typeface classes. The general rule is to combine a neutral serif (i.e., an ordinary one) with a sans serif. Even though this may not create excitement, it is widely acceptable and unlikely to damage your reputation as a designer. When there are enough differences, some rather simple but elegant designs can result; for example, a serif and a sans serif, or sans serif typefaces from different classes, or two different fonts of the same typeface, can be combined. Figure 13.16 shows examples of typefaces with different characteristics combined.
Typefaces can also be mixed in various other creative ways. For example, different typefaces can be mixed in different cases. Figure 13.17 shows variations of the phrase “black magic,” using only Times New Roman, Bradley Hand ITC, Century Gothic, and Monotype Corsiva typefaces.
3.2.6. Typeface Availability
The typefaces used in an application will only be displayed correctly if they are installed in users’ computers. If they are not installed, the browser uses default or substitute typefaces instead. This means that it is important to use only typefaces supported by type standards, such as PostScript, TrueType, OpenType, or FreeType, if the correct display of typefaces is essential to the integrity of a design. These standards provide similar typefaces, and at least one comes preinstalled with most operating systems. Common typefaces include Times New Roman (Microsoft)— Times on Apple, Arial (Microsoft & Apple), Courier, Georgia (Microsoft), Helvetica (Apple), Verdana (Microsoft), and Geneva (Apple). Commonly installed typefaces are known as Web-safe fonts, because most users are likely to have them on their systems. Web browsers are expected to support them, or at least one from each of the groups discussed earlier (i.e., serif, sans serif, script, decorative, and monospaced). If non-standard typefaces are used in a design, then access to them should be provided one way or another, using the methods shown earlier, such as the @font-face rule, @import rule, or the <link> element.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.