homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Designer's control over bold text in Safari?
JAB Creations

 7:06 am on Mar 30, 2008 (gmt 0)

All the text in Safari is bold. I don't care if Mac people think it's not bold it's bold. I don't care if they think font-weight: %5000 is more legible or even attractive, it's bold. I've tried things like font-weight and changing the fonts themselves. Changing the font-size only makes the text smaller, it's still bold.

So my question is simply this: how can we as web designers force Safari to not render all the text as bold? Telling visitors to adjust their browser is obviously not an acceptable answer to this dilemma.

- John



 7:57 am on Mar 30, 2008 (gmt 0)

I'm a mac user and I see some text in bold and some in normal weight.
Can you be more precise on what you see and where?

JAB Creations

 10:14 am on Mar 30, 2008 (gmt 0)

Just find a screenshot of any browser in Windows except Safari and compare it's text to Safari.

- John


 11:55 am on Mar 30, 2008 (gmt 0)

I've got IE in VIsta running next to Safari on a Mac and I also can't really see what you're referring to.

I'm also a web designer and I've never had any issues with Safari text.

The only thing I can think of is that you are referring to the anti-aliasing on a Mac and also Vista as opposed to XP and earlier Windows systems.

JAB Creations

 12:05 pm on Mar 30, 2008 (gmt 0)

I haven't touched Vista since it first came out so I can't recall what text looks like in that scenario.

Safari/XP renders text much bolder then all the other 38 browsers I test with on XP. I can't comprehend how another designer could not see the difference in the font-weight!

- John


 12:47 pm on Mar 30, 2008 (gmt 0)

This was certainly true on the early beta versions, but if you upgrade to the most recent version (3.1) your "bolder than other browsers" text problems will disappear.

But you will still be on Windoze...

JAB Creations

 1:07 pm on Mar 30, 2008 (gmt 0)


I test nightly builds of Firefox and Safari on an almost daily basis. I also test new builds of Opera. I would not ask a question using Safari 3.1 for an issue that has been around for a good while now if I didn't feel I had exhausted all avenues to be attempted.

- John


 2:35 pm on Mar 30, 2008 (gmt 0)

What can I say? I booted up an XP machine that still had the old Safari version 3.0 (522.11.3) which - as you correctly described - rendered the text on Google's home page significantly bolder than other browsers on the CRT monitor I had plugged in (I didn't test it on a flat panel).

I then downloaded the latest version of Safari and the text was no longer bold - it worked for me. I also looked at Google's home page in Explorer, Firefox and Opera, all of which were slightly different, with Firefox and Opera being noticeably lighter than Explorer.

Presumably you have tried changing the Font Smoothing settings in Edit > Preferences.

The text in Safari on my installations of Windows XP is not bold.

I don't care if other people say it is.


 4:25 pm on Mar 30, 2008 (gmt 0)

I see bold text (as compared to Firefox, Opera, and IE7) in Safari Version 3.1 (525.13) with the Safari font smoothing set to "Standard (best for CRT)" on Win XP. Setting the font smoothing to "Light" reduces the effect a little, but not much.

To quantify this, text appears "half-bolded" as compared to truly-bold text in the reference browsers -- The normal text in Safari is bolder than "normal" in the reference browsers, but not as bold as {font-weight: bold;} text in the reference browsers.

So the effect is not imaginary, but rather something that apparently varies from system to system. This kind of variation among systems and software is quite common, and this should be borne in mind by those who think that JAB is just making it up...



 4:25 pm on Mar 30, 2008 (gmt 0)

Well your initial post definitely looks bold in any browser.

I'm looking at this page in both FF and Safari (on a mac), and tere;s is next to no difference between them.

Not caring what people using the browser think is the way to make sure they never return to you, never give you a link or any good you might hope for.

JAB Creations

 7:10 pm on Mar 30, 2008 (gmt 0)

You summed it up nicely swa66, if Safari won't let me browse with non-bold text then I don't feel obligated to use that browser.

One vague idea I've had was to use text-shadow though it's placed behind the main text and itself is still bold. I'm still open to progressive suggestions...

- John


 7:25 pm on Mar 30, 2008 (gmt 0)

It's obviously a browser specific "feature" (text rendering method). The fact is users have different font sizes and font families selected to be used anyways, safari is just applying it in a different way and by default. People who use the browser will be dealing it with the issue themselves consequently for using the browser. If they don't like the way their browser looks, they can try changing rendering or hack, or they can change browsers. There is no requirement for browsers to render with the same base font-weight, or use the same text-rendering engine.
I guess you're actually just using windows Safari, right? I hear that if you try using mac firefox, you'll get the same issue as win safari/mac safari, because they use the same engine.

You may try this: [24ways.org...]
[themechanism.com...] use a Safari CSS hack/javascript with font-weight.

[edited by: Xapti at 7:39 pm (utc) on Mar. 30, 2008]


 7:59 pm on Mar 30, 2008 (gmt 0)

Safari has always shown text heavier than other browsers, but Safari 3.1 seems to have toned it down quite a lot.

It is still heaver, but by not very much (side-by-side with Opera et. al on Vista).


 8:44 pm on Mar 30, 2008 (gmt 0)

>>>>> text appears "half-bolded" as compared to truly-bold text

I agre with that- Windows XP, first release Safari. Disliked it.


 8:59 pm on Mar 30, 2008 (gmt 0)

Interesting - I use Safari on a daily basis, with regular trips to other browsers for testing, and I've never noticed this.
I don't mean it doesn't happen, I mean that regular visitors probably don't notice it, so I wouldn't worry too much :)


 9:19 pm on Mar 30, 2008 (gmt 0)

I"ve never recognized such a difference either. I use Safari (Mac) about two-thirds of the time and FireFox about one-third of the time. I notice a few differences between them but the degree of boldness has never been one of them.

JAB Creations

 9:37 pm on Mar 30, 2008 (gmt 0)

Thanks Xapti! Shaun Inman's article helped me get ease Safari from elephant sitting on fonts. While it's not the default nor implemented via standards I implemented it via the Safari secondary style sheet patch. I do like the effect the font has now since it does not look smudged. I can't say I like it more or less then the default for Firefox/XP though I do like it.

The fonts in IE seem heavier now that I think about it though my system's levels of adenosine are high so I'm going to go to sleep early... uh really early. :)

- John


 2:00 pm on Apr 8, 2008 (gmt 0)

I still can't see it myself and I spend hours a week testing websites in different browsers and OSs, but there you go. Oh well, must be a system specific issue, or perhaps only affects certain builds?


I was that intrigued that I took a quick look at some of my test machines and VMWare installations (most set to default install settings) and I really can't get any version of Safari, from version 2 upwards, to show text any bolder than any other browser.

Safari has lots of issues, but I can't reproduce this one.

I can only guess that it's a combination of factors on different people's machines. I would look at font 'conflicts' as a starting point. Safari can be somewhat sensitive in this area.


 12:29 am on Apr 9, 2008 (gmt 0)

In the reverse, I find the text in "View Source" to be far too light for my liking.


 7:16 pm on Jul 27, 2008 (gmt 0)

I also just recently came across this nuisance, and made a fix for it using CSS. It actually comes down to the text-shadow CSS attribute.

To remove the auto-smoothing, place...

text-shadow: #000000 0 0 0px;

...in the objects CSS properties that you wish not to auto-smooth, and Safari will behave like any other browser.

(Edit: As a side note, I registered on this forum only hoping to help you folks out, and will certainly contribute further if I see a need.)

(Edit2: After further further review, it looks like my solution may have already been someone else's solution... Drat!)


[edited by: JohnJamesJacoby at 7:48 pm (utc) on July 27, 2008]

[edited by: tedster at 4:25 am (utc) on July 30, 2008]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved