14 replies [Last post]
loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Been having font problems on the MAC I use at work to test sites on. It seems as though unless I set the font sizes in key words (not a problem doing this) then the Mac will display a smaller font. I have yet to work out if this is just my MAC or whether other people have this problem.

I don't mind this difference if the font sizes are at a decent size but sometimes (generally for links) it is desired that the font size is smaller than it would be for the body - so if I set my font at .8 em this is fine on the PC and not on the Mac.

I had a look at some other web sites and found this on Simple bits:

This is how that bit looks like on my Mac. I have checked the font size (100%) of the browser, and also changed the resolution to 800 by 600. This makes the text bigger but you still can't read it. I am using an IMAC G3 IE Win and OS X version 10.1.5. If anyone else is seeing what I am seeing or can shed any light on this please let me know!

I have found a solution though. Using keywords - seems to work pretty much cross browser. When I use a key word it looks almost identical on the Mac and PC.

Here are my examples (both images):

taken from a mac

taken from a PC

I used verdana and made sure this was on both machines. Notice how the one set with key words seems to look almost identical but there is a huge difference between the ones set with em's

If I'd set my size at .8em it would have been almost impossible to read on the Mac

I have set a test page up at http://www.loungepenguin.co.uk/pages/font_test.html

I'd appreciate it if someone could have a look on a mac and tell me what they are seeing.

thanks

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My strange Font problem. Mac

This is how your test page looks on a G4 running OSX 10.3.9.

FF 1.0, Safari 1.3 or IE 5.2; they all look identical.

Life's a b*tch and then you die!

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

blimey - that means there is something up with my Mac. Your image is exactly the same as it looked on my PC (except for the antialiasing that the Mac does)

Any ideas what is doing this to my MAC? I spent ages and ages trying to work out why the text was smaller on my Mac. Surely an em is an em.

Any help from any Mac people out there would be very appreciated as this means testing on my one and only Mac will be a pain in future.

I didn't think http://www.simplebits.com could have over looked this. (20% of it is unreadable on my dumb mac.)

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My strange Font problem. Mac

loungepenguin wrote:
Any ideas what is doing this to my MAC? I spent ages and ages trying to work out why the text was smaller on my Mac. Surely an em is an em.

When you use ems in a stylesheet, the size shown is relative to the base size, which is either the size you set for your <body>, or it will be the browser or system default (not sure which). You are setting your body size in ems, therefore all the sizes on your Mac are being calculated relative to your browser or system default, which presumably is quite small.

The way to get round this is to specify a base size in either pixels or a percentage. If you use pixels, make sure that all text in your site relates to a named style, otherwise users with IE will not be able to increase or decrease the font size. If you use a percentage value, go for 86% as I believe this is the generally accepted optimum for most browsers. I read a whole load of stuff on this subject some time ago but my brain seems to need to dump stuff quickly in order to make room for new stuff. That's my excuse for forgetting it all, anyway Laughing out loud

Life's a b*tch and then you die!

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

Hi

Thanks for the reply.

I tried setting the font-size in the body to 86% but this does not make the difference in size between the 2 platforms anymore less.

If I set the base size to be in pixels the size is a lot more consistent but obviously this is a bad idea for re-sizing in IE.

I think I understand what is happening but this does not help. If I set the font size at 86% for example then this would be 86% of that machine’s base size. The problem is that on my MAC the base size appears to be less than that of my PC and therefore really inconsistent.

On my Mac you can't read .8em on this:

http://www.loungepenguin.co.uk/pages/font_test86percent.html

I realise it's the web and you can't get text to be the same across browsers and platforms but If I try and set a font size that seems decent on the PC but is unreadable on the Mac then this is going to cause problems.

What really concerns me is that in your gif you have posted the text looked pretty much the same as it did on my PC so it appears to be my Mac that is weird. Are there other Macs doing this? I keep seeing decent “accessible” web sites on this Mac with illegible text.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My strange Font problem. Mac

I don't know about other Macs but AFAIK you CAN set the base font in pixels, as long as you set all other sizes in ems and then make sure that every instance of text on the page is styled with a tag, class or id that is set in ems (which in turn is relative to the base font set in pixels). This way IE users should still be able to change all the font sizes. I haven't tested this, but I think you should find that it is a workable solution to your problem.

Life's a b*tch and then you die!

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

Tried this and it doesn't work. - If I set the font as a pixel value in the body and set the individual elements in em's IE still fails to re-size the text.

I suppose a solution would be:

In the body feed a pixel font-size to everything except ie win and then feed a percent to IE to allow for re-sizing.

I have just tried this and although not perfect it seems fairly OK (ish) I used the clagnut idea http://www.clagnut.com/blog/348/

which means I can set everthing at 10px and worked up from there. I know 10px is a little small and way small for body size but as the above article says this makes it easier to calculate em's in terms of pixels.

Just to go over what I have done (so I can look back on this as much as anything)

Most browsers default body size is 16px. By setting the body to 62.5 this makes the default 10px and easier to calculate.

eg http://www.loungepenguin.co.uk/pages/font_testpix.html

However - my mac for some reason seems to have its default size below 16px so if you were to look at the above example on my machine then the one set in em's is un-readable.

However by feeding 16px to the body this keeps it more or less in default with the other browsers. also because it is IE MAC the text is still resizable.

http://www.loungepenguin.co.uk/pages/font_testpix2.html

PHEW!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 13 hours ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

My strange Font problem. Mac

I seem to recall reading somewhere PCs use a base font size of 16px and Mac's use 12px. If the only problem is with IE inability to resize pixel font-sizes, why not use an IE only hack to set IE's font-size with the hack and then set all other browsers with a pixel size.

body {font-size:12px; _font-size:0.75em;}

Given that the problem must afflict all mac users on most sites. Isn't it possible that mac users have compensated by adjusting their browser font-size?

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

yep - that would be much more logical - I tried a different hack to that but safari wasn't having it.

Thanks that works great.

Pretty conistant across both platforms now.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My strange Font problem. Mac

I'm sorry that my suggestion didn't work but I'm glad that you sorted it out with Chris's help. I find it very frustrating that IE will not re-size pixel-sized text; but then again maybe IE has got it right and the others are wrong because if a designer specifies an exact size then that's the size it should be! Personally, this issue is not an issue for me because on every site I now produce, I size everything in exact pixels and offer the user a selectable option for the text size (with layout changes to accommodate the larger text) that I carry through the system using a variable in the URL. This is why I am not overly familiar with what IE will or will not do regards re-sizing.

Life's a b*tch and then you die!

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

thanks for all your help on this.

One small thing though:

The body {font-size:10px; _font-size:65.2%; }

does not make it past the validator.

I have used this:

body {
font-size: 62.5%; 
} 

html>body {
font-size: 10px; 
}

which seems to work.

One other thing is that on my mac anything below 1 em (which means below 10px) is not really readable which means that this still does not work brilliantly but is a lot more consistent. To be honest I don't think I would ever want to go below that anyway.

My take on all this is sometimes you do just want the font-size to be small - maybe for navigation maybe because when someone first looks at a site you don't want them to have to scroll on the opening page.

If it is too small then the option has to be there for people to scale the text and as long as the layout doesn't look totally broken I am happy.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My strange Font problem. Mac

I've just looked at all my browser preferences and can see that in every case the default font size is set to 16px. Thinking about it, I guess I must have set them this way when first installing the first version in each case (subsequent updates carrying over the setting to the new versions, which may be why I can't remember changing the settings in the first place). Could it be that all you need to do is change the default setting of your browser? Could it be that other Mac owners already do this as a matter of course but like me, cannot remember doing so all those years ago? Now that WOULD be a simple solution free of nasty hacks :-k

Life's a b*tch and then you die!

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

Ahhhhh! found it! I looked through my preferences before but for some crazy crazy reason I could not see it. I think it's from years as a PC user.

This does really help and I feel slightly foolish for not seeing that one. - :oops:

one small thing that I am not that bothered by though to be honest is that on my test page:
http://www.loungepenguin.co.uk/pages/font_testpix.html

on my PC I can still read it at .9em but on the mac I can't so there is still a little bit of a difference (although at least now I can compare properly and I'll never go below 1 em(10px))

Do you think this is something to do with antialiasing? is there a way to turn that off on my mac?

I suppose the other thing to think about is why was my Mac set to 12px? would others be the same? maybe setting it at 16 in the body isn't such a bad thing.

There again - Enough is enough, I am off to get get some sun!

thanks for the help

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My strange Font problem. Mac

Well I feel silly for not mentioning this in the first place but I kinda assumed you'd already played around with your browser prefs so didn't give it too much thought.

I guess the difference in readability at .9em might be down to the font smoothing (as Apple calls it); or it might be because the font is constructed slightly differently to the PC version, giving a different m-width and/or x-height; or it might be that your two monitors have different native resolutions and therefore suit particular small font sizes better on one than the other; or it might be that Uranus is conjuncting Mars this week. Who knows!

You can control the type (CRT/LCD) and degree of font smoothing via the 'appearance' section of your System Preferences, but why would you want to? The superb smoothing of Mac fonts by default is one of the instantly noticeable differences between a Mac and a PC.

Apple probably suggests 12px as a browser default (if indeed that is the case) because 12px is a far more sensible base size than 16px. The problem is that because IE is so popular, designers like us have to work to Microsoft's idea of a default! Turn your stylesheets off on a default-set Mac browser and you'll probably see a much better looking page than the huge fonts that you'll see on a PC.

Life's a b*tch and then you die!

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 8 years 42 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

My strange Font problem. Mac

It would be good to know if 12px is the default for macs as I bet a lot of people don't change it to 16px. If this is the case then maybe it would be good to use the method I was using before to force every browser to display 1em at 16px.

Reading through Google it does seem as though this is a common problem and is the default but I would like to know for sure.

Maybe I'll start another thread and a poll.

Thanks for the help again