Jaggy Firefox text

Hi,

As I'm sure you have all encountered Firefox displays text below 10px very jaggy. Does anyone know a way around this?

This site... http://www.backtoheritage.com/ displays small text perfectly in Firefox, but if you look at my website... http://www.workbygee.co.uk/news.html you will see the jaggy issue that I am refering to.

Any help as to how this can be solved would be greatly appreciated.

Many thanks for your time.

Gee

Besides the contrast (the gray color can have a "softening" effect), the typefaces on both sites look the same on my WinXP/ClearType/Firefox setup. I would argue that the font size on both sites is ludicrously small and illegible for anyone who doesn't have the sharp eyes of youth, but that is a matter of personal preference. Font legibility is still the number one problem in web design.

-- si-blog --

Thanks for the comments, I am looking at the sites via MacOSX and Firefox, so perhaps it is a Mac specific problem.

Any suggestions, anyone else?

Cheers, gee

When looking at the black-on-white text on your site, it looks fine with Cleartype edge smoothing turned on, but is a little jaggy looking with Cleartype turned off. Inspecting the pixels, the display is identical to that from the first web page you gave us. The gray does immensely reduce the appearance of jaggies with Cleartype turned off.

This is on Windows with Firefox 2.0.0.11.

It might help if you post a screenshot. Make sure to use png or some format that will be pixel-perfect.

Use promo code 50DISK50 for 50% extra disk and $50 off
More Dreamhost coupons

Hi Lensman, Thanks for having a look.

Here is a screenshot http://www.workbygee.co.uk/images/screenshot.png You should be able to see the difference clearly.

Both replies here have mentioned cleartype which I believe is a XP/Vista only component, as far as I am aware it doesn't exist on MacOS. I'm glad to hear that it looks ok on XP and Vista, but would love to get it looking right on MacOS.

Any Mac users out there?

Many thanks,
Gee

ClearType is just the term Microsoft uses for subpixel rendering, a technology Apple computers have had for a long time. Your problem is more likely to be related to the type of font you are using, the settings of your operating system and browser, and the contrast of the font you are displaying. You should definitely be using a larger font size in any case.

-- si-blog --

Oh ok, I see. Thanks very much, I shall look into it.

"You should definitely be using a larger font size in any case."
I'm just a sucker for small type :)

Thank you both for your help
Gee

There seem to be a couple of things happening in the rendering you posted. Compared to what I'm seeing, your text is clearly being mapped to a different font/size than on my Firefox/Windows setup. It is approximately the same width but is taller. I suspect it's scaled rather than native.

It's pretty clear to me that Quartz (which I think is Apple's sub-pixel rendering technology) is operating on the "other" website but not on yours - at least under Firefox.

Do you have the same problem in other browsers?

Use promo code 50DISK50 for 50% extra disk and $50 off
More Dreamhost coupons

In reply to:

---

There seem to be a couple of things happening in the rendering you posted. Compared to what I'm seeing, your text is clearly being mapped to a different font/size than on my Firefox/Windows setup. It is approximately the same width but is taller. I suspect it's scaled rather than native.

---

Oh you are so close!

Did anyone think to check the source?!?!

The OP site is suggesting that the browser use Helvetica and the Back to Heritage site is suggesting it use Arial.

Helvetica is native to Mac - decades ago before font-aliasing went mainstream. A version is not included with Windows.

Web designers and developers should know the browser would attempt to use two different font files. Font files that will have different data (typeface, hinting, aliasing, etc) and possibly even different technology (eg, bitmap vs vector).

So its quite obvious on the Mac that the Helvetica font does not have the same aliasing or hinting data that Arial does and that since Windows doesn't come with Helvetica, the ignorant Windows users among us will wonder why the sites look the same.


openvein.org -//-

Atropos7...
You have hit the nail on the head, thank you so much.
I specified "font-family:Helvetica, Arial, sans-serif;" in the CSS as I prefer Helvetica when working in print, but actually when it comes down to it there is such minimal difference between Helvetica and Arial at 10px on a screen there is no point, so have now changed it and it looks A ok.

Thank you all very much for all your comments,

gee

Gee:

Nice site, but as others have suggested, I really would consider increasing the font size.

If you're unmovable on increasing the font size, please at the very least change your font size methods. I tried to increase the text size in IE, but as you've set a fixed 10px on your text, I cannot resize - the only way is to "zoom" the page, which is not good.

My ex's mother had poor eyesight and she constantly has her browser set to "largest" so she can read - and most websites will scale to this.

I generally use an "em" size. "em" is a size based on the parent element, so you do need to be careful with it. It does make life much easier for the user though - you design for "normal" browser text settings, and the user sees the same effect on their "larger" setting.

Have a read of this article for why you should and shouldn't use em.

I'm sure many people here would argue against em, and someone will have arguments for and against every font-size setting... except px :p

One final thing - the headings you're using. If it's essential you use that font, you could try something called sIFR to make html headings in non-standard fonts using flash. It uses a client-side script to replace html elements with flash ones, so search engines still read the standard text, and people on screen readers won't have the problems of image-based headings.

Hope this helps!

Cheers,
Karl

web design, development & seo by DigitalVibe

Hi Karl,
Thanks for the advice and glad you like the site :) I shall have a look into what you have suggested and see what I come up with.
Thanks again,
gee

No probs Gee, let us know how you get on with it - it can be a bit of an arse to get working until you know what you're doing.

The main thing to note is that setting 1.2em in a parent element is NOT the same as 1.2em in one of its children.

Have a play with nested divs and you'll see what I mean.

Cheers,
Karl

web design, development & seo by DigitalVibe