How to make custom css fonts render exactly like designs

Question

I'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):

I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:

a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".

b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".

I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.

How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?

Answer 1

From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.

In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.

It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.

There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.

To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.

Check these links out if you wish to read more, hopefully they can be helpful:

Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?

How to do font antialiasing in web page?

Webfont Smoothing and Antialiasing in Firefox and Opera

http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/