Solved

Text rendering as bold on mac in web browsers

Posted on 2007-11-21
2
1,022 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
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 500 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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 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