 |
|
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
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
|
|