Home > CSS > Font Propertiesprinter version

CSS Font Properties

CSS allows you to set the properties of a font.

Units of Measurement

Font units may either be relative or absolute. Absolute units have no real meaning on a computer screen so are not covered here. Relative units include ...

em, en and ex are units historically based on metal type. In style sheets they act as multiples of a default size e.g. If the default size were 10 pixels then 2em would be 20px.
px is straightforwardly a size in pixels which will show as a different physical size on different screen resolutions.

Example of Setting the Font Properties of a Class

.font_class_name {
font-family: verdana, sans-serif;
font-size: 12px;
font-style: italic;
font-variant: normal;
font-weight: bold
}

Property	Description	Values
font−family	A list of font family names separated by commas (e.g. verdana,helvetica). and/or Generic font family names (e.g. serif,sans-serif). Note: If the name contains spaces then it should be enclosed in quotation marks.	family−name generic−family
font−size	Sets the size of the font.	Absolute xx-small x-small small medium large x-large xx-large Relative larger smaller length em en ex px percentage %
font−style	Sets the style of the font.	normal italic oblique
font−variant	Sets the style as either normal or in upper case at the same size as the lower case letters.	normal small-caps
font−weight	Sets the boldness of the font. Note: With numeric units 400=normal and 700=bold.	normal bold bolder lighter Numeric 100-900

Previous - CSS Classes Next - Color and Background Properties