 |
|
Setting CSS Font Styles In Your Website Template
This page shows how to set 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
I'm setting the CSS font styles for the 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
Return
from CSS Font
Styles to Creating
A Website Template
|
|
