Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1952
  • Last Modified:

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

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
Sumukha
Asked:
Sumukha
  • 11
  • 5
  • 4
  • +2
3 Solutions
 
SSupremeCommented:
There is no solution for this, it just a way how font is shown on different browsers or with different OS properties.
0
 
SSupremeCommented:
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
 
jeremyjared74Commented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
SumukhaAuthor Commented:
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
 
SSupremeCommented:
Windows uses ClearType, therefore fonts could be different.
0
 
SumukhaAuthor Commented:
Exactly. And Apple blurs them. Question remains how to get one sentence into the same length.
0
 
jeremyjared74Commented:
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
 
SumukhaAuthor Commented:
Thanks, but not an option for the client. Has to be Arial.
0
 
SSupremeCommented:
As I said you cannot do much about it as every user has its own setting for his/her display options.
0
 
SumukhaAuthor Commented:
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
 
adeelshahidCommented:
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
 
SumukhaAuthor Commented:
Interesting solution!
Even found a WP plug-in for cufon. I'll get back 2u.
0
 
olliefeldeCommented:
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
 
SSupremeCommented:
If you what different CSS for each OS you can do it.
Try this solution here: http://www.dynamicdrive.com/dynamicindex9/dyncss.htm
0
 
jeremyjared74Commented:
If you use Cufon I don't believe Google or other search bots can index the text.
0
 
SumukhaAuthor Commented:
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
 
adeelshahidCommented:
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
 
SumukhaAuthor Commented:
Can't get Cufon to work on WPress. Tried both available plugins.
0
 
SumukhaAuthor Commented:
Now got it to work, but cufon line height is not adjustable in CSS.
0
 
jeremyjared74Commented:
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
 
SumukhaAuthor Commented:
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
 
SumukhaAuthor Commented:
added...
0
 
SumukhaAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

  • 11
  • 5
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now