26Oct, 2010

Using CSS Small Caps

Small caps are used for texts that are fully in uppercase in order to make the flow of capital alphabets less jarring to the person who is reading. Here, all lower case text is converted to uppercase text. However, the converted upper case text is in a smaller size than the original uppercase alphabets in the text.


Small caps can be indicated in CSS by making use of “font variant: small caps”.

For example, the HTML code given below
Levi Samuel

< span style = ” font-variant: small-caps ; ” > AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz < / span >
renders as

Readers are able to copy the normally capitalized plain text from pages on the net because CSS styles the text.

This font-variant property value for small caps is supported in all major browsers. The available property values are:
Normal: A normal font is displayed by default in the browser.

Small caps: The browser displays a small caps font.
Inherit: This indicates that the font variant should be inherited from the parent element.

Other CSS Font Properties

Apart from ‘font-variant’ property for small caps, there are many other properties such as the ones given below:

◦ Font: sets all the font properties in one declaration.
◦ Font family: indicates the font family for the letters.
◦ Font size: indicates the font size of letters.
◦ Font style: specifies the font style of text.
◦ Font weight: indicates the font weight of text.

Applications of Small Caps

Small caps are normally used in the printed copies of plays to indicate the character names prior to their lines. The other common application is for specifying keyboard shortcuts. Eg: keyboard shortcut for small caps in MSWord is CTRL+SHIFT+K.

Post A Comment

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