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.

score 26 · Answer 1 · answered Jul 09 '12 at 19:19

26

Use CSS to smooth up your fonts...

put this in your CSS:

-webkit-font-smoothing: antialiased;

answered Jul 09 '12 at 19:19

Caleb Crosby

261
3
2

1

this is actually something that helps. at least for webkit browsers! check also this answer to a similar question: http://stackoverflow.com/a/4012154/336235 – Ernests Karlsons Sep 04 '12 at 06:39
is der any such solution available for Opera, IE and Firefox? – Chaitanya Chandurkar Jul 08 '13 at 14:30

tybro0103 · Answer 2 · 2014-01-21T15:26:38.410

18

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

edited Jan 21 '14 at 15:26

answered Jan 13 '11 at 17:08

tybro0103

48,327
33
144
170

If the font's layout does not matter, this is a quick solution, but does not actually make the font more crisp, as it is just the selected font that has a lighter font-weight available (or the font itself is designed with thin lines). – einord May 06 '13 at 08:14
Totally love Your answer man, I've been looking for this answer for a long time… Thank You. – Samuel Ramzan Nov 09 '21 at 17:31

score 4 · Accepted Answer · answered Sep 20 '10 at 12:01

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

score 1 · Answer 4 · answered Jun 17 '11 at 02:07

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.

Web Safe Font Weights -- How to get thinner?

4 Answers4

Linked