Solved

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

Posted on 2011-03-06
23
1,493 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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
 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Width of Page is Affecting Side Menu 6 31
remove all history 3 35
CSS: How to get responsive tables to not be so spread out on desktop 5 41
ASP.NET Content Page 3 25
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

765 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