Hi there
Am having a few issues with the font on my website.
http://forevr-dev.co.uk/musicexplained/
For some reason the text in the header next to the logo, the text “share and discover”, and the text in the footer are much larger then they are in other browsers…
The font family for these elements is
font-family:“Lucida Grande”,Calibri,Arial,san-serif;
Unsure where im going wrong
Thanks
Thanks for your response…i got the 62.5% trick out of a Dan Cederholm book. Ok, will have a go with the changing the size from percentages to px to see if any improvements.
Cheers
OK, here is my take on it; which i assume is what the previous post have been hinting at .
I only skimmed your code but I sow bits like this:
body {… font-size: 62.5%;…}.
what will happen is the text of your page will be .625 the size of the DEFAULT size of the text of the browser. But DEFAULT TEXT SIZES VARY!!! Also since this is in the BODY TAG any change you make based in EMs or % will reflect this , since all subsequent tags are children of the body tag.
My recommendation is that you pick a px size at the body or html tag… this should then override the default giving all browsers a similar starting point.
I know its been a while since I posted this, but am still intruiged as to why the font on my site displays incorrecly on safari 3, its something I would like to rectify and be aware in future as would like my sites to display well on the iphone.
Any other ideas?
Thanks
Cool, yeah…i didnt realise there where such massive differences in the way a font will display when its set to the same size.
I think that back when Dan first wrote that book, it was considered a Good Idea in the web community at the time.
It’s just that the book didn’t get updated when accessibility-minded folks showed the problem with it.
I generally thought the rest of BulletProof Web Design was good.
Re fonts: It’s safer to make the fonts in a stack all be about the same size. Having different font stacks for things like headers vs plain text vs sidebar text is not a bad idea.
Hi there stomme, just wanted to say thanks for your thorough response…appreciated!
Ok, yes when I remove Lucida Grande and Calibri the font look more the same. I think I will use a different font for the header and footer that will display more similarly in safari as well as others.
Yeah, im not sure why im getting that choppy effect on IE7…
Suprising that such a mistake was included in that Cederholm book. It is a very good book as well, but people should be made aware that its not the best advice to follow, because I generally take what people say in these books with a lot of confidence.
I wish I had seen this thread earlier:
font-family:“Lucida Grande”,Calibri,Arial,san-serif;
Lucida Grande is muy Grande— HUGE. It’s a big font. Calibri is a very, very tiny font. Browsers with access to vista fonts are showing a very tiny Calibri (I don’t have that font, so my computer would likely show Arial instead). Vista fonts in general are rather small.
http://www.apaddedcell.com/web-fonts shows images of fonts, where you can see the size difference between Lucida and Vista fonts.
http://stommepoes.nl/fonts.png
My very first thought was that Safari is showing Lucida Grande while other browsers are showing Calibri. So… does removing both Lucida Grande and Calibri (leaving Arial which usually both Macs and PCs have), do the fonts look more the same size now?
Second idea: add Lucida Sans after Lucida Grande. I believe Windows systems have the Sans font which should look similar enough.
Here’s a screenshot of several browsers:
http://stommepoes.nl/multibrowsers.png
Clockwise from top left: Firefox 3.58 on Ubuntu Linux; Opera 10.6 on Ubuntu; Internet Explorer 7 on Windows XP (so no Vista fonts); Safari-for-Windows 3 (so no Lucida Grande I don’t believe as that comes with OSX not Windows); Firefox 3.6 on Windows. If anything, Safari on Windows shows the font slightly smaller… see the word wrapping. Without a Mac I can only guess that it’s indeed slightly bigger on real OSX. I really, really need to get a Mac for testing. : (
Most of these browsers should be showing Arial of some sort, because I’ve got msttcorefonts on my Ubuntu (so plain old Arial and Arial Black available) and that’s the first font in the stack the Windows browsers have access to.
Strangely, IE7 looked the choppiest. Usually with font-smoothing, IE is the only good looking browser on my WinXP set.
ARG Dan Cederholms’ book should be burned for that one little mistake!!! (hopefully there are newer editions without that). Because his books are generally excellent and he was unknowingly passing on a horrible, terrible myth.
(two threads about the problem of 62.5%):
http://www.sitepoint.com/forums/showthread.php?t=620506
http://www.sitepoint.com/forums/showthread.php?t=636866
One of those also mentions the benefit of using a % font on the body element for IE.
Setting a px font shouldn’t be necessary and if I’m correct about the actual font being used, it may not fix the problem anyway. Verdana at 12px is larger and more readable than Helvetica at 12px, even though they’re both… at 12px. This is again because Verdana is a larger font than Helvetica. It has a larger “x-height”, the height of a lower-case letter x.
Have you changed the default font size in that browser?
Pretty sure I havent…
Its happening on my friends computer as well, he sent me a screenshot…
Thanks
#indexWrapper h1, #indexWrapper h2 {
color:#434343;[B][U]
font-size:2.2em;[/U][/B]
font-weight:normal;
}
#share #intro {[B][U]
font-size:1em;[/U][/B]
margin:10px 20px 0;
}
Hi Ryan, could you please explain a little further to the mistake I have made there…
Also, any ideas about the footer text and the logo text sizes?
Thanks
I hoped my hint was sufficient :). You set font sizes and as a result they are different sizes.
Removing the font sizes will show them all equal :).
Just to clarify, I am trying to get the “share and discover” text, the text in footer, and the “musicexplained” text in header to show in safari 3, the same as it shows in all other browsers, because in safari 3 it shows the text larger for some reason…
Ah, well I just explained that it happens because of the font sizes.
FF/Opera also displays larger fonts (you say this is what you want)
What browser isn’t showing the larger font? Try clearing your cache, it should show hte larger fonts (and the larger fonts is because of you setting the larger font size in the CSS (I posted it above))
Every browser is displaying it correctly apart from safari 3…
In safari 3 the “share and discover”, “music explained” in header, and text in footer is much bigger than in different browsers, and am unsure of why…
Was thinking maybe safari 3 renders those fonts differently, or maybe deals with ems differently to other browsers
Hi,
I don’t have Safari-3 any longer, I updated to version-4.
From what I remember Safari-3 used to render the font slightly larger for me too, similar to mac.
That does not seem to be the case with Safari-4, it renders the same as FF for me.
The link isn’t loading for me now in Safari(I have Saffy3/4) but it is in other browsers?
The page is still displaying identical for me in Safari 3/4. Are you positive this isn’t a cache issue? I know you said it’s happening on your friends computer.
Very weird, now the site is displaying and I can see hte issue 
I do believe this is just Safari rendering the font larger then normal. There is no reason elsewise as to why it should be happening, that I can see (IMO) 
As long as it is not breaking the page I would not worry about it. Safari-3 users will be seeing things the way they see other pages.
With a horizontal menu: I have seen safari-3 (and macs) drop the last nav item down to another line when side paddings were set on a widthless list item. It was because the font was slightly bolder and by the time it got to the last item the space needed was not available.
Of course it just took a text zoom to drop the last list item in other browsers.