-2

I'm a web developer by trade and struggle with colour theories and graphic design. I also develop on an iMac, hence beautiful browsing/visual experience ensues, however when I view on Windows machines the sites I've developed the first thing I notice is the crummy fonts; Jagged, misshapen and generally bad looking.

What should I consider when displaying fonts in Windows when no anti-aliasing is being used?

In this particular web application I developed I opted to improve the display with colours, so chose #474747 for text and #2b2b2b as the background colour with Droid Sans Google Loaded Font, however there is more to font display than just colourschemes, so is there anything else I should take into account to improve how readable / pleasent the display of non anti-aliased fonts?

Improve this question
  • 1
    I think it would have been better to have asked what would have improved the display of your fonts in Windows when no anti-aliasing is being used. You're assuming that the best way to improve the effect of non-anti-aliased text is to choose an appropriate colour scheme, but this isn't necessarily true. – codeinthehole Jan 9 '12 at 2:29
3

Font and size play a big part of how a font looks when a user is browsing with ClearType turned off. Windows XP introduced the feature, but defaulted to it being turned off. In the more modern versions of the OS (i.e. Vista and 7), ClearType is turned on by default and provides the look you are used to.

In order to provide a usable experience of OS users who don't have anti-aliasing (which includes older Linux distros as well), you'll want to have good geometric glyphs like you would with Helvetica or something similar. You also want to make sure the fonts have enough breathing room, so you might have to include a little horizontal expansion and line height adjustments). That at least keeps things legible. It will even help users that are browsing with anti-aliased fonts.

Improve this answer
  • It's more than just the font family that matters (different versions of Helvetica will differ in meaningful ways, especially at small sizes on screen). Probably the single most important factor in font legibility on screen (especially without anti-aliasing) is font hinting; the art of aligning character edges with the pixel grid (or more correctly, any rasterised grid). That's why Matthew Carter's MS fonts (Verdana, Georgia and Tahoma) are such terrific fonts for screen use (especially with antialiasing off). – Kit Grose Sep 17 '12 at 1:26
4

Update 7/26/12 : font-smooth:always was a Mozilla-only property that has been depreciated. I've started maintaining a Coderwall entry about web typography tips that might alleviate some of these pain points.

I've been dealing with this issue a lot lately because I'm incredibly picky with colors and type, and there are a variety of things you can try. They have different effects cross-browser and cross-OS, so I highly recommend conditioning these to only apply to IEs and Windows machines once you've fleshed out how it renders in OS X. Here are some techniques I've gathered:

CSS3: font-smooth:always; & -webkit-font-smoothing: antialiased;

CSS2+: Some browsers look good if you just apply a text-shadow. What settings to use varies, with some people liking something like text-shadow: rgba(0, 0, 0, 0.0078125) 0px 0px 1px; (as suggested in this StackOverflow) and others a simple text-shadow: #fff 0 0 1px; (this only really works well in Chrome). There is also this technique (text-shadow: 0 0 1px rgba(0,0,0,0.3); where the RGB matches your color), which is incredibly subtle but enough of a difference that it worths.

I've had both success and failure with these methods across different typefaces and implementations (from Google-hosted fonts to your default sans-serifs), so test every tweak in every browser for each typeface and size you're using it at.

Something else I had an issue with (due partly to my OCD) is the strain this put on my eyes and the bias I have towards thin text. Have friends or colleagues look at it during different stages -- not too often but more than once or twice. Keep /*comments*/ in your CSS so that you know what worked best where and what each of your testers thought along the way.

Above all else: work with subtleties! Don't feel like tweaking that .02 to .022 isn't going to make a noticeable difference because for this, it probably will.

Your users will love you for it.

Edit: Berin points out issues you might have with letter-spacing after testing some of these out, so use Lettering.js in conjunction with Kern.js to kern and otherwise make minor tweaks to headlines.

Improve this answer
  • Consider Please Stop "Fixing" Font Smoothing for a well-written counterpoint to most of what you're saying here (by the guy who designed UX.SE's theme!) – Rahul Dec 12 '12 at 0:30
  • @Rahul I'm 'Mandy' in the comments :). The link I posted there does a better job detailing everything, but at the end of the day the right solution is more situational than best practice. The typeface, the size, the colors and whether it triggers hardware acceleration or not all affect readability, so it really just depends on cross-browser testing. I'm also not sure how he countered the rest of what I said, since the entire article was about subpixel- vs. antialiased. – mnicole Dec 19 '12 at 8:02
1

Some people comment about black backgrounds and the way fonts intergrate for the overall look. I have recently developed a site based on a black background in flash but as long as you get the correct fonts to compliment the overall design then the whole site will look professional.

I have also added a feedback tab with javascript to ensure that I always get constant feedback from the users. This allows you to amend errors and locate areas of the design that users do not like even if you were happy with it during the design stage. As they say the user is always correct if supported by others.

Improve this answer
  • Why will using correct fonts make the whole site "look professional"? Who says "the user is always correct if supported by others"? – Rahul Jan 9 '12 at 1:06
  • How does this answer the question about how to "pick a text colour / background colour combo which will help with the anti aliasing"? – Roger Attrill Jan 9 '12 at 10:25
  • 1
    Flash doesn't render type anything like browsers natively do. – mnicole Jan 11 '12 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.