?
Solved

Text rendering as bold on mac in web browsers

Posted on 2007-11-21
2
Medium Priority
?
1,026 Views
Last Modified: 2012-08-13
Hello,

I've got a problem with text on a website . When viewing it on a Mac in Firefox or Safari or other browsers it appears to render text as bold (even though it will go bolder with font-weight: bold; ).

Can this be fixed? I've tried putting font-weight: normal !important in my CSS but seems to have no effect.

Cheers

Heres a link to the site if you'd like to check your yourselves.
http://www.designjunkie.com/allanlake/furniture_bedroom.php
0
Comment
Question by:sousflai
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 6

Expert Comment

by:TheKyle
ID: 20331314
I don't have a mac in front of me, but I'm guessing that what you're seeing is caused by the anti-aliasing on a mac.  By default, Windows doesn't have anti-aliasing, but Macs do.

Try enabling "ClearType" in Windows, and see if it makes the text look more like the Mac. (http://support.microsoft.com/kb/306527)

If they look the same or similar, then there really isn't a problem with your css.  It's something that you can't really do anything about.

If they still look drastically different, then I'm not sure what you could do.  I'd probably have to see your html and css to help you more.
0
 
LVL 40

Accepted Solution

by:
Eoin OSullivan earned 2000 total points
ID: 20333430
The problem/issue is that you've used a font-family that differes between Mac & Windows
See your master.css
In the body tag you have specified
body {
      background-color : #303030;
      font-family: Helvetica, Arial, sans-serif;
      color: #fff;
}

Helvetica is a Mac-only font and more heavily aliased and slightly rounder than Arial ..
So on a Windows PC you are looking at Arial and on a Mac you are looking at Helvetica .. hence the difference.
Try removing Helvetica from the font-family for a more consistent appearance!!

Change it to ..

body {
      background-color : #303030;
      font-family: Arial, sans-serif;
      color: #fff;
}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

We could spend the next millennium discussing the differences of the Mac and Windows platforms. The next century will continue to have fanatics on both side of the equation and neither side will win the war. However, that’s not why we are here. W…
In this article we discuss how to recover the missing Outlook 2011 for Mac data like Emails and Contacts manually.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question