How do I control the size of text?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the font-size property to control the size of text.
Tutorial created using: Windows XP


The size of text can be controlled using the font-size property. The CSSW 2.1 specification states that the value for this property can be: absolute size, relative size, length, percentage, or inherit. Possible absolute sizes are: xx-small, x-small, small, medium, large, x-large, and xx-large. Possible relative sizes are: larger, smaller. In addition, size can be specified in terms of lengths. Lengths can be specified in a variety of units, such as relative units like em (font-size of relevant font), ex (x-height of relevant font), and px (pixels), and absolute units such as in (inches), cm (centimeters), mm (millimeters), pt (points - 1/72 of an inch), and pc (picas - 1 pica = 12 points). Percentages can also be used to specify the size relative to the parent element's font size.

The style-test.html file below demonstrates several different font-size values.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
</head>
<body>
<div style="font-size: xx-small;">font-size: xx-small;</div>
<div style="font-size: x-small;">font-size: x-small;</div>
<div style="font-size: small;">font-size: small;</div>
<div style="font-size: lighter;">font-size: lighter;</div>
<div style="font-size: medium;">font-size: medium;</div>
<div style="font-size: large;">font-size: large;</div>
<div style="font-size: x-large;">font-size: x-large;</div>
<div style="font-size: xx-large;">font-size: xx-large;</div>
<div style="font-size: smaller;">font-size: smaller;</div>
<div style="font-size: larger;">font-size: larger;</div>
<div style="font-size: 1.2em;">font-size: 1.2em;</div>
<div style="font-size: 15px;">font-size: 15px;</div>
<div style="font-size: 12pt;">font-size: 12pt;</div>
<div style="font-size: 100%;">font-size: 100%;</div>
<div style="font-size: 110%;">font-size: 110%;</div>
</body>
</html>

The display of style-test.html in IE7 is shown below.

font-size example