Size of Text of Text with CSS

Like typefaces and fonts, the size of text plays multiple roles in textual content design. The two properties used for controlling it are font-size and font-size-adjust.

1. font-size

The font-size property is used to specify the size of font for selected HTML elements, pseudo-element, or pseudo­classes, and whatever value is set may change the size of other items, if they are in relative lengths like em, percentage, and ex. The property is inherited and Table 13.3 lists the types of values the property takes.

Each of the value-types or their combination is suitable for different Web design situations. For example, keywords make it easy to scale size up or down relative to the font size of body element, length-based types like px are good for accuracy, and relative types like % and em in combination with px, for example, are good for scalable and dynamic designs. Table 13.4 further defines standard length units.

Figures 13.18 and 13.19 show an example of how to use the font-size property with various types of values, and Figure 13.20 shows the result.

In the example, the body{} rule specifies a font and makes all text 12px. The .xxsmall{} and .small{} rules display the text in the elements of class=“xxsmall” and class=“small” in reduced absolute sizes that are based on the browser’s default font size (i.e., 16px). The .larger{} rule displays text in enlarged relative size based on the font size specified for the parent element (<body>, in this case). The .percent{} rule displays text at 200% (twice) larger than the font size of the parent element and, likewise, the .em{} rule displays text at 1.5 times larger than the font size of the parent element. Note that if no font size is specified for the body element, the size of the element usually defaults to default browser size.

2. font-size-adjust

The font-size-adjust property is sometimes used with the font-size property to ensure the legibility of lowercase letters when a font is substituted. This is useful because sometimes when the specified first-choice font is unavailable and an alternative is used by the browser, lowercase letters in the alternative font might not be legible. The property is inherited and allows you to specify that the font size should be chosen based on the height of the lowercase letters (i.e., x-height) instead of the height of the uppercase letters. The values it supports are none and number values. The number is usually set to the aspect ratio of the first-choice font. The aspect ratio of a font is the ratio of its x-height to its height (i.e., x-height divided by the font size). See Figure 13.1 earlier for more on these properties. When the aspect ratio is specified, the browser basically adjusts the size of the available alternative font so that its aspect ratio matches the one specified. For example, in the example in Figure 13.21, the browser adjusts the aspect ratio of the alternative font to 0.58. More specifically, it multiplies the specified number by the font size of the first-choice font and adjusts the x-height of the lowercase letters of the alternative font to match the result. In the example, this x-height would be roughly 6 (i.e., 0.5 x 12px). You can find the aspect ratios for common fonts on the Web.


3. Font Size in Design

Font size is one of the elements of design that contribute to legibility and structuring of content. A design would most certainly contain more than one font size. At the minimum, the heading would be of one size and the body of text, a much smaller size. While the structure created using different font sizes may remain relatively stable across different systems configurations, the same font size can produce varying levels of legibility, depending on various factors, such as typeface, screen resolution, operating system, delivery device, and target audience. Some of these factors and how to deal with them are discussed here.

3.1. Font Size and Typeface

A font size that is legible in one typeface may not be in another. For example, text that is in 10pt Arial is legible, but the same text in 10pt Times New Roman is smaller and less legible. This is why the choice of the font size is not usually made until typeface has been determined. Most typefaces are legible at a size of 10-12pt and suitable for body of text displayed on a standard computer screen.

3.2. Font Size, Operating Systems, Resolution, and Screen Size

Like with typefaces, the same font size can produce varying levels of legibility across operating systems. For example, a font size tends to be larger on a PC than on a Mac. Similarly, the same font size will appear smaller on a higher-resolution screen than on a lower-resolution screen. For example, the same text will be larger on 1024 x 768 than on 1920 x 1080. Also, differences in screen size such as exist between a standard screen and mobile devices’ screen can cause a font size that is legible on one to be illegible in the other. This problem is commonly tackled in a number of ways. One is to create a different version of a design for each screen, using the best font size. Another is to use the Responsive Web Design (RWD) technique, which adapts font size (as well as other screen contents) to screen size. RWD is discussed more fully in Chapter 21. In all cases, it is good practice to try out a design on as many different system configurations as possible.

3.3. Type Size and Target Audience

The choice of font size can also depend on target audience, since age can influence how people perceive text. For example, children tend to prefer larger font sizes than adults. This is why children’ books are typically in larger prints. Even some adults, specifically older adults, due to the effects of aging, prefer larger font sizes than younger adults. Ideally, users should be allowed to change font size to suit their preference. A table of comparison is given in Chapter 24 that includes other design elements worth knowing about.

3.4. Type Size and Visual Hierarchy

Another important role of font size in design is in creating visual hierarchy of importance, which is the use of progressively smaller sizes to attach varying levels of importance to different parts of content. Figure 13.22 shows an illustration that uses 18, 16, 14, and 12 pt.

Structuring text in this way (along with the application of other types of styling) guides the reader’s eyes easily through the content of a design. There is no one correct set of sizes for achieving a good visual hierarchy, since what is suitable and acceptable depends on various factors, including typeface and screen size. However, the size used for the body of text should be the smallest in all cases, or at least not larger than those of headings or subheadings. One general guideline is that whatever the sizes used, they should be from the sizes in the typographic scale, shown in Figure 13.23.

The scale was developed in the sixteenth century by European typographers and it was believed that using only sizes from it can more easily produce an aesthetically pleasing design than selecting outside it. The scale has carried through till today and its variants are what are offered today in virtually any application that allows the font size to be specified. So, although other sizes can be used in Web design, it is good practice to consider the sizes from the scale or its variants in the first place. While the scale is in points (pt), the size ratios can be achieved using the units more commonly used in Web design, such as pixels (px), percentages (%), or EMs (em)

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *