Setting CSS Font Styles In Your Website Template

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

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, it keeps styles consistent throughout your website, and it's not all that hard.

This page is part of a tutorial on how to create a website template.  The previous page showed how to create the layout using tables.

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

I'm setting the CSS font styles for the website template I started on the last page. You can copy that layout or make your own.

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

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 quite 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 to get a drop down menu. If Style Applied To All Elements Of Type isn't showing, click the palette icon at the far left of the top menubar and it will appear.



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

To set font styles for body text inside the tables, select custom style rule and type "td" (without the quote marks) in the text box, then click Create style rule.

You only 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.


Setting the font styles


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 and text in tables 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. It's best to use units that lets 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 too small to be easily read.

Percent, size keywords (such as small, medium), 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.

Headline size using ems is also proportional to the body text size. As you increase the body text size the header text will get larger.

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 (or set it to normal) 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.

CSS Font Styles For about-armidale.com

For about-armidale.com I've set body text size to 1 em and font family to
"verdana, geneva, arial, helvetica, sans-serif". Heading 1 font size is 2.3 em, Heading 2 is 1.6 and both use "times new roman,times,serif" for the font family.

For the table I've set the font size to 0.9 em and the font family to "verdana, geneva, arial, helvetica, sans-serif" again.

Full size picture of the various text styles in about-armidale.


Note that because the content table (where "This is Heading 1" is written) is nested within another table the body text is smaller. I set the table body text at 0.9 em, so "This is table body text" is 0.9 of the size of "Navbar goes here" and that would be 0.9 of the size of any body text written outside of the tables.

Setting CSS Font Styles For Your Template

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


Next Page: Using CSS for the background or background image

Pages In The Template Tutorial



Return from CSS Font Styles to Creating A Website Template