WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

How to Size Text with CSS

Create User-friendly Web Site Font Sizes with CSS Relative Font Sizing

by Shirley E. Kaiser, M.A., SKDesigns

Published November 26, 2007. Copyright © 2007-2008 Shirley E. Kaiser, M.A., SKDesigns and WebsiteTips.com. All rights reserved.

Looking for an easy way to designate CSS font sizes for your website that will work well with modern, mainstream browsers for Windows or Mac computers? Need to also make sure your website's font size approach is universally accessible, meets W3C's WAI Accessibility Guidelines, U.S. Section 508 requirements, or other accessibility requirements? This tutorial will show you one possibility that can meet those needs by using CSS relative font sizing.

What about browser support? See Cross-browser, Cross-platform Fonts Testing.

Skill Levels: This tutorial assumes a basic familiarity with CSS.

New and Popular CSS Books
Recommended by WebsiteTips.com

  •  Cover - CSS Mastery. by Andy Budd, Simon Collison, Cameron Moll. 02-2006. 
  •  CSS Web Site Design. By Eric Meyer. Peachpit Bk/CD-Rom (11-09-2006). 
  • The Art and Science of CSS. By Cameron Adams, Jina Bolton, others.
  •  Transcending CSS. by Andy Clarke, Molly Holzschlag. 
  •  More Eric Meyer on CSS, by Eric Meyer. Published by New Riders, 2004. 
  • Cascading Style Sheets: Separating Content from Presentation, 2nd Ed. By Owen Briggs, Steve Champeon, others. Glasshaus, 03-2004.
  • Book cover: The CSS Anthology: 101 Essential Tips, Tricks & Hacks, Practical Solutions to Common Problems, by Rachel Andrew
  • The Zen of CSS Design, by Dave Shea, Molly E. Holzschlag. Peachpit 12-2004.

Read reviews, why we recommend each book in our CSS Books Recommendations section!

In association with In association with Amazon.com

Why Use CSS Relative Font Sizing?

Using relative font sizing allows font size scalability / flexibility by users, which is also an important reason why this approach is considered best practice for fonts. Since it provides scalability, which means flexibility for visitors, at this point relative font sizing designations are far more universally accessible and more user-friendly than absolute font sizing. In fact, relative font sizing is recommended by the W3C's Accessibility Guidelines, U.S. Section 508 requirements, and other accessibility guidelines and requirements. (See More on CSS and Fonts below for resources.)

As you'll see below, I use CSS font size keywords for the base font size, for footers and main text content, while I use em relative units for headings (more on em relative units in Step 3: Designating Heading Font Sizes with CSS Relative Sizing).

The reason I use CSS font keywords for the base font size and elsewhere, along with em units for headings, is for scalability - flexible font sizing. The font sizes will scale relative to each other if the user increases or decreases font sizes with the browser. In addition, this is a user-friendly approach that also happens to meet W3C's WAI Guidelines and U.S. Section 508 requirements, too. Using percentages is another way of designating relative font sizing.

I personally find CSS font keywords a little simpler to use than percentages, but both approaches can work well when you understand how to work with the cross-browser differences. Font size keywords are based upon the browser default font size, while em and % units are based upon the parent element font size and are influenced by the CSS cascade. From CSS Discuss-Wiki, Using Keywords:

In modern browsers rendering in Standards Mode, body {font-size: medium;} produces text equal in size to the browser default, whatever size that may be, and equal in size to that from body {font-size: 100%;} and body {font-size: 1em;}. The keywords differ from em and % in that each keyword is always based upon the browser default, while em and % are based upon the size of the parent element, which is subject to cascade of ancestor sizing.

Internet Explorer 6 in Quirks Mode and earlier Internet Explorer versions treat 'small' rather than 'medium' as the browser default, and each of the other keyword sizes correspondingly larger. As a consequence, authors using keywords should ensure that their documents are rendered in Standards Mode, and understand that early Internet Explorer versions will not size them the same as current browser versions.

Due to their immunity to cascade, these keywords are referred to by the [CSS specs] as absolute-size, even though they are always relative to the browser default.

At the time of this tutorial (late November, 2007), version 4 and version 5 browsers are barely on the radar in Web site stats logs, so this tutorial only lightly touches on those old browsers in the section below, Cross-browser, Cross-platform Fonts Testing.

Tip: Font Size Increases and Site Layouts

What about a site's design breaking if the font size is increased by the user?
Well, it's also important to allow for font size increases and decreases with your design and layout, too. Test your design and layout by increasing the font size in various browsers. Your design and layout shouldn't break or create unreadable text by increasing the font size at least a couple of notches or possibly more, depending on your site's target audience. If it does break or the text becomes unreadable in some way, you'll need to make adjustments to the CSS for your layout and possibly make other changes. Planning flexibility and scalability from the start is the way to go. If that isn't the case, though, you may need to do some retrofitting by reworking some of your CSS and possibly some of the design elements to make them scalable. (These issues are beyond the scope of this tutorial, though - maybe that's a good topic for a tutorial to come, huh?)
How much text size increasing is reasonable for testing?
You'll undoubtedly get different answers to that. An important consideration should be the visitor needs for a particular website project, although we typically don't know whether or not visitors use larger font sizes (an obvious exception, of course, is if you're building a site specifically about and for the vision impaired). So my own recommendation is to make sure your layout doesn't break and the text is still readable when increased at least 2 or 3 notches in the browser. You might need to test to a greater extreme if you need to build a site that must adhere to U.S. Section 508 or other government or company requirements.

Step 1: Set Up an Initial Relative Font Base Size with CSS

The approach I explain here is one I've developed, revised, and used over several years, an approach that I've found to work consistently well regardless of a site's specific design or browser. I don't consider my approach to be the only way to go - rather, I consider it as one possible approach of many that can work well cross-browser and cross-platform. It's important to cross-browser test your own project to ensure acceptable results.

First, here is the basic HTML without any font styling:
CSS Font Sizing, Before We Begin - the Unstyled Web Page. (A separate popup window will open.)

I begin the font declarations in my style sheet by adding the font keyword 'small' to the body element, along with the font families, using CSS shorthand to combine the rules into one declaration:

body {
font:small Verdana,Geneva,Arial,Helvetica,sans-serif;
}

View the results as a live HTML page:
CSS Font Sizing, Step 1: Results of Adding the base font size. (A separate popup window will open.)

Step 2: Add CSS Relative Font Sizing to the Footer

After designating the base font sizing, I then need to designate only exceptions to that base rule, such as headings, navigation bars, and footers. I typically use smaller text for the footers, such as:

#footer {
font-size:x-small;
}

View the results as a live HTML page:
CSS Font Sizing, Step 2: Results of Adding the footer font size. (A separate popup window will open.)

top‘On this page’ menu

Step 3: Designating Heading Font Sizes with CSS Relative Sizing

As mentioned above, I prefer to use em relative units for headings. I find the cross-browser, cross-platform results to be similar, and it's easy to implement. The em relative unit sizing is relative to the CSS font base size designated above in Step 1: Set Up an Initial Relative Font Base Size with CSS.

The W3C explains the em relative unit,

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

Why don't I use font size keywords for headings, too? Using em units is much more versatile, allowing me to use finer tuning to font sizes than font size keywords, which are limited to only seven keywords available: xx-small, x-small, small, medium, large, x-large, and xx-large. Using the em unit for headings, along with setting the base font size with the font size keywords is a good combination overall and works well cross-browser.

Here's how I designate em relative units for headings using the example started above:

#content h1 {
font-size:2.50em;
}

#content h2 {
font-size:2.15em;
}

#content h3 {
font-size:1.85em;
}

View the results as a live HTML page:
CSS Font Sizing, Step 3: Results of Adding the headings font size. (A separate popup window will open.)

That's basically it! This sets up the very basics for a website project's font sizing needs in a solid way that works well regardless of the site design or browser.

As I develop a new website, along with other CSS rules for layout and design, I'll then add other font size rules where needed, such as navigation and special notes boxes. I always test all along the way - font sizes as well as all other CSS rules. That way it's easy to identify potential problems and fix them immediately.

Tip: Font Sizing, Font Families, and Colors

Note that I don't necessarily use the exact font sizing shown above for every project. The font size designations vary depending on the Web site project. The h1 heading size is usually the largest, and they decrease in size from there.

In addition, it's often more visually interesting to use a contrasting font family for headings, which you'll see in Step 4: Designating a Contrasting Font Family for Visual Interest below. See also WebsiteTips.com's Web Resources Typography Tutorials, Books for lots of great ideas for your site's typography.

Also, website designs frequently use different colors for each heading, too, as shown in Step 5: CSS and Typography below.

Step 4: Designating a Contrasting Font Family for Visual Interest

The above covers the very basics of setting up relative font sizing using CSS. At this point, frankly, the typography is rather boring since so far I've used the same font families and same colors (black text, white background) for the headings, content, and footer. CSS makes it easy to create much more interesting typography with your site designs. For starters, try a contrasting font family for your headings.

In Step 1: Set Up an Initial Relative Font Base Size with CSS above I designated sans-serif fonts for the body element, which is inherited by all the elements within it. For contrast then, I could try a serif font for the headings, such as:

#content h1, #content h2, #content h3 {
font-family: "Times New Roman", Times, serif;
}

View the results as a live HTML page:
CSS Font Sizing, Step 4: Results of Adding contrasting font family to headings. (A separate popup window will open.)

Tip: Combine CSS Rules

As you can see above, you can combine your CSS rules when they are the same. While this helps shave off some CSS file size, I also find it easier to keep CSS rules more consistent, such as using the same font family for all the headings.

Tip: Cross-platform Fonts

Keep in mind that not all computers have the same fonts installed, and there can be quite a difference between Windows and Mac computers, too. If you choose fonts that are similar in style and size to each other within your CSS font families list, you'll have more similar cross-platform results. See WebsiteTips.com's section on cross-browser, cross-platform fonts, Typography Tools Cross-Browser, Cross-Platform Font References, Information.

Also, as you experiment with different font families for those headings, you might need to adjust your font sizes a bit, too. An 'h1{font-size:2.0em}' font declaration for one font family might be way too big or way too small with a different font family. That's also why I recommend choosing groups of font families with similar characteristics cross-browser and cross-platform.

Step 5: CSS and Typography

For the last step here, I've added some colors and other CSS rules just to give you a small sampling of typography possibilities that are easy to implement using CSS.

For example, you can use the CSS text-transform property to “transform” the text, such as: uppercase, capitalize, or lowercase. That's an especially handy property to use for headings. You can also add spacing between the letters if you wish, which can add interesting effects, using the CSS letter-spacing property.

In addition, you can use CSS margin and padding properties to help visually group text and headings together better. For text within paragraphs and bulleted lists, you might also consider adding space above and below each line of text by using the line-height property.

The CSS below shows a possibility for what I consider basic typography with CSS. I've used all the above mentioned properties - text-transform, margin, padding, line-height, as well as colors for each heading.

body {
color:#000;
background:#fffdea;
}

#content h1 {
color:#00331a;
background:transparent;
text-transform:uppercase;
letter-spacing:0.15em;
margin:30px 0 0 0;
padding:0;
}

#content h2 {
color:#b57111;
background:transparent;
margin:10px 0 0 0;
padding:0;

}

#content h3 {
color:#5e2208;
background:transparent;
margin:30px 0 0 0;
padding:0;
}

#content p {
margin:2px 0 20px 0;
padding:0;
line-height:1.65em;

}

View the results as a live HTML page:
CSS Font Sizing, Step 5: Results of Adding Typographic Elements with CSS. (A separate popup window will open.)

Another version, changing only the CSS:

View the results as a live HTML page:
CSS Font Sizing, Step 5: Alternative Results of Adding Typographic Elements with CSS. (A separate popup window will open.)

Those are just basic typographic elements added using CSS. There's plenty more you can do with CSS and typography to make your designs look highly professional. CSS Zen Garden is one example of a multitude of possibilities using the same HTML template. WordPress themes are full of examples using the basic WordPress templates to create totally different looks.

top‘On this page’ menu

Cross-browser, Cross-platform Fonts Testing

In addition to local testing, the markup and CSS in this tutorial have been thoroughly tested in the multitude of browsers via BrowserCam.com with several versions of Windows, Mac, Linux, and a multitude of browsers for each OS. The result is quite similar in each browser.

For Netscape 4 and other very old browsers, however, you might wish to hide the font size designations from them or specify font sizes specifically for old browsers if you must designate font sizes for them for a specific project.

In addition, all the markup and CSS is based on W3C Recommendations and validates. No hacks are used.

It's always a good idea to do thorough cross-platform, cross-browser testing for Web site development work.

More on CSS and Fonts

Here at Websitetips.com's Articles, Tutorials, and Tips section:

Here at WebsiteTips.com's Web Resources section:

More on Color

Here at Websitetips.com's Web Resources Color section:

Books on Typography and Design
Recommended by WebsiteTips.com

  •  Avant-Garde Page Design 1900-1950, by Jaroslav Andel. Delano (6-2001) 
  • Book cover: Logo Font & Lettering Bible, by Leslie Cabarga. 
  • Thinking with Type. by Ellen Lupton 
  • Great Web Typography, by Wendy Peck; Wiley Publishers 2003.
  •  Cover: The Elements of Typographic Style, by Robert Bringhurst 
  •  New Typographic Design, by Roger Fawcett-Tang. Yale Univ. Press (5-21-2007) 
  •  Cover - Design with Type. by Carl Dair. University of Toronto Press (June 14, 2000). 
  • The The Non-Designer's Type Book, 2nd Ed., By Robin Williams. Peachpit (9-22-2005).

Read short reviews and find more book recommendations on Web site-related topics in our Recommended Books, Software section!

In association with In association with Amazon.com

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation