Font Variant & Transform:

There are two properties that allow developers to set the capitalization of text.

Font Variant

The font-variant: property allows developers to specify whether text should appear in all caps, with ‘non-capitalized’ letters being displayed as small caps.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

An example of the font-variant property. Notice how the first letters of each sentence are still full size. But, the rest of the characters are "small-caps".

Text Transform

The second property that allows for the control of capitalization is text-transform: .

Text transform takes one of four keyword values;

  • none; Do nothing.
  • uppercase; Make all characters uppercase.
  • lowercase; Make all characters lowercase.
  • capitalize; Capitalize the first letter of each word. (Sometimes also known as “Title Case”)

Some text, wiTH crAzY capitaLIZATION.

Some text, wiTH crAzY capitaLIZATION.

Some text, wiTH crAzY capitaLIZATION.

Some text, wiTH crAzY capitaLIZATION.

{ TODO: }

Read page 281 of Chapter 12 in Duckett.


Previous section:
Next section: