Specifying Lowercase or Uppercase in CSS

It is sometimes necessary to specify whether to make text lowercase or uppercase, such as when you want to convert the case of a user’s text input. The property used to achieve this is the text-transform property. It is inherited and used to specify to capitalize all text, make all text lowercase, or capitalize just the first letter of each word. The values it takes are listed in Table 14.5. Figure 14.17 shows how the property is used and Figure 14.18 the result.

1. Text Capitalization in Design

Traditionally, lowercase is used for the body of text, with a few exceptions, such as the first letter of a sentence and proper nouns (i.e., names of particular things). This is because text written in lowercase is easier to read. While lowercase letters generally have enough visible differences to make people quickly and easily distinguish between them, uppercase letters have similar rectangular fonns that tend to not make text easily legible, thereby forcing people to read words letter by letter. On the other hand, all-uppercase can be effective for attracting attention and well-suited for short texts, such as headings. This is why it is used for warnings, as in, for example, WARNING! It is essentially synonymous with shouting. This is another reason it should be used with caution and purpose.

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 *