CSS Fonts

The Font properties allow you to change the font family, boldness, size, and the style of a text.

Notes - Useful Tips Fonts are identified by their name in CSS1. Note that if a browser does not support the font that is specified, it will use a default font.

The Font Property The font property is, with exception of some system fonts, a shorthand property for setting all of the properties for a font in one declaration. Note: This property also has a sixth value: "line-height", which sets the space between lines. Inherited: Yes

Example p { font: italic bolder } p { font: italic small-caps bold 12px arial } p { font: oblique small-caps px/14px arial } p { font: menu }

ValueDescriptionNNIE font-style font-variant Sets the properties for a font. 4.0 captionDefines the font that are used by captioned controls 4.0 iconDefines the fonts that are used by icon labels 4.0 menuDefines the fonts that are used by dropdown menus 4.0 message- box Defines the fonts that are used by dialog boxes caption status-barDefines the fonts that are used by window status bars

Browser Notes Note in Netscape 4.0+: The "font-variant" value in this declaration does not work

Font-Family Property The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values: family-name: The name of a font-family, like "times", "courier", "arial", etc. generic-family: The name of a generic- family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Note: Separate each value with a comma, and always offer a generic-family name as the last alternative. Note: If a family-name contains white- space, it should be quoted. Single quotes must be used when using the "style" attribute in HTML. Inherited: Yes

Example body { font-family: courier, serif } p { font-family: arial, "lucida console", sans-serif }

Possible Values ValueDescriptionNNIE family-name generic-family A prioritized list of font family names and/or generic family names for an element

Browser Notes Notes in Netscape 4.0+: The "cursive" generic-family renders as "serif" The "fantasy" generic-family renders as "sans-serif"

Font-Size Property The font-size property sets the size of a font. Inherited: Yes

Example body { font-size: x-large } p { font-size: 10px }

Possible Values ValueDescriptionNNIE small medium large Sets the size of the font to different sizes, from xx-small to xx-large 4.0 smallerSets the font-size to a smaller size than the parent element 4.0 largerSets the font-size to a larger size than the parent element 4.0 lengthSets the font-size to a fixed size %Sets the font-size to a % of the parent element

Browser Notes Note in IE 4.0+: Default value of this property is "small", not "medium" as it should be according to the W3C specification Notes in Netscape 4.0+: Default value of this property is "small", not "medium" as it should be according to the W3C specification Do not use % values under 100%. It can change color of the text or make the text difficult to read

Font-Size-Adjust The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of This means that Verdana is more legible at smaller sizes than Times New Roman. The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first- choice font. Inherited: Yes

Example h2 { font-size-adjust: 0.58 }

Possible Values ValueDescriptionNNIE noneDo not preserve the font's x- height if the font is unavailable numberDefines the aspect value ratio for the font.

Font-Style Property The font-style property sets the style of a font. Inherited: Yes

Example body { font-style: italic }

Possible Values ValueDescriptionNNIE normalThe browser displays a normal font italicThe browser displays an italic font obliqueThe browser displays an oblique font 4.0

Font-Weight Property The font-weight property sets how thick or thin characters in text should be displayed. Inherited: Yes

Example p { font-weight: bold }

Possible Values ValueDescriptionNNIE normalDefines normal characters boldDefines thick characters bolderDefines thicker characters4.0 lighterDefines lighter characters4.0