Setting CSS Font Styles In Your Website Template

This page shows how to use CSS font styles in your website template.

It is part of a tutorial on how to create an HTML CSS template for your website. The previous page showed how to create the layout using tables.

Having the font styles in a CSS file lets you make changes to your entire website just by changing that one file. It's a tremendous time saver, and it keeps styles consistent throughout your website.

I'm using KompoZer, a free web page editor, for this example. If you use a different CSS editor, you'll still learn from this free CSS tutorial.

Opening The CSS Editor

KompoZer CSS Editor

For this html CSS template I'll use the template layout created on the previous page. You can use that layout or your own.

Open up your layout in KompoZer. Then in the top menubar click on Tools, then CSS Editor.

How To Set Font Styles With The CSS Editor

Setting CSS font styles for the headlines and body text in Kompozer's CSS editor is dead easy.

When you open the CSS editor select Style Applied To All Elements Of Type then in the empty text box below, click on the button at the end. If that option isn't showing, click the pallette icon at the far left of the top menubar and it should appear.

Select the element you want to set the style of e.g. h1, (heading 1) then click the Create Style Rule button.

You just need to set the text styles, so click on the Text tab right at the top of the CSS editor. You'll get a number of options including font family, font size, line height and color.

Choosing The Best Font Family

For readability on a computer screen, sans serif fonts are best. In smaller type such as body text Verdana is one of the most readable sans serif fonts, and it's also very common. It is my preferred font for body text for any html CSS template I make.

Not every computer will have it (or any other particular font) installed though, so it is best to give several options.

For body text I specify "verdana, geneva, arial, helvetica, sans-serif" for the font family. If someone doesn't have verdana on their computer, then it will try geneva and so on.

For headings and navbars I may use a serif font e.g. Times New Roman as a contrast. I make sure that it is still readable though. Don't use too many different fonts or your site will look amateurish. I stick with a maximum of two fonts.

On this page the body text is "verdana, geneva, arial, helvetica, sans-serif". Headings are "Arial, Helvetica, sans-serif".

Choosing The Best Font Size

You'll see that there are a lot of different ways to specify font size with a CSS editor, e.g. em, pt, px etc. The modern trend is to use units that allows readers resize the text in their browser. Maybe their eyes aren't so good, or maybe they're using a high resolution that makes the text appear smaller.

Percent, size keywords, and the em are all resizable and they all have their pros and cons. The em is commonly used, and that is what I use.

As a guide, the top headline on this page (heading 1) is set to 2.3em. The smaller headlines (heading 2) are set to 1.5em. Body text is 0.8em.

Be aware that with the em the font size is proportional to its parent font size. For example, if the body text size was 0.8em and you had a table in the body with a table font size set at 0.8em the text in the table would actually be displayed at 0.8 of 0.8 or 0.64em.

Using Line Height

The line height affects the spacing between rows. If it is larger than the font size there will be a gap between rows, if it is smaller than the font size rows will run together.

When I do CSS font styles I usually don't specify line height, I leave that blank so that the default is used. If you are writing for a group that may have poor eyesight such as retirees, you may want to specify a larger line height than the default to make the text easier to read.

Or, you may want to specify the line height to make your web page look better.

When you set the line height in KompoZer's CSS editor you can see the changes on your web page, so you'll know exactly what's happening.

Choosing The Font Color

For readability dark text on a light background is best, and black on white is best of all.

Whatever font color you choose, make sure it is easily readable if you want happy visitors.

Setting CSS Font Styles For This Tutorial

For Heading 1 click on the Predefined button, then set Font family to "Arial, Helvetica, sans-serif". Set Font size to 2.3em. Leave the line height blank.

Heading 2 is the same as heading 1, but the Font size is 1.5em.

For the body text click on the Use custom font family button, then paste in "verdana, geneva, arial, helvetica, sans-serif" (without the quote marks). Set font size to 0.8em.

You'll get the same styles as this page.

Setting CSS Font Styles For Your Template

Experiment, and use settings that suit your site and your audience. Look at other top rating sites in your field to get an idea of what is acceptable to your audience.

Next Page: Using CSS for the background or background image

Return from CSS Font Styles to Creating A Website Template