Websafe Fonts and tests
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)
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!
|