WingDings is a sorts font meaning all kinds of oddball characters, like circles, boxes, hearts etc.

Do you see all the above lines in different type styles? You should, however chances are you don't! The ones you do see as different than Times, are the ones you have installed on your computer.

It is well known that discrepancies between what is installed on any computer is different than that on another computer as well as discrepancies between PCs and Apple/MAC computers. The same typeface may even be named differently, even though it is the same font. So built in to the <font> tag is the ability to call out different faces inside the same tag. You'll frequently see this and I recommend you do it. Check this out:

<font face="verdana,arial,helvetica">

We didn't mention helvetica above did we? No we didn't. Helvetica is more or less equivalent to Arial on the PC. Verdana is different. So here what is being said is that I really want you to see this page in verdana but if you don't have that installed I'd settle for you seeing it in arial and if not that then I guess I'll have to settle for helvetica. You have a pretty good chance here of your user seeing a sans serif typeface here rather than a serif face like times new roman.

Ut oh. Did I just confuse you? All in all, basically, and I mean very basically, there are two types of fonts. Serif and Sans Serif. It's Latin. Serif being faces like Times New Roman, and sans serif being faces like Arial.

Times New Roman
Arial

The above graphic shows two letters, W and I, in Arial and in Times. Serif faces have the combination of thick and thin lines, as in the Times example above right. Sans Serif are more or less all the same weight lines as in the Arial above left. Think of it as serif having "frills" and sans serif being plain stick figure type. Sans by the way means without so it is without serif or without frills.

The word font refers to the type face. It refers to an entire alphabet and numbers of any particular type face including all the assorted characters like %, ¢, ©, $, !, etc.

Font Size

You Must Use IE Here ... NOT Firefox! <font size="-2">size -2<br> <font size="1">size 1<br> <font size="2">size 2<br> <font size="3">size 3<br> <font size="4">size 4<br> <font size="5">size 5<br> <font size="6">size 6<br> <font size="7">size 7<br>

Font Color

Get the idea? This works too; <font color="red"> Red — <font color="blue"> Blue — <font color="green"> Green

I don't use the actual names, I always use the code. Why? I dunno. I suppose I'm old fashioned or something. It just bothers me to simply type in a colors name, when there is an alpha numerical designation for it. You do it however you wish.

It's a bit hard to read some of the colors against the colored background. Many designers only use white as a background. Think about it and you'll agree that most books are printed with black ink on white paper, a centuries old proven combination. I like a bit of color, usually pastels or light colors. I also think that over a long period of time reading from a computer screen, a lightly colored background, such as this tutorial has, is easier on the eyes than the plain white is. That's up to you, just make it work with your font color choices.

The golden rule ... make the typeface color contrast with the background color so it is readable. Having said that, be careful what colors are used, especially if any amount of reading needs to be done. Some combinations are really annoying! Again, the best combination is black type on a white background. Second best are light colored backgrounds with dark type. White type on black works, but it isn't good for long term reading. It can be pretty snazzy for a heading though!

Keep in mind while you design your sites that the real end goal is to have a positive user experience. It's not necessarily only about showing off your design skills. You'll see many things in print that look nice, but won't translate as well to the screen. A good example of this is a thin white font on a black background. Looks pretty good in print, but will (on most PCs) display onscreen as silver type. Try it out. Odd isn't it?

You should be using NoteTab now and either copying the above code to your own computer or typing it out. Just reading through this tutorial will not teach you how to code. You need to do it. The fact that you are reading this tutorial leads me to believe you have a project in mind to put on the web and need some instruction. Use what you've learned so far to get started. Little by little as you learn more, apply it to your site. When you get to our list of codes you'll need to try each one to see how it works. We won't go into detail on every bit of code here. It's time to get going yourself and try these things out. Crank up NoteTab and let it whirl! I suggest you set up one web page from start to finish then spend some time changing alignment, typeface, size, etc. Using NoteTab it's simple to make changes and then click the "View as Web Page" Icon to see what you're doing in your browser.

A character map is a chart of all the characters that make up a font, or typeface. Here are three character maps that you can print out if you wish. They should fit nicely on one 8x10 sheet of paper. I would suggest that you also copy the source code to your PC and keep them available for quick viewing in NoteTab. The Serif and Sans Serif are pretty much the same, but the characters will look different in each, so I included both. The WingDings is a hoot! Have Fun! Arial Character Map, Times New Roman Character Map and WingDings Character Map.

It's time for quiz five.