I'm not sure if this has anything to do with the recent Safari update, but I'm beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts.
for instance, I took screenshots of what I am seeing here on stackoverflow...
http://twitpic.com/q43eh
I have verified that this is a trend via my co-workers machines.
has anyone noticed this or have any thoughts on non-hack solutions?
Font rendering isn't specified anywhere in the standards and therefore may (and will) vary between browsers and platforms.
In particular, Safari on Windows renders fonts like OS X does which tends to look weird to Windows users as Windows has quite a different take on how to render fonts than OS X.
You can definitely notice this, especially if you use Expression Web SuperPreview. This is just a general problem of the web, just like folks can hit Ctrl-+ and make your text bigger. Try not to use many absolute coordinates in CSS and the layout engine will ensure it's still readable
I first noticed this in OSX in October 2010. It is especially noticeable with Helvetica Neue. I suspect that an OSX update broke font anti-aliasing in font sizes above 12 pixels. I've posted an Apple Support message here.
Related
I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
I have developed a site on my MAC. The footer looks good in IE, Firefox, Safari, Chrome but when I look on to a PC it appears that the font is rendering differently and pushing information into the social icons I have placed.
I am using Verdana.
The site is: foodworkscolorado.org/donate
Ideas?
Fonts are going to render differently on any system you test it on. That is life on the web... as it should be. Websites aren't supposed to look identical... they are supposed to display in a variety of formats and ways.
Since you are using a web-safe font, I suspect the issue has to do with the difference between Microsoft's "ClearType" rendering and the anti-aliasing method on a Mac.
The best you can do is test using a service such as http://www.browsershots.org and be aware of the differences.
You may be tempted to use images for your text... don't do this.
I don't like Microsoft's font rendering.
I've created a site for a client and the last unticked box on my debugging list is the biggest. (it's not 'live' yet btw so please ignore any other bugs - http://baked-beans.tv/bb)
I'm using font-family to import a non standard web font. It renders fine on Mac, but it looks like sick old man on its last legs on PC.
The biggest irony is that the font is actually ok to read in internet explorer 8. This is the first time I've EVER seen IE beat other browsers in anything. But anyway, the font doesn't look good in FF, Chrome, or Opera, on a PC.
So my solution is to serve different fonts to PC users. There are a lot of css hacks for different browsers, but not for different OS. the php OS detections are really really complex. I'm just looking for something simple like if(PC) do this; else do that;
Any advice would be immensely helpful
Just one other thing... Just wondering if there is a way I could prevent Windows from anti-aliasing type on the Internet? The reason why it looks so bad is because it's trying to anti-alias it, maybe if it left the poor font alone it wouldn't look so bad.
The CSS Browser Selector can target different OS's. :)
No, you can't "kill" anti-aliasing.
But, you could use http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/ for detection.
From what I saw only the headlines are crap so you could as well use http://cufon.shoqolate.com/generate/ for those and make your life easier.
My favorite article on this topic is here:
http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems
There is a lot of good discussion including TypeKit developers on the reasoning behind that, and it has a link to an interesting article about using JavaScript to detect whether font smoothing is in use (you definitely can't do it with CSS alone).
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
Good luck.
Please check this screenshot!
alt text http://img267.imageshack.us/img267/1391/difference.png
This is the same page in Linux FF (on the left) and Windows FF (on the right, also it's displayed in the same way in IEs). I love how it looks in Linux FF and want to have the same look in Windows. However after playing with all CSS properties I know of, I didn't manage to change its look in Windows. Do you by chance know any solution for this issue?
Just in case: as a webdesigner you can't control pixel per pixel how your site will display on your user's browsers. Print and PDF are great for that purpose, not the web :)
Is Cleartype activated on Windows? This changes the display a lot and it's the user decision to activate or not this feature: if he doesn't like antialiasing you'd piss him off by forcing the rendering we can see on the left!
You can also change your stack of fonts in font-family and add other fonts than Arial.
You don't get to decide how the user's fonts look. The exact choice of font and whether it is anti-aliased is a client-side setting. Some (terrible luddites, IMO) prefer the pixellated look. In any case, Linux is likely to be using a lookalike fallback font (eg. ‘Sans’) rather than Arial itself, so it's never going to look exactly the same.
To turn anti-aliasing on in Windows for most fonts (in all applications, not just web browsers), you need to enable ClearType. Without ClearType, Windows's anti-aliasing is the old broken ‘font smoothing’ option, which for most fonts is so poor that Windows prefers not to use it. ClearType rendering isn't quite the same as the anti-aliasing Linux will be using; usually it only anti-aliases in the horizontal direction. So again it won't quite look the same, but it's generally considered pretty good at least for the Latin alphabet.
If you're really desperate to push it from the server side, you could use a #font-face rule to embed a font that has the GASP table hacked to always use anti-aliasing (using a ttfgasp.exe or a font editor). However doing this to Arial (or indeed most fonts without an open licence) would not be technically legal.
You can easily get the same look (or at least similar) by activating font smoothing in Windows. You can not, however, activate it using CSS.
Font smoothing is on by default in newer versions of Windows, so a lot of visitors will see it as you see it on your Linux system.
This is a user setting, and that is as it should be. Each user should be able to choose the smoothing setting that works best for him/her on his/her monitor.
If you absolutely want the text to look like on your Linux system for every user, your only option is to make it an image.
Different versions of Windows and Linux, and even different settings of their font rendering systems, yield different results in font rendering; in the first case antialiasing with subpixel optimizations for LCDs is clearly activated, while in the second case not even antialiasing is enabled.
To get nicer looking font rendering on Windows you should enable ClearType. In any case, it's all a client-side settings, and AFAIK you can't do anything for them from HTML - and you mustn't, if the user don't like antialiasing you shouldn't mess with his settings.
I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.