Fonts
 

Home ] Up ] UBB ] Hyperlinks ] [ Fonts ] What is HTML? ] Pick a Nick ] Cookies ]

About Fonts

Fonts have different attributes

... color, size, and face (the name of the font itself) ... are the ones you'll deal with most on the forums. You'll also want to know more about using one font face in particular, Wingdings.

Color

<font color="pickalegalcolor">gobbledygook</font>

would get you the word "gobbledygook" in whatever you color you substituted for "pickalegalcolor". The links to legal colors are listed below ..

examples ....

<font color="blue">gobbledygook</font>
<font color="red">gobbledygook</font>
<font color="green">gobbledygook</font>

Back to top


Size

Changing font size can be handled several ways ... oh and a note:  Macintosh computers display text one size SMALLER than PC's .. so don't try to get too small ...

Logical formatting

you can use the "big" tag ....

Standard size text.
<big>Will make text a little bigger</big>
<big><big>Will make text a little bigger than that</big></big>
<big><big><big>Will make text even bigger</big></big></big>

you can use the "font size=+?" tag

Standard size text.
<font size="+1">Will make text a little bigger</font>
<font size="+2">Will make text a little bigger than that</font>
<font size="+3">Will make text even bigger</font>

<font size="-1">Will make text a little smaller</font>
<font size="-2">Will make text a little smaller than that</font>

Physical formatting

You can use absolute sizes ... i.e. tell the receiving computer exactly what point size something should be .... (vs. the two preceding examples which take the default size the user has on their computer and make changes from there) You can have problems here - you have no idea what kind of browser, the resolution or size of the monitor your user has ... so you can make stuff too big or little pretty fast ... and they can't adjust it ..

Standard size text.
<font size="1">Usually 8pt text</font>
<font size="2">Usually 10pt text</font>
<font size="3">Usually 12pt text</font>
<font size="4">Usually 14pt text</font>
<font size="5">Usually 18pt text</font>
<font size="6">Usually 24pt text</font>
<font size="7">Usually 36pt text</font>

Back to top


Face

To change the typeface (font itself)<font face="pickalegalfontname">gobbledygook</font>

would get you the word "gobbledygook" in whatever font you substituted for "pickalegalfontname".

Safest fonts to try ...Overview of the core font faces usable in web pages.

Macs and PCs tend to have similar fonts with different names.

Examples:

Sans Serif Fonts
<Font face="Arial">Arial</font>
<Font face="Verdana">Verdana</font>
<Font face="Comic Sans MS">Comic Sans</font>

Serif Fonts
<Font face="Times New Roman">Times New Roman</font>
<Font face="Courier">Courier</font>
<Font face="Georgia">Georgia</font>

What happens when you use an uncommon font? It depends on whether the viewer has that font installed on their computer. And some fonts just don't translate well to the web.

Less common fonts:

<Font face="All Hearts">All Hearts</font>
<Font face="BlackChancery">BlackChancery</font>
<Font face="CandyBits BT">CandyBits</font>
<Font face="Curlz MT">Curlz MT</font>
<Font face="Ozzie Black">Ozzie Black</font>
<Font face="Vivaldi">Vivaldi</font>

Back to top


Wingdings Fun

So say you want to put symbols up on a forum, for emphasis maybe ...

Use Wingdings, and most everyone will be able to see them.

<p><font face="wingdings" size="+5" color="red">M</font></size></p>

will give you

M

The trickiest part is figuring out what key on your keyboard will give you what Wingding.

You can go to Word (or any word processor that lets you change fonts - not notepad)

and type all the letters on your keyboard like

~ ! @ # $ % ^ & * ( ) _ + |  

Q W E R T Y U I O P { }

etc. Don't forget the lowercase letters too.  (I put spaces in between for legibility) Then copy and paste them row by row

~ ! @ # $ % ^ & * ( ) _ + |  

~ ! @ # $ % ^ & * ( ) _ + | 

Q W E R T Y U I O P { }

Q W E R T Y U I O P { }

 

then, highlight the 2nd set of identical letters and change the font to Wingdings

 

~ ! @ # $ % ^ & * ( ) _ + |  

~ ! @ # $ % ^ & * ( ) _ + | 

Q W E R T Y U I O P { }

Q W E R T Y U I O P { }

I also made them red for legibility.

Or, you can do what I do. (in Windows 9x) Go to Start, Programs, Accessories, Character Map. Scroll down to Wingdings, and if you click on a symbol, it tells you what key combo will reproduce it.

Unfortunately, most people don't have Character Map installed, but it's on your Windows CD and can be added via the Start, Settings, Control Panel, Add/Remove Programs. Go to the second tab, Windows setup, and if you click on Accessories, you should see Character Map listed.

 

Back to top

 

Email Me

last updated: March 12, 2009
Shoshana 1999-2009