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