bold font weight

[freelance84]

Hey.

 

Does anyone have a technique they wouldn't mind sharing with me on achieving a bold font weight which work across the board of browsers and platforms?

 

I hit upon the issue a while back (here) but never really found a resolve.

 

//eg//

This site has some things in bold but others not, i've checked on FF on Windows and FF on a Mac and they look pretty much the same. I can't seem achieve it. If anyone else has used a bold font weight on their site and managed to keep it looking the same on a PC and a Mac I would really really love it if you could possibly tell me what you used (font / weight / size combination).

 

Much thanks in advance of any positive replies,

 

John

[requinix]

Clearly you aren't talking about

font-weight: bold;

so what are you talking about?

[freelance84]

Hi requinix,

 

Yup

font-weight: bold;

is exactly what i am talking about.... but i'm sensing i've been making a rather large error?? "CSS the missing manual" pg.465 says only the keywords 'bold' and 'normal' work these days.

 

The "parent" size for the site is:

font-size: 10pt;
font-family: Verdana, Arial, Helvetica, sans-serif;

 

When i apply this class:

.legend-add{
font-weight: bold;
}

The font weight looks bold and neat on Windows but on a Mac it looks VERY bold (like when you're in illustrator and you give a font a fill and a heavy line weight (superBold))

 

Is there another way? How would you get a bold to look the same in windows and mac?

[requinix]

There are also numbers you can use, but consider that "normal" and "bold" have defined numeric equivalents: 100-900 (in increments of hundreds) with normal=400 and bold=700. I don't trust a CSS book that says that only those two keywords "work these days".

 

Being bolded or not is an interface enhancement. You shouldn't care too much about what "bold" means so long as it's sufficient for the user.

Also, caring about making stuff look the same on all browsers and platforms is a battle you can't win. Learn to use things like exs and ems so the exact font sizes and character dimensions don't matter.

[freelance84]

Ah right ok.

 

Yea that makes sense... i've been using ems & % for the rest of the site but somehow overlooked the font-size.

 

Thanks a bundle. There's so many things to learn and remember with dynamic web design it easy to let other things slip.

 

Thanks again.

 

John

[haku]

'normal' and 'bold' are in fact the only values that are cross-browser friendly. Other values don't work on IE I believe.

 

Your fonts look different because each browser renders fonts in its own way, and PCs and Macs also render fonts different ways. It's just the way the web works, there isn't much you can do about it.

[freelance84]

OK, after finally getting my hands on Mac and having a play around... this is the my conclusion (if anyone comes across this post)

 

It appears that    font-weight:600;  on macs are simply rendered in some kind of a childishly bold way, almost as if the font has been drawn in crayon. I've found it doesn't look too bad when the font colour is dark on a light background, but when light on a dark background it doesn't.

[raknjak]

Maybe this will clear things up

http://dave-bond.com/css/font-too-bold-on-a-mac/

[freelance84]

raknjak thank you VERY much! 

 

I new there must be an answer to this somewhere!