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.
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