CSS Fonts

Font sizes

Style sheets allow you to exert greater control over fonts in your content document

Prior to CSS, you were at the mercy of the user and her browser

How the type on the page appeared depended on the fonts that were installed on the user's machine and the fonts chosen to be the browser's defaults

Now there is a wide variety of font characteristics that can be used in CSS rules

First, we have to clarify the options for setting measurement values when working with fonts

Acceptable values include:

Measurement units

There are also options that can be used when specifying length

Unit	Example	Scalability	Conversion
millimeter:	1mm	Absolute (No)
centimeter:	1cm	Absolute
inches:	1in	Absolute
points:	1pt	Absolute	72pt = 1in
pica:	1pc	Absolute	1pc = 12pt
em:	Iem	Relative(Yes)	1em = the point size of the font
ex:	1ex	Relative	The ex height of the font
pixel:	1px	Device dependent	1px = .25-.35mm

Absolute values are fixed and will not change as the window size changes and as the user makes changes in her style sheet

Relative values change as their parent element changes

In this case, the font provides the parent value

If the font changes (and different fonts have different absolute values), and values set in <em> or <ex> will automatically resize

When a relative value is used, the child element inherits the "computed value" of the parent

For example, setting the font-size, text-indent, and header:

body { font-size: 12pt;     /*3em = 36pt (3*12pt) */
          text-indent: 3em
         }
h1 {font-size: 15pt }

The <h1> inherits the text-indent from the <body> rule

Instead of an indent of 45pt (3em = 3*15pt), it is 36pt

Pixels are dependent on the device used to display the page, and the computer should automatically resize the page

Scaling documents

This means that the content document will look good as the user changes the settings on her browser or the rules of her style sheet

This is done by using relative values as much as possible

Avoid setting font sizes in points or using inches to set margins

Try to use percentages, keywords, em and ex

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssfonts.html
Last updated 3.15.06 - H. Rosenbaum