Solved

How to use CSS to fix font differences between Mac and PC?

Posted on 2011-03-06
23
1,461 Views
Last Modified: 2013-12-07
Hello,
I ongoing notice differences between MAC Safari/Firefox and Win Safari/Firefox:
The same font, e.g. Arial takes more space on a Mac Browser than on a Windows Browser since Mac's OS is blurring fonts a bit.
I am building a WordPress site, where exact font size is crucial.

I attach an image with Windows on left w. the code, Mac on the right.
The first sentence until 'Burny' is 222px on Win, 226 on Mac.

Any (easy) solution for this?


differences.jpg
0
Comment
Question by:Sumukha
  • 11
  • 5
  • 4
  • +2
23 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 35048357
There is no solution for this, it just a way how font is shown on different browsers or with different OS properties.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 35048368
Just for reference, you can compare a look of this page here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html on different OSs or browsers.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35048429
I believe this is where the reset.css comes into play. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Here is a good place to learn about them and find links to CSS RESET staring files:
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
0
 

Author Comment

by:Sumukha
ID: 35048975
I don't see anything in there about this issue.
The issue is not exactly browser inconsistencies, it is that Apple's OS generally does something that affects how the browsers display things.
My guess is that the only way for this to be fixed would be a Mac specific style for the affected region.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 35049055
Windows uses ClearType, therefore fonts could be different.
0
 

Author Comment

by:Sumukha
ID: 35049759
Exactly. And Apple blurs them. Question remains how to get one sentence into the same length.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35050112
The best bet would be to use Verdana, it is the best font for cross browser/OS compatibility when it comes to web fonts.
0
 

Author Comment

by:Sumukha
ID: 35051414
Thanks, but not an option for the client. Has to be Arial.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 35056199
As I said you cannot do much about it as every user has its own setting for his/her display options.
0
 

Author Comment

by:Sumukha
ID: 35057285
May I clarify again:

It is not a browser interpretation or a display interpretation. It is the Operating System that does this.

So there must be a way to make a conditional stylesheet for Mac OS (not browser) that addresses this area in my site and changes font, margin or padding for that div.
0
 
LVL 2

Accepted Solution

by:
adeelshahid earned 175 total points
ID: 35057370
use cufon if you want exact results,

check here.

generate font:
http://cufon.shoqolate.com/generate/

download cufon code:
https://github.com/sorccu/cufon

follow example's, majorly just use Cufon.replace('.CLASS_NAME');

to replace the text etc.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:Sumukha
ID: 35058346
Interesting solution!
Even found a WP plug-in for cufon. I'll get back 2u.
0
 
LVL 3

Expert Comment

by:olliefelde
ID: 35059513
The only way to have it show up precisely is to turn it into a graphic. Otherwise, type on the web is variable from machine to machine and platform to platform. Period.
0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 175 total points
ID: 35059520
If you what different CSS for each OS you can do it.
Try this solution here: http://www.dynamicdrive.com/dynamicindex9/dyncss.htm
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35059900
If you use Cufon I don't believe Google or other search bots can index the text.
0
 

Author Comment

by:Sumukha
ID: 35060899
SSupreme: That would be the best - let me see if there is a solution for WordPress.

jeremyjared74: I guess you are right. This is especially delicate, because it appears on the home page.
0
 
LVL 2

Expert Comment

by:adeelshahid
ID: 35060932
Cufon is just font replacement using javascript so don't worry about search engines they'll treat that just as text.

About your issue, even on windows, just look into internet explorer and firefox the font difference would show up, so go the cufon way.
0
 

Author Comment

by:Sumukha
ID: 35062187
Can't get Cufon to work on WPress. Tried both available plugins.
0
 

Author Comment

by:Sumukha
ID: 35063332
Now got it to work, but cufon line height is not adjustable in CSS.
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 50 total points
ID: 35063624
After doing some reading on Cufon, I see it is index-able by Search Bots. The few negatives are:
Not screen reader friendly.
Used to often can cause slow page loads.


The outcome is much better than I thought, but it seems there are still issues with the variable output. If a user has JavaScript disabled it will default back to their default browser font.

The best bet would be to design flexible layouts that would allow for variation in the different sized fonts, or letter spacing / line heights.
0
 

Author Comment

by:Sumukha
ID: 35116082
Both solutions - Cufon and separate  style sheet for Macs are possible solutions.
Let's hope that Apple wakes up one day and fixes this annoying feature (BTW it is even worse with bolded letters).
I add some ponts and split them...

Thanks for your help!
0
 

Author Comment

by:Sumukha
ID: 35116085
added...
0
 

Author Closing Comment

by:Sumukha
ID: 35116097
Thanks!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now