CODEWITHSUNDEEP
cssfonts
HWD
HWD

Reputation: 1629

Web Safe Font Weights -- How to get thinner?

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.

Upvotes: 27

Views: 43629

Answers (4)

tybro0103
tybro0103

Reputation: 49693

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

Upvotes: 18

Caleb Crosby
Caleb Crosby

Reputation: 261

Use CSS to smooth up your fonts...

put this in your CSS:

-webkit-font-smoothing: antialiased;

Upvotes: 26

tybro0103
tybro0103

Reputation: 49693

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.

Upvotes: 1

spiral
spiral

Reputation: 608

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

Upvotes: 4

Related Questions