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
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.
I'm setting the CSS font styles for the website template I started on the
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.
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
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".
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.
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.
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.
For about-armidale.com I've set body text size to 1 em and font family
"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.
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
Next Page: Using CSS for the background or background image