14

After being a Windows user for the last 10 years, I got a MacBook Pro, which I'm working on configuring to my liking.

I find small-size anti-aliased text to be blurry and hard to read, so I typically disable it. I've found the settings in the General Control Panel, and used TinkerTool to increase the anti-alias threshold size to 18pt. Mac OS X and other applications appear to respect these settings.

A problem appears when I use Firefox. By default, it's configured to ignore the Mac OS anti-alias settings. This is changed by going to about:config, and setting gfx.use_text_smoothing_setting = true (default is false). However, even with this setting, it appears Firefox is still rendering the fonts under the assumption that they will be anti-aliased, which results in very odd and uneven spacing, as you can see in this example (pay attention to the placement of the "s" in "Disable"):

With anti-aliasing:

enter image description here

Without anti-aliasing:

Without anti-aliasing

How can I configure Firefox to both not use anti-aliasing and to use correct font spacing?

I'm using Mac OS X Lion and Firefox 5.

5
  • I think it's important to note that Windows does, in fact, anti-alias text. It just uses a far different mechanism from OS X. Aug 14, 2011 at 6:12
  • @jcrawfordor I know that, and I know about the different approaches their respective algorithms take. I disable anti-aliasing on Windows too, it just doesn't look horrible in Windows Firefox like it does in Mac OS X Firefox.
    – Kaypro II
    Aug 16, 2011 at 20:58
  • I'd like to know this too! Three years later and it still looks bad. But I will NEVER give up crisp fonts.
    – Wyatt Ward
    Sep 17, 2014 at 2:11
  • 2
    This topic was relevant when asked. but isn't really relevant today as newer versions of Firefox have addressed this problem.
    – AMR
    Jul 23, 2015 at 2:43
  • Perhaps change the fonts being used? the "thin" looking font is always going look worse because there's less to anti-alias.
    – Mr R
    Mar 19, 2021 at 4:39

3 Answers 3

1

My system is ancient, but go to System Preferences -> Appearance-> Turn off text smoothing for font sizes [choose from the pop-up menu down at the bottom] and smaller... works for me.

0

Might be an update-bound issue and just wait for it to get fixed. OR try this: Go to Edit -> Preferences -> Advanced panel -> General tab -> Set the checkmark at "Use Hardware Acceleration when available" if it isn't checked already.

0

I later asked a similar question about font smoothing on Windows 7, which I ended up answering myself, since I've learned a lot more about this problem.

I'm reposting that answer here, since it's probably just as relevant to Mac OS X as it it to Windows:


So, I should probably post the answer I've learned since originally asking my question.

tl;dr: it's expensive to create fonts that render well at screen resolutions without font smoothing, so most makers of web fonts don't even try. There's no way to make a badly hinted font look acceptable without font smoothing.

The core problem is that it appears that creating a font that looks nice on a screen is expensive. The shapes of the letters are stored as mathematically-defined curves that can be scaled to any resolution, but at low resolutions those curves don't nicely fall on the right pixels, so they require something called font hinting to display crisply. Font hinting can be done manually, by hand, or automatically, by a computer program such as ttfautohint.

The best results are from manually hinted fonts. Microsoft spent a lot of money to manually hint the fonts that are traditionally included with Windows, so they display very nicely even without ClearType/Font Smoothing.

Automatically hinted fonts are greatly inferior. Most of them require some kind of ClearType/Font Smoothing to have an acceptable display result at low resolution, because their raw form looks like the crap in the screenshot I included in my original question, with double-thick lines and the like.

That used to not be a very big issue, because most web pages were designed to use fonts that were already present on the user's computer, and those were usually high-quality. Then web fonts were invented, which let every website designer ignore the user's high-quality local fonts and instead use some lower-quality font they liked the look of. This also encouraged the use of custom fonts for things like UI icons and logos.

So, if you hate ClearType/Font Smoothing and have a standard-resolution display, you're SOL unless you try to wrest control of font choice from the web pages you're viewing. That's going to be a difficult and long battle, since text usually renders perfectly fine with local fonts, but you still need the web fonts for icons. You probably don't want to use the browser flags to completely disable webfonts. Here are a couple tools that will help.

Chrome: Font Blocker. This tool will allow to right click on some text and block the custom font used. It will work on many webpages, but increasingly has problems with Google's properties.

Firefox: Font blocker foxified. This tool appears to be the same Chrome extension above, but packaged for Firefox. It works the same way.

I do wish someone would create something like an ad-blocker for web fonts, that would use a community managed list of font substitutions and page fixes to make the web easily browsable without non-icon web fonts.

Eventually, the move to higher display pixel density will render this problem moot.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .