font weight trick anyone?

[Raphaelle]

Does anyone know if there is a way of making a font thinner by using some Javascript trick?

I'm implementing my design for a dark website with light text on top and the text looks much thicker than in Photoshop. It's a known issue, I realise now, but I'd like to find a sort of hack even if it's an ugly one.

thanks

[mrhoo]

Some fonts are heavier than others, and some users don't have the fonts installed that you test with, and use a substitute that may have a different look. Aside from that, most browsers allow the user to specify his own style sheet, which may call for a different font/size/weight than you like.

You can try setting the style of the font-weight to 'lighter', but that may not work at all, or it may make it too 'thin' for some.

At present, the only way to dictate the appearance of text on a web page is to deliver it as a graphic.

[Raphaelle]

the issue I'm talking about is explained here: http://24ways.org/2006/knockout-type

There is a fix for webkit browsers but I thought maybe with some Javascript there'd be a way to achieve thinner text.

I'm only using websafe fonts here.

[felgall]

It depends on how many font variants there are. You can set it to use the thinnest one that is available by using font-weight:100

[Raphaelle]

yeah but unfortunately that property doesn't work on most browsers. I was hoping for a work around really.

[felgall]

yeah but unfortunately that property doesn't work on most browsers

That's because most fonts only have two or three weights and normal is usually the lightest one so that 100 and 400 produce the same end result for those fonts.

Those using a particular browser that handles fonts slightly differently will be used to the way the fonts look in that browser and may have even selected that browser for that specific reason.

[RLM2008]

the issue I'm talking about is explained here: http://24ways.org/2006/knockout-type

Handy link/tip Raphaelle.

I was having the reverse of your problem with fading text. Apparently from 0.99 to 1 opacity, anti-aliasing is handed over from the browser to the OS. You end up with a visible popping effect.

To avoid that I'm just fading up to 0.99, there's no popping but the text looks naff.

Using this instead has helped a lot.

 text-shadow: 0 0 0 #aaa; /* instead of the #000 for thinner trick */
  -webkit-text-shadow: 0 0 0 #aaa;  
  -moz-text-shadow: 0 0 0 #aaa;

Sorry I couldn't help, but thanks for the link.

RLM

[Raphaelle]

I'm glad I could help someone

Still desperate to find a fix to my thick white text on black background. Maybe something like sIFR would make a difference but I'm not sure it's a good idea for this particular project I'm working on.

Would there be any way of creating an inner stroke or shaddow to fake it?

[dnordstrom]

Using TypeKit is a nice "Javascript trick". Very, very easy to implement—I'm using it on both of the sites in my signature.

Check it out. It's free to use with two fonts on one website.

http://www.typekit.com

[Raphaelle]

Using TypeKit is a nice "Javascript trick".

Thanks, Typekit sounds great; I was considering looking onto it. However how will using Typekit change the fact that in some browsers fonts render when they are light on dark background? I just don't see the answer to that specific problem here.