Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
    
Fog Creek Software wrote a nice post about font-based icons they use. It covers @font-face and font displays. It might be helpful for you to read blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you –  tinym Feb 4 '13 at 18:23
    
and... how exactly an information about embedding fonts actually helps? ... No offense, but I know how to embed fonts onto a website. I'm also well aware that you can design pixel-perfect fonts, though this one obviously isn't a case - try to use it at size 14. It breaks. Everywhere. Just like my example. –  MarcinWolny Feb 4 '13 at 18:30
    
Marcin - none taken. I certainly wasn't assuming you didn't know anything about embedding fonts. I thought part of the post that covered font formats and Fog Creek's methods for fixing display inconsistencies across operating systems and browsers might be helpful. –  tinym Feb 4 '13 at 22:37
add comment

3 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
"The bottom line is, you need to test webfonts in multiple browsers on multiple systems as early in the design process as possible" - any ideas how a designer with no clue on HTML or CSS might actually do it? Cause that's where from I get the designs >_> –  MarcinWolny Feb 4 '13 at 22:43
    
The designer needs to coordinate with the UI dev team at the earliest stages. Development requirements/limitations shouldn't put a ceiling on the concepts but they are critical to working out the details. –  plainclothes Feb 4 '13 at 22:57
    
Yes, I'm well aware of that, and that's the way I prefer to work, but the whole issue came out from the fact that the designers are few hundred miles away and there's hardly any way they could coordinate development all the way along with Dev team. Especially when dev team got it's own assignments. I know it's doable to create a tool that would allow simulating a behaviour of fonts in web browser, to actually predict if font behaves nicely or not, but I'm wondering if someone haven't made something like that already? –  MarcinWolny Feb 5 '13 at 8:41
2  
@MarcinWolny That sounds like a worthy separate question worth asking. One quick suggestion I've heard of but not tried - fontdragr.com might work since the designer must have the files for whatever font it is to make the knockup. –  user568458 Feb 5 '13 at 11:04
    
@user568458 - looks brilliant! That's perfect. Should be more then good and easy enough for designer to test the fonts. Cheers! –  MarcinWolny Feb 5 '13 at 11:30
show 3 more comments

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.

share|improve this answer
add comment

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.

share|improve this answer
    
1. I don't try to use it for plain text, but as a headers / menu items. And these not always are in a size of 24+ # 2. Yea, but it's not as much about rendering a font beautifully, but rather about rendering it in a way that's similar for both tools. Or predicting artifacts. # 3. Yep, I know that eg. Win 98 or MacOs use different anti-aliasing mechanics (or don't use any at all), but I'm aiming at most common platform here - Win7+FF. –  MarcinWolny Feb 4 '13 at 18:32
    
@MarcinWolny in your question you are showing 14px type. That's just too small for a display face--especially on screen. –  DA01 Feb 4 '13 at 18:34
    
wops, sorry - see edited comment (clicked [enter] by accident) –  MarcinWolny Feb 4 '13 at 18:36
1  
@MarcinWolny I added a bit more to my answer as well. Bottom line is that there is just no solution for this at this time. When using web fonts, you have to accept a certain amount of variability. Even targeting one very specific platform (Win7 + FF) you are still at the mercy of end-user settings and preferences. –  DA01 Feb 4 '13 at 18:44
    
Thin is that - targeting one specific platform basically reduces variety to the minimum. 99% of people using FF with Win7 will get the looks I did. Simply because very very few people ever touch any user settings that related to the font rendering in a browser. So I'd assume that what I aim for is what I have on my PC (which is quite accurate, as it perfectly matches my laptop as well, and I'm usually showing a website to the client on it during the meetings, so sounds like a perfect plan). –  MarcinWolny Feb 4 '13 at 22:35
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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