Font and Colour
HTML offers a way to change the font and colour of your text through some tags, allowing you to create attractive text that people want to read.
This page was last updated on 2012-08-21
FUTURE WATCH:
As already mentioned on the font size page, you should not be using the <font> tag anymore, for all sorts of reasons. Please read that discussion before using any of the code below. There's still lots to learn on this page, you're just, hopefully, going to be using this knowledge in a better way later along the line.
Changing the font face
Changing the font of your text is easy. The command used is, yes, <font>, with any changes being made through attributes. First off, if you make no changes at all, your text will probably look like this:
12pt Black Times New Roman
which isn't really the most beautiful or suitable font in the world because it was really designed for reading off paper, not computer screens. So, you want to change it to something more readable and nicer looking.
Have a look in your fonts folder (on a PC it's C:\windows\fonts). You should have a couple of dozen different fonts in there. Some will be more suitable than others and some you will use again and again. One of the most common fonts used on the net is Arial, which is the font I use here on HTML Source. To change text to Arial, or any other font, the tags are
<font face="Arial">text</font>
The attribute 'face' was so-named because fonts are more accurately known as typefaces.
sourcetip: if you have a word processor like Word, try a couple of fonts out in that. It's a lot faster to find the one you want.
It might not always work
A particular font face will only appear on a reader's computer screen if they have that font installed on their computer. So if you have your whole page defined in Digital font (» download) or something, a load of your viewers will just get a page with boring old Times New Roman. To go around this, the best idea of course is to use common fonts. If you really, really need a certain font, you can specify back-up fonts in case things go awry. Watch:
<font face="Digital, Comic sans, Arial">text</font>
See — you get a couple of chances to find a good font, separated by commas. If the first one isn't available your second choice will be used and so on. You can go on with a long list but really, you should stop after around 3 because you're wasting your time otherwise. Try to keep the fonts similar along the way and try and end it on a common font to stay away from Times.
Even then, most people won't be seeing your super cool font, so if you want this font to be used, make it into a graphic in your image editor and put the graphic on your page where you want it. It's frowned upon in proper web design, but if you're just starting out it's acceptable until you learn how to go around it properly. Do remember of course that if someone has images turned off they won't be able to read this text at all. Make sure it's not too important and always use the alt attribute.
Common fonts
For your convenience, here is a group of the most popular and common font lists:- Arial, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- Times New Roman, Times, serif
- Garamond, Georgia, Palatino, serif
- Courier New, Courier, monospace
sourcetip: See the end choices in the above list? Those are classes or families of font faces. Defining one of them as your last choice means that if none of your previous hopes work, you'll at least get something from the right family.
What's the difference between Serif and sans-Serif?
This always confused me too. Serif fonts have little ending flicks on the lines that make up the letters. Look at these words in Times New Roman (serif) and then Arial (sans-serif):
Word | Word
Look especially at the W and the D — you can see little finishing strokes. Serif fonts are more suitable for usage in books and newspapers, while sans-serif fonts are easier to read off computer monitors.
Changing the font colour
To change the colours of the text on a page for the entire page, you can define it in the <body> tag. I have a complete tutorial on body here.
To change the colours of just a small block of text or an individual word, you have to use the old font tag again. The format is
<font color="#ff0000">text</font>
Colours in HTML have to be defined as 'HEX codes', which are 6-digit codes representing the amount of red, green and blue (RGB) in the colour. To see a full chart of these codes so you can pick out the ones you like, see the HEX colour chart. Newer browsers allow you to give the color name instead, but your choices are more limited. To see a chart of these colours, look at this chart.
