Websafe Fonts and tests

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
 <script language="javascript"> // Location of this script: // http://www.qiksearch.com/javascripts/blinking_text20.htm //********************************************* //* Blinking Text 2.0 * //* Blinks a text * //* v 2.0 works on IE/NS4/NS6 * //* Modified 07 May 2002 * //* (c) Premshree Pillai, * //* http://www.qiksearch.com * //* E-mail : premshree@hotmail.com * //* Use the script freely as long as this * //* message is intact * //********************************************* window.onerror = null; var IE4=document.all&&navigator.userAgent.indexOf("Opera")==-1; var NS4=document.layers; var NS6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1; var blink_speed=2000; // Delay in milliseconds var i=0; var left_pos=70; // The Distance of text from left if (IE4) { layerRef="document.all"; styleSwitch=".style"; } //BLINKING function Blink(layerName) { if (IE4) { if(i%2==0) { eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.visibility="visible"'); } else { eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.visibility="hidden"'); } } if(NS6 && (navigator.appName!="Microsoft Internet Explorer")) { if(i%2==0) { eval('document.getElementById("' + layerName + '").style.display=""'); } else { eval('document.getElementById("' + layerName + '").style.display="none"'); } } if(i<1) { i++; } else { i-- } setTimeout("Blink('"+layerName+"')",blink_speed); } if(IE4||NS6) { if(IE4) { dispIENS="visibility:hidden;"; } else { dispIENS="display:none;"; } document.write('<div id="qiksearch" style="position:absolute; left:' + left_pos + ';' + dispIENS + '"><font face="verdana,arial,helvetica" color="#FF0000"><b>Sam’s Sample: This is Blinking Text made with a simple script!</b></font></div>'); Blink('qiksearch'); } if(NS4) { document.write('<blink><font face="verdana,arial,helvetica" color="#FF0000"><b>Sam’s Sample: This is Blinking Text made with a simple script!</b></font></blink>'); } </script>

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 ´ in script. Technically it is not an apostrophe, but it definitely works!