3

As you can see on the screenshot, a custom webfont (agrafa thin) is rendered too thin on Ubuntu. Because it's too thin, the font-color (white, fff) looks more like light-blue 1. This counts for both the latest versions of Google Chrome and Firefox. On Windows/OSX, all major browsers, this is not the case 2. The font-size is 13px.

Anything there's to be done about it? Of do I just need to buy another (thicker) version of Agrafa?

Font-thickness as rendered on Ubuntu Font-thickness as rendered on other platforms

grrrbytes
  • 312
  • 2
  • 15
  • btw: font-weight property doesn't come into effect, since i bought only agrafa-thin... just wondering if i can fix this by other means than just buying a thicker version just for the ubuntu (and other linux?) platforms – grrrbytes Nov 02 '11 at 18:21

2 Answers2

1

Try to use the font-weight property (http://www.w3schools.com/cssref/pr_font_weight.asp)

EDIT: Sorry, didn't read your comment in time.

You can also try to play with text-shadow to give a little more contrast... Not an ideal solution, but is better than buying another font.

Jose Antonio
  • 444
  • 5
  • 15
  • As explained in my comment, this is not possible since i haven't bought other agrafa thicker versions. Since this seems an ubuntu (linux?) only problem i was hoping for another solution. Even increasing the font-size to way too large sizes for my design, the problem remains the same – grrrbytes Nov 02 '11 at 18:25
  • sorry, didn't saw it in time. It seams like an anti-aliasing problem. Don't know if there is a way to control this in the developer side... – Jose Antonio Nov 02 '11 at 18:32
  • tnx. it kind of works, but color comes out pretty blurry. Guess I'll us a regular font, spending another $20 just for this particular problem is a bit too much I think... – grrrbytes Nov 02 '11 at 18:34
  • I found that there is a "font-smooth" property, but is CSS3, don't know which browsers have implemented it yet. Also try the Rajat Saxena answer, it may indicate the browser to render the font in a different way. – Jose Antonio Nov 02 '11 at 18:39
  • font-smooth property, as I read, is still dependent on the user's configuration as I understood. Tried it too and nothing changed for the better. Using em as a size-expression doesn't help either. Anyways, tnx all, I will stick with another font... – grrrbytes Nov 02 '11 at 18:42
  • Ok. you can also check this post "http://stackoverflow.com/questions/761778/forcing-anti-aliasing-using-css-is-this-a-myth" for a bunch of crazy ideas, like the one that talks about using opacity in the div containing the font. Good Luck. – Jose Antonio Nov 02 '11 at 18:47
  • Tnx Jose, but indeed, a bit too crazy/hacky non-standard compliant for my liking. – grrrbytes Nov 02 '11 at 18:54
  • Hey you can try this script(http://jsfiddle.net/raynesax/U8hRH/) to detect the OS and adjust the css according to the OS.just an idea. – Rajat Saxena Nov 02 '11 at 19:24
1

You can try expressing font-size in em.Just go through this post.http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Rajat Saxena
  • 3,834
  • 5
  • 45
  • 63