How to design a websites using thin fonts that will look good in a web browser?

Question

I recently quite repetitively encounter the same problem - the fonts in photoshop don't look even close to the fonts embedded onto the websites.

Obviously - it's mostly about external, 3rd party fonts, because for Helvetica, Arial, etc. I get quite good results. Most troublesome are thin and tall fonts, although this issue occurs also with regular fonts if used in sizes lower than 16px (no idea why so often there's a magical border at 16px since when stuff starts to look great everywhere).

Here we've got an example of SkarpaLT font at 14px #000000 - on a left you can see it embedded using @font-face onto a website as it is rendered in Firefox on Windows 7. On a right you can see the exact same font in exact same color and size as it appears in photoshop using different anti-alias settings:

As you see - the difference is quite gigantic. In Firefox:

• Whole font is by far thicker, seems like in photoshop it's light version, while in firefox it's regular
• Anti-aliasing is very weird, on some letters (eg. O) it almost doesn't exist, on other it's fine
• A is oddly short comparing to the other letters
• O isn't round

As you can see - I tried messing with photoshop settings, but so far I never managed to pull out the results that are close to the Firefox. I also made few attempts with changing text in Firefox to make it look closer to what the Photoshop renders, but I got nowhere.

Therefore two-part question:

• Is there any way designer can predict when font won't behave nicely in web browser, even if it looks fine in FireFox?
• How to either render fonts in photoshop in a way that's closer to a web browser, or force web browser to render fonts in a way that's closer to the photoshop?

Or a long story short: How to design a websites using unconventional, thin fonts that will look good in a web browser?

---

[edit:] Solution highlight: Seems like the only good solution is font dragr which allows testing of the fonts in a web browser to actually see if they don't produce any weird artefacts. Nothing much other than that can be done.

On a side of the designs this action can be used to create subpixel anti-aliasing in Photoshop. It'll make fonts sharper and similar to what you get in a browser. Only issue is that it creates 3 text layers, so it needs to be applied after all of the text editing is done.

Answer 1

This connects to my question from a few weeks back. I feel there is still not a great answer for "How do I determine when a webfont can cut it vs when to use graphic type?" I outlined how I make that determination, though it's still fuzzy.

The bottom line is, you need to test webfonts in multiple browsers on multiple systems as early in the design process as possible. This is going to help you determine not only what weights will work but fundamentals like your base font size (and leading). Photoshop will never give you a useful indication of how fonts will render in the browser at any size, especially text sizes.

For thin typefaces, you have to consider the actual pixel dimension of the font's thinnest strokes at a given size. You also have to consider how that font was built. If decent hinting isn't included below a certain size, the pixels that fall into the outline are going to be unpredictable. There can even be wild variation between two very close sizes. Photoshop will do a lovely job with the guess work across the board; Internet Explorer will not.

Answer 2

There's several issues here.

1. SkarpaLT appears to be designed as a display face. Most thin letterforms are designed for that...posters, headlines, etc.--basically where you'd use them large. They aren't designed to be used as small text faces.

2. Most screens are still rather low-resolution. The smaller the type, the harder it is to render it cleanly on a pixel-based display.

3. Web font embedding works, but you're still at the mercy of the browser and operating system to render it. In many situations, there may be no anti-aliasing or spacing metrics might not be there. Both contribute to ugly type at small sizes.

So to answer your question about 'how to': don't. Don't embed thin typefaces on web pages and use them as text faces. It's just not going to work very well.

For your specific questions:

Is there any way designer can predict when font won't behave nicely in web browser, even if it looks fine in FireFox?

No. You're at the mercy of settings and software out of your control (it's in the end-user's control).

How to either render fonts in photoshop in a way that's closer to a web browser, or force web browser to render fonts in a way that's closer to the photoshop?

You can't. They use entirely different methods of rasterizing the type.

Answer 3

If you are flexible in choosing the font you may want to try Google Web Fonts; I used them in a few websites without a problem. Some fonts are offered in different thicknesses, you can easily adjust it with one extra word in the code.