The Web Design Group

Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Maintained by John Pozadzides and Liam Quinn

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.