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...
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.
On this page:
Why Use CSS Relative Font Sizing?
Step 1: Set Up an Initial Relative Font Base Size with CSS
Step 2: Add CSS Relative Font Sizing to the Footer
Step 3: Designating Heading Font Sizes with CSS Relative Sizing
Step 4: Designating a Contrasting Font Family for Visual Interest
Step 5: CSS and Typography
Cross-browser Cross-platform Fonts Testing
More on CSS and Fonts
New and Popular CSS Books
Recommended by WebsiteTips.com
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:
CSS Tutorials Tips (section homepage)
Converting Existing Content to CSS
Here at WebsiteTips.com s Web Resources section:
Accessibility Tutorials Resources
Accessibility Tutorials Resources Section 508 ADA and Web Sites
Accessibility Tutorials Resources W3C and Web Site Accessibility
CSS Tutorials Resources CSS Fonts CSS Typography
Typography Tutorials Resources Typography Tutorials
Typography Tools Resources Cross-Browser Cross-Platform Font References Information
More on Color
Here at Websitetips.com s Web Resources Color section:
Color Tutorials (Resources on the Web)
Color Charts at WebsiteTips.com
Color Scheme Tools at WebsiteTips.com
Color Blender Color Scheme Tool (up to 10 ?midpoint? blended color shades within your chosen 2 colors)
Colormatch Remix Color Scheme Tool (beautiful harmonizing color schemes with up to 9 eye-catching colors)
Colour Scheme Chooser (monochromatic analogic complementary split complementary triadic and double contrast colour schemes)
Color Charts Color Tools (Resources on the Web)
Books on Typography and Design
Recommended by WebsiteTips.com
by Shirley E. Kaiser M.A. SKDesigns