The Best Way to Define Font Sizes in CSS

Often designers will want fixed font sizes so that the text on the actual size will exactly match their mockups, but The Web is Not Print (see also Pixel Perfect Design Does Not Necessarily Equal Good Web Design). A List Apart has a worked out a good method for sizing text consistently across browsers while maintaining the user’s ability to resize the text to fit their needs.

All you need to do is define a baseline size and line height in the body tag, and then use em’s throughout the rest of the site.

body
{
	font-size: 100%;
	line-height: 1.125em; /* 16×1.125=18 */
}

.bodytext p
{
	font-size: 0.875em;
}

.sidenote
{
	font-size: 0.75em;
}

2 thoughts on “The Best Way to Define Font Sizes in CSS

Leave a Reply to Ian Cancel reply

Your email address will not be published. Required fields are marked *