Text Case

Text should already be set in the correct case by the system, but there will be times when you are not sure what case the text will be—for example, if it is being dynamically provided by a database—or when you might want to change the case for emphasis, such as in header text.

Set your title text case only if necessary

Use the text-transform property to set the text case to either lowercase or uppercase. You can also set capitalize, which will capitalize the first letter in each word.

							text-transform: capitalize;
							

Adding this to all headers may seem like a good idea to ensure that they are properly formatted. Unfortunately, capitalize is applied indiscriminately to the text, meaning that certain words that should not be capitalized (of, the, etc.) will be capitalized anyway.

Use small caps for special emphasis

Although often maligned by designers, when used well, small caps (sometimes called mini-caps) can add nice emphasis to text more subtly than bold or italics can. small-caps will render all upper- and lowercase-letters as uppercase characters, but reduce the lowercase letters’ height to the font’s x-height:

							font-variant: small-caps;
							
						
							text-sapcing: .05em;
							

When using small caps, it’s also a good idea to loosen the letterspacing some by adding a small amount of tracking.

While the overuse of small caps can quickly become annoying, using them for special cases can add nice layer of texture to your typography.