Web Safe Font Weights — How to get thinner?

Question

When I design in Photoshop, my fonts are thin and crisp, but when I declare fonts in CSS -- even when using font-weight: lighter -- the fonts always appear bolder.

Maybe this is just how the browser renders the font (In IE fonts stay thin), but I was wondering if there were any tricks or tips for achieving the same thin, crisp looks.

Answer 1

Use CSS to smooth up your fonts...

put this in your CSS:

-webkit-font-smoothing: antialiased;

Answer 2

Font rendering can be complicated. Unfortunately, different browsers will render the same font differently.

As far as CSS goes, setting font-weight:100 ensures the lightest available weight will be used. You may also want to set -webkit-font-smoothing:antialiased .

<style type="text/css">
   body {
      font-family:"Helvetica Neue", Arial, sans-serif;
      font-weight:100;
      -webkit-font-smoothing:antialiased;
   }
</style>

Helvetica Neue is a very thin font native to OSX.

Your best bet is really http://www.google.com/fonts/

Also noteworthy:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

Answer 3

You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.

A bit more info here:

Browser Choice vs Font Rendering | Phinney on Fonts

Answer 4

I don't believe any one of the universal web fonts has a very thin weight in all browsers. However, there ways of embedding custom fonts in all major browsers now 'days.

http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator

Any of these tools can get you just about any kind of font you can imagine. Just be careful with copyrights on the last one.