7

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):

enter image description here

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?

John
  • 32,403
  • 80
  • 251
  • 422
  • 1
    Unlike fancy software like Photoshop, browsers don't have advanced ways of making fonts render. In general, if you have a normal (non-bold) and a bold font that you want to render on the page, you should provide font files for both, or you will not get the exact results. The same goes for italics or not. Without these extra files, the browser emulates bold or italics, and they all do it differently (and generally badly) And even then, there is no way to get them to look IDENTICAL across browsers and OSes. – Mark Ormston Mar 24 '13 at 02:45
  • *"and it seems to vary depending on which OS and browser you are on"* - There's your key. All browsers render all fonts differently. Some are just so minor in difference that it's not really noticeable. – animuson Mar 24 '13 at 02:46
  • Off-top: why do designers use fonts that look blurred and make most text at web pages very difficult to read? Why cannot designers use fonts that look thin, legible, non-blurred and one-pixel wide (like Tahoma, Verdana, Arial and so on) at the size less 18 points and 22 pixels? And why do designers embed special graphical symbols into their custom fonts, and those symbols become unprintable rectangles when downloadable fonts are disallowed? – Aleksey F. Jun 16 '16 at 18:56

4 Answers4

6

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/

Community
  • 1
  • 1
span
  • 5,405
  • 9
  • 57
  • 115
2

"The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN

    @font-face {
    [font-family: <family-name>;]?
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
    [unicode-range: <urange>#;]?
    [font-variant: <font-variant>;]?
    [font-feature-settings: normal|<feature-tag-value>#;]?
    [font-stretch: <font-stretch>;]?
    [font-weight: <weight>];
    [font-style: <style>];
    }

https://developer.mozilla.org/en-US/docs/CSS/@font-face

Its not a perfect solution, but it may get you closer to where you want to be.

apaul
  • 16,092
  • 8
  • 47
  • 82
  • Does this rule allow preventing font from anti-aliasing and allow the use of thin, legible and non-blurred fonts instead, at any web page, with userContent.css, while at the same time properly handling font-embedded symbols, which are not contained in Tahoma, Arial or another system font? – Aleksey F. Jun 16 '16 at 18:47
1

We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.

On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.

When you're using a webfonts service you're at the mercy of how that service handles font embedding.

However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.

Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.

Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.

Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.

Jeromy French
  • 11,812
  • 19
  • 76
  • 129
jsuissa
  • 1,754
  • 6
  • 30
  • 64
1

From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.

pmrutu
  • 21
  • 4