Cascading Stylesheets Tutorial #5
Controlling Text Size with CSS

Bookmark This Page

Controlling Text Size with Cascading Style Sheets.

The use of the CSS font-size property gives more control over the size of text. Stylesheets recognize many different kinds of units that you can use to specify the size of an element.

3 basic ways to specify the size of text;

points, ems and pixels
keywords
percentage values

Here is an explanation of each

Points:
P { font-size: 16pt }
This code tells the browser to display all <P> text at a size of 16 points.

Point size is a unit familiar to print designers and refers to an imaginary box that extends from the bottom of a descender (like "p") to the top of an ascender (like "d"). Points work well across browsers and platforms.

Points work as small or as big as you want.

Em:
P { font-size: 20pt }
B { font-size: 1.5em }

An em is a unit of distance equal to the point size of a font. In the example any <B> text within the <P> tag would be 30 points, because the em is one and a half times the size of it's parent, the <P> tag.

Pixels:

P { font-size: 20px }

The advantage in using the pixel unit is that text sizes are similar across platforms but the disadvantages are that Web pages will not print consistently or maybe not print at all and sometimes they'll print with ultra-tiny text.

You can also use other units such as;
in --inches
cm --centimeters
mm --millimeters
pc -- picas
ex -- x-height

Keywords:
P { font-size: large }

There are seven keywords:
xx-small
x-small
small
medium
large
x-large
xx-large

Using keywords, the browser is free to decide which exact font size is appropriate for each keyword. For example, x-large is displayed at 28 points in Netscape Communicator (Windows and Mac), 24 points in IE 4 (Windows and Mac), and 18 points in IE 3 for Windows 95.

smaller and larger can also be used.
Smaller tells the browser to adjust the size of the current text down a notch on the keyword scale.

Percentage Values:
P { font-size: 10pt } B { font-size: 200% }

Another way to specify text size is percentage values. In the code example, we have told the browser to make all <b> text within the <P> tag to be 20 points. Percentage values are always based on the the inherited value of the parent element so 200% of 10 = 20.

Next CSS Tutorial Displaying Text in Bold and Italics