Forum Moderators: not2easy
I'm having problems with using Tahoma on my website as it seems to very slightly break up on some browsers/machines when it goes beyond 10pt size.
I thought it might be that Tahoma is not a common font, but it seems to be on the machines i've tried it on.
The only thing i can think of is that i'm scaling the fonts up in Front Page, and selecting specific font sizes, as opposed to CSS text styles.
Is that my problem?
thanks
Bugs
font-family: Tahoma, Geneva, sans-serif;
To note, however, that 'pt' (points) are generally the units to use for printed media. 'px' or 'em' are better for screen. Although this is not necessarily your problem.
Selecting specific font sizes (px/pt) shouldn't be a problem either. Although in IE, these will not resize if the user should select 'larger fonts' in their browser, so is an accessibility issue. You need to use relative sizes to benefit IE users, like em's or %'s.
The only thing i can think of is that i'm scaling the fonts up in Front Page, and selecting specific font sizes, as opposed to CSS text styles.
Not sure what you mean by that. Can you post the resulting CSS font rules...? Assuming all the font information is in the CSS, and not in HTML <font> elements?!
Which browsers/machines does it 'break' on?
It sounds as though it might be a local issue. Possibly Microsoft ClearType settings?
When i say: "The only thing i can think of is that i'm scaling the fonts up in Front Page, and selecting specific font sizes, as opposed to CSS text styles"
I mean: "when i create my page in Front Page, i am changing the size of the text by using the pull-down 'font size' numbers (eg 10pt, 12pt) instead of 'text 1', 'text 2' from the CSS"
Does that make it any clearer? Still learning the terminology
I mean: "when i create my page in Front Page, i am changing the size of the text by using the pull-down 'font size' numbers (eg 10pt, 12pt) instead of 'text 1', 'text 2' from the CSS"
Ok, I think I see what you're saying (although I've only really used Front Page as a plain ol' text editor) you're setting an absolute font size, rather than a relative one, perhaps? I don't think that is your problem however.
In what way does it 'break up slightly'? Does it appear more 'blocky'?
Like pageoneresults says, it could be to do with the ClearType settings on the particular machine...? On Windows... Control Panel > Display > Appearence > Effects - "Use the following method to smooth edges of screen fonts".
thanks for your help again
Bugs
Any idea how many people have this set to "standard" vs "cleartype"? Am i fooling myself if i just change my settings to cleartype and assume everyone else can see it the same way?
HHhhmmm, I'm not sure what the majority would have set? I don't think you can rely on a setting on the client machine one way or the other?! I would have said you have to assume that it is not set. It is a user preference.
On my WinXP machine at home it is set to "Standard". On this machine I'm sat at now (Windows Server 2003), NO smoothing option is selected.
So the good news is that i know why my site looks better on some machines than others. However, i now need to work out how i can make the larger text on my site as smooth as i see text on other sites.
For example
when i look at <snip> i see lots of smooth aliased text (especially the green text half way down the page which is quite large).
when i look at my work in progress site <snip> i see my type breaking up horribly (especially the black header text which is Arial Black).
Hope you've still got the energy to help, Penders...
Bugs
[edited by: trillianjedi at 5:34 pm (utc) on May 14, 2007]
[edit reason] TOS as per below, thanks. [/edit]
In your case, you are using a font that is subject to the issues you are seeing; Arial Black. It's not a Tahoma issue.
Arial Black is not the best choice for smaller headlines. It is a very thick and tightly spaced font that will cause the issues you mention at smaller sizes.
anway. i had the original problem with tahoma a couple of days ago so i started trying different fonts. i'm not convinced it's a tahoma or an arial black problem. i think it's something else i'm doing wrong.
i think it's something else i'm doing wrong.
Not really. It sounds more like a culmination of issues.
1. ClearType Settings
2. Tahoma vs. Arial Black
3. Resolution Settings
The above are just three of the more common ones. Tahoma is a great looking font at most sizes, so I don't think your issue is there.
Arial Black is not the best choice for a bold headline at smaller sizes. In fact, I'd reserve Arial Black for "REALLY BIG" stuff.
You would fair better at using a bit of CSS to achieve what you want to do. I'd get rid of the inline styling, use of <font> etc. The <font> element was deprecated long ago. And yes, many still use it. :(
The other thing to keep in mind is that you have no control over the users personal computer settings. What you are seeing on your computer may not be the same as what someone else is seeing on their computer due to their personal preferences.
- A lesson in web fonts.
As you predicted, the cleartype settings seem to be the problem. Any idea how many people have this set to "standard" vs "cleartype"? Am i fooling myself if i just change my settings to cleartype and assume everyone else can see it the same way?
In Windows XP, font smoothing is turned off by default. That means most users will have it off, which is a shame because anti-aliasing aids readability (it makes fonts thicker.)
This ensures that without those settings, things should be ledgable. Not only that, but only Windows XP has those features. Many people use Windows 98, MAC OS, or some dist. of Linux, and not only may not have the font tahoma at all (it's not a web safe font), but they almost certainly would not have both of those settings for text display.
Actually, OS X has anti-aliased fonts turned on by default :) The problem is XP having ClearType turned off by default.
About Tahoma not being a websafe font, it is quite widespread, but obviously the safest option is to have failsafe fonts:
body { font-family: Tahoma, Geneva, 'Trebuchet MS', Arial, Helvetica, sans-serif; }... to account for essentially any situation (if Tahoma isn't installed, Geneva gets picked, if not that, Trebuchet MS next, etcetera etcetera until the last resort: any sans-serif font installed on the user's system.)
P.S. Legible :)
