Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
site map
site map
site map
Your choice of font for displaying text can have a significant impact on how your pages display. The worst part is that your pages may look beautiful on your computer, but not on your visitor's computer.
This page covers:
This page covers:
- Web safe fonts -- preferred fonts for web pages
- Placing CSS code on your page to control fonts
- Semi web-safe fonts and some tricks you can use
- Changing the font globally
- CSS include file -- how to setup a separate CSS file
- The default font -- setting the default font for non-text objects
- Change bulleted list images -- use an image as a bullet
- Special characters -- how to enter them; the Windows Character Map
- Using non pixel fonts -- allow your visitor to adjust font size
Web Safe Fonts
When displaying text, browsers generally rely on the fonts already installed on a computer and use those. If you specify a font on your page that the viewer does not have, their computer will substitute the "nearest equivalent". Sometimes that equivalent is not very near. It may be a different size and have a different line spacing. As a result, the page which may look beautiful on your computer may look nothing like that to your viewer.
It makes sense to use a font that is likely to be installed on most computers. These fonts are much less likely to suffer from unwise substitutions. Hence the name "web-safe" fonts.
Suggested web-safe fonts
(Source: http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml)
Here are some fonts which are generally regarded as web-safe. Stick to these for text and you won't go far wrong. All are shown here in 12 point, but you can use any size available, either straight as shown here, or bold or italic:
These fonts are commonly available on Windows, Apple and Unix systems. They are among the safest to use:
Arial (as on this page)
The quick brown fox jumps over the lazy dog. 0123456789
Times New Roman
The quick brown fox jumps over the lazy dog. 0123456789
Courier New (a mono-spaced font)
The quick brown fox jumps over the lazy dog. 0123456789
These fonts are commonly available on Windows and Apple systems. Only about 50% of Unix systems have them -- so they are a little less safe overall. But because of the low percentage of Unix based browsers out there, they are still very web-safe:
Arial Black
The quick brown fox jumps over the lazy dog. 0123456789
Verdana
The quick brown fox jumps over the lazy dog. 0123456789
Comic Sans MS
The quick brown fox jumps over the lazy dog. 0123456789
Impact
The quick brown fox jumps over the lazy dog. 0123456789
Trebuchet MS
The quick brown fox jumps over the lazy dog. 0123456789
Georgia
The quick brown fox jumps over the lazy dog. 0123456789
Most fonts on the web and printed media are proportional. The letter 'i' takes up less space than the letter 'm'. The theory is that it makes words easier to read -- they flow better.
Contrast with the old-style typewriters, if you remember such things, which used a non-proportional or mono-spaced font. There, narrow letters used up just as much space as wider letters. Like the Courier New example above -- it is perhaps a little harder to read quickly.
When displaying text, browsers generally rely on the fonts already installed on a computer and use those. If you specify a font on your page that the viewer does not have, their computer will substitute the "nearest equivalent". Sometimes that equivalent is not very near. It may be a different size and have a different line spacing. As a result, the page which may look beautiful on your computer may look nothing like that to your viewer.
It makes sense to use a font that is likely to be installed on most computers. These fonts are much less likely to suffer from unwise substitutions. Hence the name "web-safe" fonts.
Suggested web-safe fonts
(Source: http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml)
Here are some fonts which are generally regarded as web-safe. Stick to these for text and you won't go far wrong. All are shown here in 12 point, but you can use any size available, either straight as shown here, or bold or italic:
These fonts are commonly available on Windows, Apple and Unix systems. They are among the safest to use:
Arial (as on this page)
The quick brown fox jumps over the lazy dog. 0123456789
Times New Roman
The quick brown fox jumps over the lazy dog. 0123456789
Courier New (a mono-spaced font)
The quick brown fox jumps over the lazy dog. 0123456789
These fonts are commonly available on Windows and Apple systems. Only about 50% of Unix systems have them -- so they are a little less safe overall. But because of the low percentage of Unix based browsers out there, they are still very web-safe:
Arial Black
The quick brown fox jumps over the lazy dog. 0123456789
Verdana
The quick brown fox jumps over the lazy dog. 0123456789
Comic Sans MS
The quick brown fox jumps over the lazy dog. 0123456789
Impact
The quick brown fox jumps over the lazy dog. 0123456789
Trebuchet MS
The quick brown fox jumps over the lazy dog. 0123456789
Georgia
The quick brown fox jumps over the lazy dog. 0123456789
Most fonts on the web and printed media are proportional. The letter 'i' takes up less space than the letter 'm'. The theory is that it makes words easier to read -- they flow better.
Contrast with the old-style typewriters, if you remember such things, which used a non-proportional or mono-spaced font. There, narrow letters used up just as much space as wider letters. Like the Courier New example above -- it is perhaps a little harder to read quickly.
Title Objects
If instead of text objects, you use title objects, you can use whatever font you like. That creates an image file which does not rely on any particular font being available. The downside of this approach it requires more bandwidth and so takes longer to download. Search engines won't index it either. It is however a possibility for small amounts of text. Like, well, titles
I am always concerned about bandwidth, so have generally used text for titles. However I have used a title object in one place on this site where I wanted some vertical text.
If instead of text objects, you use title objects, you can use whatever font you like. That creates an image file which does not rely on any particular font being available. The downside of this approach it requires more bandwidth and so takes longer to download. Search engines won't index it either. It is however a possibility for small amounts of text. Like, well, titles
I am always concerned about bandwidth, so have generally used text for titles. However I have used a title object in one place on this site where I wanted some vertical text.
Downloadable Fonts
It is possible to provide a downloadable font, which can download to your visitor's computer. Often this will require your visitor's permission, and often they may decline. There may be copyright issues there too.
This is not a technique I can recommend.
It is possible to provide a downloadable font, which can download to your visitor's computer. Often this will require your visitor's permission, and often they may decline. There may be copyright issues there too.
This is not a technique I can recommend.
Placing CSS code on your page
Here is a short overview of CSS. We can change things that effect the visual aspects of a page, just by adding a little bit of CSS code as a code object. You don't need CSS positioning for CSS code, so turn that off as well -- it saves about 200 bytes of code.
Often the advice is to put CSS code in the header of your page -- and you can do this, or add it to the existing header. However I find that changing the header is not very convenient, so a code object, sent to 'the back' is the next best thing. If you find problems with your page visibly changing after it has loaded, (the CSS instructions taking effect) then consider using the header.
If you forget to turn CSS positioning off, or have the code object at the front of the page, it seems to do no harm. (At least that is what I have found so far!)
Here is a short overview of CSS. We can change things that effect the visual aspects of a page, just by adding a little bit of CSS code as a code object. You don't need CSS positioning for CSS code, so turn that off as well -- it saves about 200 bytes of code.
Often the advice is to put CSS code in the header of your page -- and you can do this, or add it to the existing header. However I find that changing the header is not very convenient, so a code object, sent to 'the back' is the next best thing. If you find problems with your page visibly changing after it has loaded, (the CSS instructions taking effect) then consider using the header.
If you forget to turn CSS positioning off, or have the code object at the front of the page, it seems to do no harm. (At least that is what I have found so far!)
Semi web-safe fonts
There are a whole bunch more fonts that I will call semi-web-safe. These are the default fonts that are installed on Windows computers. As something like 80% of your visitors will be running some flavor of Windows (probably Win XP), it is reasonable to use these fonts as well, so long as you have a fall-back web-safe-font your page can use in the event that the Windows font is not available.
The basic idea is to go ahead and use your semi-safe font -- knowing most visitors will see it the way you do. And for those who don't have your font, you specify an alternative using a little CSS code. Like this:
Place this code object on your page. It is simply saying use Tahoma if that is available, failing that use Arial, and failing that, use any sans-serif font. The last is a poor choice, but it is likely to be better than a serif or fantasy font! You can add to the font list as you want.
In use, you would make all your text objects in Tahoma font. And you need do no more than that. However it is a good idea to test with the alternate font(s) too -- how to do that? You could disable Tahoma font, perhaps by uninstalling it. This is a little drastic for my liking, so I suggest use another piece of CSS code, temporary this time.
If you look at the head of your previewed code, you will find a block of CSS code with lines like this, which (guess what?) sets the font size in pixels (px).
.fsx05 {font-size: 16px;}
The CSS code object simply overwrites the code in the header with a new line which also specifies the font family: This will amend the individual font settings in each text object. For this example, even though I may have used Tahoma, I will now get Arial.
.fsx05 {font-family:Arial;font-size:16px;}
If you specify a font like "Times New Roman" which has spaces in the font name, include it in your line like this:
.fsx05 {font-family:"Times New Roman";font-size:16px;}
If your pages are anything like mine, you have not used many those .fsx font classes. In my case, I often use only two fonts -- a large one for page headings and a smaller one for body text. If you have used more than that, you'll need to identify the extra font classes you have used and add those to the temporary CSS code in the same manner.
With the code object in place, preview your project. It should now show in the other font, just as it would for a visitor who did not have your primary font. Inspect it and make any corrections. The most likely problems to watch for are text objects that overlap or spaces that are too big.
Repeat this test for all the fonts you have specified. If you have specified a font for the worst case, like serif or sans-serif, there is no point in testing that -- it will be too variable across computers.
Finally, delete the temporary code object, and your page will revert to its primary font.
There are a whole bunch more fonts that I will call semi-web-safe. These are the default fonts that are installed on Windows computers. As something like 80% of your visitors will be running some flavor of Windows (probably Win XP), it is reasonable to use these fonts as well, so long as you have a fall-back web-safe-font your page can use in the event that the Windows font is not available.
The basic idea is to go ahead and use your semi-safe font -- knowing most visitors will see it the way you do. And for those who don't have your font, you specify an alternative using a little CSS code. Like this:
Place this code object on your page. It is simply saying use Tahoma if that is available, failing that use Arial, and failing that, use any sans-serif font. The last is a poor choice, but it is likely to be better than a serif or fantasy font! You can add to the font list as you want.
In use, you would make all your text objects in Tahoma font. And you need do no more than that. However it is a good idea to test with the alternate font(s) too -- how to do that? You could disable Tahoma font, perhaps by uninstalling it. This is a little drastic for my liking, so I suggest use another piece of CSS code, temporary this time.
If you look at the head of your previewed code, you will find a block of CSS code with lines like this, which (guess what?) sets the font size in pixels (px).
.fsx05 {font-size: 16px;}
The CSS code object simply overwrites the code in the header with a new line which also specifies the font family: This will amend the individual font settings in each text object. For this example, even though I may have used Tahoma, I will now get Arial.
.fsx05 {font-family:Arial;font-size:16px;}
If you specify a font like "Times New Roman" which has spaces in the font name, include it in your line like this:
.fsx05 {font-family:"Times New Roman";font-size:16px;}
If your pages are anything like mine, you have not used many those .fsx font classes. In my case, I often use only two fonts -- a large one for page headings and a smaller one for body text. If you have used more than that, you'll need to identify the extra font classes you have used and add those to the temporary CSS code in the same manner.
With the code object in place, preview your project. It should now show in the other font, just as it would for a visitor who did not have your primary font. Inspect it and make any corrections. The most likely problems to watch for are text objects that overlap or spaces that are too big.
Repeat this test for all the fonts you have specified. If you have specified a font for the worst case, like serif or sans-serif, there is no point in testing that -- it will be too variable across computers.
Finally, delete the temporary code object, and your page will revert to its primary font.
<style type="text/css">
{font-family: Tahoma, Arial, sans-serif;}
</style>
{font-family: Tahoma, Arial, sans-serif;}
</style>
<style type="text/css">
.fsx05 {font-family:Arial;font-size:16px;}
.fsx06 {font-family:Arial;font-size: 19px;}
</style>
.fsx05 {font-family:Arial;font-size:16px;}
.fsx06 {font-family:Arial;font-size: 19px;}
</style>
Changing the font globally
Using a very similar technique, you can change the font for the whole page. E,g; this page is in Arial. If you wanted it all in Tahoma, place this CSS code object somewhere permanently near the back of your page:
Because Tahoma is only semi web-safe, I would also specify some alternate fonts, as discussed in the Semi-safe fonts. There may be other things you want to change, like line spacing. Do this by adding a phrase like this:
.fsx05 {font-family:Tahoma;font-size:16px;line-height:19px;}
Obviously, change the 19px to be whatever height you want.
Using a very similar technique, you can change the font for the whole page. E,g; this page is in Arial. If you wanted it all in Tahoma, place this CSS code object somewhere permanently near the back of your page:
Because Tahoma is only semi web-safe, I would also specify some alternate fonts, as discussed in the Semi-safe fonts. There may be other things you want to change, like line spacing. Do this by adding a phrase like this:
.fsx05 {font-family:Tahoma;font-size:16px;line-height:19px;}
Obviously, change the 19px to be whatever height you want.
<style type="text/css">
.fsx05 {font-family:Tahoma;font-size:16px;}
.fsx06 {font-family:Tahoma;font-size:19px;}
</style>
.fsx05 {font-family:Tahoma;font-size:16px;}
.fsx06 {font-family:Tahoma;font-size:19px;}
</style>
CSS include file
The above technique changes the font for text on the whole page -- what about applying the change to the whole site? You could 'include' the same object on each page -- very reasonable if the code object is small as is the case here. For larger code objects, add this CSS code object:
This is saying, use the styles from a file -- for this example MyStyles.css.
Then put your style commands in that file -- but without the usual script tag. For example,. this is a valid one-line include file (with this text in the file):
For a real CSS include file, the one used for this page -- see Sandpit.css.
The usual advice is to include the <LINK REL> code line as part of the header. You could enter it through the Page Editor as a custom header, or if you already had a custom header, just add the code line to that. I have found it works equally well as a code object, following the rules for a CSS code object, Make it an 'include' if you want to use the same include file with more than one of your pages.
To preview using your styles, make a copy of the include file and place it in your preview folder.
The above technique changes the font for text on the whole page -- what about applying the change to the whole site? You could 'include' the same object on each page -- very reasonable if the code object is small as is the case here. For larger code objects, add this CSS code object:
This is saying, use the styles from a file -- for this example MyStyles.css.
Then put your style commands in that file -- but without the usual script tag. For example,. this is a valid one-line include file (with this text in the file):
For a real CSS include file, the one used for this page -- see Sandpit.css.
The usual advice is to include the <LINK REL> code line as part of the header. You could enter it through the Page Editor as a custom header, or if you already had a custom header, just add the code line to that. I have found it works equally well as a code object, following the rules for a CSS code object, Make it an 'include' if you want to use the same include file with more than one of your pages.
To preview using your styles, make a copy of the include file and place it in your preview folder.
<LINK REL="stylesheet" HREF="MyStyles.css" TYPE="text/css">
.fsx05 {line-height:19px;}
The default font
If you have code writing text to your pages, you might like to specify a font. I have a code object at the bottom of this page showing the date of last change. Without this code, that line would show in the default "Times New Roman" that SiteSpinner sets. This code overrides that and sets the Verdana font instead.
If you have code writing text to your pages, you might like to specify a font. I have a code object at the bottom of this page showing the date of last change. Without this code, that line would show in the default "Times New Roman" that SiteSpinner sets. This code overrides that and sets the Verdana font instead.
<style type="text/css">
.dfltt {font-family:verdana; font-size:10px}
</style>
.dfltt {font-family:verdana; font-size:10px}
</style>
Change bulleted list images
You may have notice that the text bullets on this page are a little different to the usual. A hollow circle instead of a solid one. Here is the code to do that -- treat it as any other CSS code object.
These are all the built-in options for basic bullets -- click the links below to see them all:
As well as these, you can also specify your own image for use as a custom bullet -- like this:
Change the image url to match the source of your image and its name. If the file does not exist as you specify, the bullet type will revert to whatever basic type is set.
You may have notice that the text bullets on this page are a little different to the usual. A hollow circle instead of a solid one. Here is the code to do that -- treat it as any other CSS code object.
These are all the built-in options for basic bullets -- click the links below to see them all:
- circle -- a hollow circle or ring (as shown here originally)
- square -- a small solid black square
- disc -- the default round shape (in Firefox, a diamond)
- none -- no bullet at all; don't know why you'd want this
As well as these, you can also specify your own image for use as a custom bullet -- like this:
Change the image url to match the source of your image and its name. If the file does not exist as you specify, the bullet type will revert to whatever basic type is set.
<style type="text/css">
ul{list-style-type:circle}
</style>
ul{list-style-type:circle}
</style>
<style type="text/css">
ul{list-style-image:url(images/PinkStar.png)}
</style>
ul{list-style-image:url(images/PinkStar.png)}
</style>
Here are some small images suitable for bullets. A few bullet points about them
- to change all the bullets on this page, click an image in the group to the right. (This does not work in Opera)
- they are arranged in order of file size from 64 bytes to 411 bytes.
- the easiest way to get them on to your page is to drag them from this page onto your SiteSpinner workpage.
- copy and paste will work too.
- there are more icons like these at http://www.stylegala.com/features/bulletmadness/
- click the "no image" link to remove the last image and revert the bullets to whatever basic type has been set.
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}
In testing this on Firefox and Netscape, I found a little gremlin which may be peculiar to my system. I sometimes found that some images would only partly display as bullets. Clicking on another image that did show in full, then the dodgy one again, fixed it. If this is a bug in Firefox/Netscape, it seems to affect only the javascript I used for the demo, not the CSS code you should use. It may of course be a bug in my code
Overcome Text Spacing Differences shows a way of controlling the spacing between items in a bulleted list. Below is a CSS code object that sets the spacing for all bullets on a page, specifies a basic bullet type and also sets an image as the bullet. The image will take priority, but bullets will revert to a basic type if the image fails to download. This is just an amalgamation of three individual code objects.
Overcome Text Spacing Differences shows a way of controlling the spacing between items in a bulleted list. Below is a CSS code object that sets the spacing for all bullets on a page, specifies a basic bullet type and also sets an image as the bullet. The image will take priority, but bullets will revert to a basic type if the image fails to download. This is just an amalgamation of three individual code objects.
<style type="text/css">
ul{margin-top:3px; margin-bottom:3px; list-style-type:circle; list-style-image:url(images/PinkStar.png)}
li{margin-top:3px; margin-bottom:0px;}
</style>
ul{margin-top:3px; margin-bottom:3px; list-style-type:circle; list-style-image:url(images/PinkStar.png)}
li{margin-top:3px; margin-bottom:0px;}
</style>
Special Characters -- Windows character map
Most fonts have special characters, symbols and graphics, that you can use in your text objects much the same as normal characters. If you are running Windows XP™, here's a way of getting at them:
Click the start button, then select All Programs. Then drill down to Accessories > System Tools > Character Map.
Everything you might want is there, along with everything that you don't. Just select each special character you want, then copy them all as a group, then paste into to your text object. Don't paste with 'Paste Plain Text' as the goblins may eat them
Here are a few characters from the Arial font you may find useful (just select them and drag onto your workpage)
® © ² ½ ¢ ∆ ™ § € £ ▲ ■ ►▼◄ ◊ ☼ ♠ ♥ ♦ ♫ █
Some of these characters can look very impressive in a large font and with a bit of color added -- and the best part is they are almost like normal text characters. I say "almost" because they do not refresh very well on the workpage -- after you scroll they can show as a bit of a mess, with bits missing.
Most fonts have special characters, symbols and graphics, that you can use in your text objects much the same as normal characters. If you are running Windows XP™, here's a way of getting at them:
Click the start button, then select All Programs. Then drill down to Accessories > System Tools > Character Map.
Everything you might want is there, along with everything that you don't. Just select each special character you want, then copy them all as a group, then paste into to your text object. Don't paste with 'Paste Plain Text' as the goblins may eat them
Here are a few characters from the Arial font you may find useful (just select them and drag onto your workpage)
® © ² ½ ¢ ∆ ™ § € £ ▲ ■ ►▼◄ ◊ ☼ ♠ ♥ ♦ ♫ █
Some of these characters can look very impressive in a large font and with a bit of color added -- and the best part is they are almost like normal text characters. I say "almost" because they do not refresh very well on the workpage -- after you scroll they can show as a bit of a mess, with bits missing.
▲ ■ ►▼◄ ◊ ☼ ♠ ♥ ♦ ♫ █
Take care with the Windows character map because many of the values shown there are in hexadecimal rather than decimal. So you if you plan to refer to these characters by number (more on this below) you may need to convert from hexadecimal to decimal. Google on "hex to decimal converter" -- you will find thousands on the web. Or look the character up from the link below.
The symbols shown above should appear in most fonts, but this is not the case with the Arial graphics characters. In Verdana for example, most of the special graphics are missing. If you use special characters, make sure they are available in your chosen font.
There are also a lot of special characters in the Webdings and Wingdings fonts, which are generally regarded as also web-safe. There are some problems with using these:
The symbols shown above should appear in most fonts, but this is not the case with the Arial graphics characters. In Verdana for example, most of the special graphics are missing. If you use special characters, make sure they are available in your chosen font.
There are also a lot of special characters in the Webdings and Wingdings fonts, which are generally regarded as also web-safe. There are some problems with using these:
- SiteSpinner gets confused between what it displays in the text editor, the workpage and what it publishes
- Opera handles these two fonts very very badly
Look up special characters on the web
Here is an HTML character list from W3Schools that is worth consulting. It has the HTML codes and numbers for many special characters that should be available in most fonts. Again, it does no harm to check that the character really is in the font you are using! Preview carefully.
Here is an HTML character list from W3Schools that is worth consulting. It has the HTML codes and numbers for many special characters that should be available in most fonts. Again, it does no harm to check that the character really is in the font you are using! Preview carefully.
Entering special characters by number
If you use a special character a lot, copy and paste may be a bit tiresome. Another way to do the entry is from your keyboard:
Some of these numbers are in the W3Schools list as "Entity Number" -- use just the number digits. Others you may need to work out from the Windows character map.
Others you can look up in the SiteSpinner HTML code -- copy and paste the character you want into the text editor, then open the Code Inspector window to see what number it has come up with.
If you use a special character a lot, copy and paste may be a bit tiresome. Another way to do the entry is from your keyboard:
- Put Num Lock on
- Press and hold down the alt key
- On the numeric keypad enter 9632
- Release the alt key
Some of these numbers are in the W3Schools list as "Entity Number" -- use just the number digits. Others you may need to work out from the Windows character map.
Others you can look up in the SiteSpinner HTML code -- copy and paste the character you want into the text editor, then open the Code Inspector window to see what number it has come up with.
Entering special characters using the HTML name
If you know the HTML codes for the special characters you can enter them into the text editor like this:
Preview to see the result. The disadvantage of this approach it that it is not visual -- you don't see the finshed character on your workpage. For this reason, I prefer either of the other two methods.
If you know the HTML codes for the special characters you can enter them into the text editor like this:
- click Options on the text editor main menu
- click Options and Filters... on drop-down menu
- uncheck "Convert ampersand &"
- click OK
Preview to see the result. The disadvantage of this approach it that it is not visual -- you don't see the finshed character on your workpage. For this reason, I prefer either of the other two methods.
Using non-pixel fonts
There is a little known option in the Text Editor > Options >Options and Filters > "Use Pixel Size Fonts". This is normally checked, and simply means that any test you type will display in your visitor's browser as fixed height characters. The Arial 12pt font I have used here, will display on my monitor and yours as 16 pixel high characters. The pixel size is fixed.
By contrast, unchecking this box, will allow your visitor to set a font size that is more to their liking. This text object has "Pixel Size Fonts" off.
In IE6, go to the main menu item View Menu > Text Size, and adjust the size of the text. At medium the text is about what I have designed it as. Small is no problem, just the gaps around the text object around get bigger. Larger is a problem, the text will very likely overflow into anything below, as it does here.
There is a similar menu item in Firefox/Netscape -- and the effects are horrendous at the extremes. Opera View Menu > Zoom has a feature that expands or shrinks everything -- I have just discovered that, and it is one of the few things I like about Opera.
Non pixel size fonts may be useful in certain situations -- where you want to display some text in a scrollable box and there is no risk of collisions with objects that are in fixed positions on the page. See Overcome Text Spacing Differences
There is a little known option in the Text Editor > Options >Options and Filters > "Use Pixel Size Fonts". This is normally checked, and simply means that any test you type will display in your visitor's browser as fixed height characters. The Arial 12pt font I have used here, will display on my monitor and yours as 16 pixel high characters. The pixel size is fixed.
By contrast, unchecking this box, will allow your visitor to set a font size that is more to their liking. This text object has "Pixel Size Fonts" off.
In IE6, go to the main menu item View Menu > Text Size, and adjust the size of the text. At medium the text is about what I have designed it as. Small is no problem, just the gaps around the text object around get bigger. Larger is a problem, the text will very likely overflow into anything below, as it does here.
There is a similar menu item in Firefox/Netscape -- and the effects are horrendous at the extremes. Opera View Menu > Zoom has a feature that expands or shrinks everything -- I have just discovered that, and it is one of the few things I like about Opera.
Non pixel size fonts may be useful in certain situations -- where you want to display some text in a scrollable box and there is no risk of collisions with objects that are in fixed positions on the page. See Overcome Text Spacing Differences
General suggestions for fonts and text
When designing a web site, pick a main web-safe font and stick to it. Use larger font (higher point size) or bold font for headings. For this site I have settled on:
On this site, there are code listings -- I generally use the mono-spaced Courier New for those, again 10 point.
Never use underlined text for anything other than links. Visitors equate underlining with links, and if you have underlined text that is not a link, no matter what color, you will confuse them.
Avoid italics. In Arial italics are harder to read and don't look as good on screen. Maybe other fonts have better italics than Arial -- you be the judge.
Avoid heavily patterned backgrounds. Anything that reduces the contrast between the text and the background is bad.
Break these rules if you need to!
When designing a web site, pick a main web-safe font and stick to it. Use larger font (higher point size) or bold font for headings. For this site I have settled on:
- Main Font: Arial 12pt
- Paragraph Headings Arial 12pt Bold
- Main Page Headings: Arial 14pt Bold
On this site, there are code listings -- I generally use the mono-spaced Courier New for those, again 10 point.
Never use underlined text for anything other than links. Visitors equate underlining with links, and if you have underlined text that is not a link, no matter what color, you will confuse them.
Avoid italics. In Arial italics are harder to read and don't look as good on screen. Maybe other fonts have better italics than Arial -- you be the judge.
Avoid heavily patterned backgrounds. Anything that reduces the contrast between the text and the background is bad.
Break these rules if you need to!
Don't use white text on a dark background. Again it is harder to read. Or if you do, make the font size a little larger.