Sami's Site: CSB - Trellix Support and Tests
previous    next
Test Index   ·   CSB4 Rollover Links   ·   Link Styles 1   ·   Link Styles 2   ·   Link Styles 3   ·   iFrame Tutorial - IFrames described in detail!   ·   Form sample in iFrame   ·   Arrowhead   ·   Excel   ·   Color Blind   ·   Websafe Fonts and tests   ·   Make an Alert Box   ·   Webgem Placeholder Images   ·   LINK HOVER TOOLTIP   ·   OverLIB tooltip   ·   Disguise Email   ·   Quote of the Month   ·   Map to your location!   ·   Link Border Test   ·    FORUM

Websafe Fonts and tests

Bonus:  Blinking Text - Script here.

Browsers have limitations on the fonts and sizes that can be displayed.

All browsers can display Web safe fonts: Arial, Georgia, Tahoma, Times New Roman, Verdana.   
Note:  others are fairly well accepted, but not installed on all machines: Helvetica and Times.  The Windows font description lists other fonts that are on the majority of NEWER computers but so many people are still using older Pentium class  I and  II machines which did not have the newer fonts!

Use these font sizes as they translate best!
CSB Font size
HTML code <FONT Size =    >
7
1
9
2
10
3
12
4
16
5
20
6
30
7
Note: The chart above is based on Internet Explorer 5.0
Internet Explorer and Netscape show fonts slightly differently.
PC's and Mac's also have differences.


If you use non-websafe fonts, they may or may not show as intended.  Fonts are installed on the computer, not stored in the browser, or embedded in your webpage.  For example, if you use a font called SCRIPT, only people with SCRIPT installed on their computer will see the text the way you intend it!   
Consider an IMAGE with the font you want to show like on the right  
(a banner with the same background color blends in or a transparent
gif or png file so the results look like it was just typed on the page!)

These tests below are standard sizes in Websafe fonts.
Some are clearer in small fonts than others
Some small fonts do not bold at all!   (Don't use Arial for small font bolding.)
Some fonts are the same size even though a particular size was chosen.  Arial 14 and 16 show up the same size on the published site, even though in the design window they are different sizes.   As noted above, stay to certain sizes and you won't be disappointed.

These are known limitations of the BROWSERS, not the program that generated the HTML code!

These are NOT BOLDED
These have been BOLDED
Arial 6
Arial 6
Arial 7
Arial 7
Arial 8
Arial 8
Arial 9
Arial 9
Arial 10
Arial 10
Arial 11
Arial 11
Arial 12
Arial 12
Arial 14
Arial 14
Arial 16
Arial 16
Arial 18
Arial 18
Arial 20
Arial 20
Arial 22
Arial 22
Arial 24
Arial 24
Arial 36
Arial 36

Georgia 6
Georgia 6
Georgia 7
Georgia 7
Georgia 8
Georgia 8
Georgia 9
Georgia 9
Georgia 10
Georgia 10
Georgia 11
Georgia 11
Georgia 12
Georgia 12
Georgia 14
Georgia 14
Georgia 16
Georgia 16
Georgia 18
Georgia 18
Georgia 20
Georgia 20
Georgia 22
Georgia 22
Georgia 24
Georgia 24
Georgia 36
Georgia 36

Tahoma 6
Tahoma 6
Tahoma 7
Tahoma 7
Tahoma 8
Tahoma 8
Tahoma 9
Tahoma 9
Tahoma 10
Tahoma 10
Tahoma 11
Tahoma 11
Tahoma 12
Tahoma 12
Tahoma 14
Tahoma 14
Tahoma 16
Tahoma 16
Tahoma 18
Tahoma 18
Tahoma 20
Tahoma 20
Tahoma 22
Tahoma 22
Tahoma 24
Tahoma 24
Tahoma 36
Tahoma 36

Times New Roman 6
Times New Roman 6
Times New Roman 7
Times New Roman 7
Times New Roman 8
Times New Roman 8
Times New Roman 9
Times New Roman 9
Times New Roman 10
Times New Roman 10
Times New Roman 11
Times New Roman 11
Times New Roman 12
Times New Roman 12
Times New Roman 14
Times New Roman 14
Times New Roman 16
Times New Roman 16
Times New Roman 18
Times New Roman 18
Times New Roman 20
Times New Roman 20
Times New Roman 22
Times New Roman 22
Times New Roman 24
Times New Roman 24
Times New Roman 36
Times New Roman 36

Verdana 6
Verdana 6
Verdana 7
Verdana 7
Verdana 8
Verdana 8
Verdana 9
Verdana 9
Verdana 10
Verdana 10
Verdana 11
Verdana 11
Verdana 12
Verdana 12
Verdana 14
Verdana 14
Verdana 16
Verdana 16
Verdana 18
Verdana 18
Verdana 20
Verdana 20
Verdana 22
Verdana 22
Verdana 24
Verdana 24
Verdana 36
Verdana 36
 
Combine fonts and sizes
This font is Verdana 14 while this is Verdana 10 and this is Verdana 6
Why would you do that?  You may want to put a special character in a different size.
Example:  Read more in 10, >> in 6:    Read more >>

Check out another resource for fonts explanation/samples:  Lou's site


 
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix Webgem)
Select All
The blinking statement is in the code twice (once for IE and once for Netscape).  
Change both statements prior to publishing.  You can change the color for the blinking statement, speed of the blink for IE and how far from the left the text appears.
Change the size of the font within CSB as done with normal text.

This example has an apostrophe in it.   Thanks to Richard for suggesting a work around!
 I used ALT 0146  to make one instead of ' on the keyboard.  In HTML language, it is an acute accent í written out with &#180; in script. Technically it is not an apostrophe, but it definitely works!