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

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:

example breakdown - Firefox vs Photoshop

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

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.

Attribution
Source : Link , Question Author : MarcinWolny , Answer Author : Community

Leave a Comment