Just wondering how come final website deliverables (HTML/CSS) end up not looking exactly (pixel perfect) like the layout that was designed in Photoshop? For examples, 14pt in PS is not exactly 14pt in HTML. Why?
Because different browsers have different rendering engines.
In particular, a font may be rendered quite differently between the various browsers and operating systems in current use - Safari and MacOS use more anti-alisaing than Firefox or IE, but IE9 has a new feature called ClearType, which also affects font rendering.
The end result is that between the various browsers, there can be significant differences between how your fonts look, to the point that it can affect your layout.
This site tries to explain it a bit better: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
The bottom line: Don't design your pages to be pixel perfect -- you will be dissapointed. HTML and the web just don't work that way; accept this, and you'll have a much happier life.
(Oh, and there's also the issue of not even getting the same font, if you specify one which isn't available on the user's browser).
Related
OS: Win 7 64bit
Browser: FF 24.0
If I go to http://www.google.com/fonts it looks awful:
And when I load one for my site locally it looks equally as bad but here is my configuration that I generated from fontsquirrel below:
#font-face {
font-family: 'SecretSans';
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot');
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.woff') format('woff'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
Because it looks just as bad on the site above and my own site I presume it's an issue with Firefox and/or Windows.
Is there a fix/configuration that will work for all users hitting my site that doesn't require them changing any settings within Firefox or Windows as that's obviously unrealistic.
EDIT1: I just went to Control Panel > Fonts > Adjust ClearType text and now it renders properly in Firefox... I can't ask users to do this though so I'm hoping there is another way
I know this thread is from the stoneage, but unfortunately the problem is still current. And if you google for the choppy fonts problem, it's in the top 10; so I want to add my 10 Cents of experience with it!
Ok: If you search Google for problem with fonts under Vista/Win 7/Win 8, you find two major groups of problems that are both related to ClearType in many cases. Not all! But many.
Group 1: Blurry Windows fonts
If we talk of "Windows fonts" we are talking of the user interface (menus and such), and the "workspace" of office apps like Word or Excel.
This problem hits almost all people that do not have a 16:9 widescreen monitor that is HD capable, esp. classic office-type monitors of 19" and 1280x1024 resolution. The keyword is "Low-DPI" here.
For those who don't know: ClearType does a HORRIBLE job on these Low-DPI monitors and renders the whole interface in such a blurry way that trying to work with it causes massive eye strain and headache. Really folks, it gives you eye cancer!
(and no, you can not recreate that prob' on a Full-HD monitor!)
The only way out is to disable ClearType. This helped almost everybody of group 1 - including me.
Group 2: Choppy font rendering in Firefox and Chrome (rarely MSIE)
In many, many cases - like in this thread - ClearType was disabled. And when re-enabled, the browsers do render fonts just fine. True for me, too!
Unfortunately... when I re-enable ClearType, I'm back in group 1!!!
So: EITHER I have ClearType disabled and can work with a sharp and clear Windows for hours without fatigue of my eyes - but then I have to live with choppy webfonts in FF and Chrome.
OR I re-enable ClearType to see the nice and nifty fonts the designers have chosen for their oh-so-stylish websites - and live with the headache Windows gives me due to the blurry fonts! :-(
Obviously, I'm going the first way.
And if I stumble about a website where fonts look like broken, I simply toggle the usage of webfonts with just one mouse click - there's a great FF-AddOn for that.
Oh, I forgot: Why seems MSIE to render the fonts nicely?
Well, IE (at least 10 and 11 to my knowledge) always uses ClearType to render a page - no matter if disabled in the system settings or not.
Of course, it then also shows the blurry fonts problem - and makes me remember why I have ClearType disabled. And will let it so!
Final thoughts:
Programmers believe webfonts to be the final solution to all of their design-needs, thinking, they have everything under control by testing their stuff on a couple of default systems. In fact, webfonts just made a well-known problem freak out of any control - because there is no such thing like a default user!
Think about it.
I am pretty sure it is just how the browser renders it. Especially with #font-face stuff (I am assuming you used http://www.fontsquirrel.com/ or a similar site to generate it). You can use a little bit of text shadow to make it a little bit crisper, but from what you have shown, I think you might be better off trying to find another very similar font that will render better.
This was obviously because you had ClearType switched off. It's the method used to smooth the edges of fonts on computer screens (LCD). It has nothing to do with the method used in the webpage to attach them, this is strictly a font rendering issue. Fonts may appear differently depending on the system, as each has a slightly different method of rendering them - they tend to look best on Apple systems, while Windows seems to have a somehow inferior rendering method. This is entirely up to the system that is running, so the fonts will render differently for various users. Also, professional fonts from big foundries generally render much, much better than free, open fonts, because they're specifically corrected to optimize how they're rendered on screen, especially when they're rendered small (below 20px size), so the roughness of fonts from the Google Fonts set might also in part be due to the fact they're not as carefully crafted as those professional, expensive ones. Nevertheless, regardless of the font quality, text will always look uglier and choppy if font smoothing is switched off (or not supported), so there is nothing you can do. Stopping yourself from using custom webfonts because you're worried about the fraction of users who have font smoothing turned off is will stop you from using them at all.
Often, even with a reset stylesheet, things will show up a little different from browser to browser, or on different platforms (especially with mobile).
I'm just wondering if there is any place that really breaks down quirks and differences between different browsers and platforms.
I've seen this for IE6.. which is great, but not the whole story! I've also seen a lot of lists of what is or isn't supported, but I've had less luck finding a place that lays out all the little niggly differences people have found.
For particular HTML, CSS and JavaScript features, the SitePoint Reference is very good.
Another similar resource is Quirksmode.org, "the prime source for browser compatibility information on the Internet".
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
Chrome 5 was recently released for Windows, Mac, and Linux, all with the same version number. Are there significant differences in behavior (CSS or JS) between the different platforms, or do they behave pretty much the same?
I'm not interested in how they handle extensions -- just handling of HTML, CSS, and JavaScript.
The only thing to worry about are fonts, as these are (or may be) different or even unavailable on different platforms. The main problem that can arise from this is that fonts are wider or narrower than the ones for which the design was made, thus breaking some elements (for example, if the fonts are wider, certain text blocks will break onto more rows than intended, making the design look out of place; if the fonts are narrower, "gaps" might appear).
There are two solutions for this:
Use a generic font family (such as sans-serif) and while designing take into account all platforms that you wish to support;
Use #font-face, which is supported by all major browsers (except for IE) -- including Google Chrome. This way, you will be able to provide a fully consistent look across all platforms.
Other than the fonts issue, there's nothing to worry about. Both the layout engine (that takes care of HTML and CSS) and the JavaScript engine are the same across all platforms.
Useful resources for fonts:
#font-face - Mozilla Developer Center + most of the links in the See Also section of that page;
Google Font Directory - Google provides a nice API for using webfonts.
So, there are 2 issues here:
why does it look different (on IE it is bolder, more anti-aliased)
how do I make the Mozilla rendering look like the IE one and what impact does this solution have (I am looking for minimal changes, so solutions such as - flash, silverlight or using images are out of the question)
IE looks different because it is using "Clear Type" for rendering the fonts, even if it is not enabled system-wide in Windows. This is not something that you as a web page server can control, but rather is up to the client machine and browser.
If you want Firefox to look similar on Windows, go to Display Settings -> Appearance -> Effects -> "Use the Following Method to Smooth Edges of Screen Fonts" and select "Clear Type". This should apply the same font smoothing effect to Firefox. But as I said, that's up to the end-user, not you the server of web pages.
This site gives a good comparison of font rendering on different browsers.
Not exactly a "minimal change" but certain fonts and sizes look better/more consistent than others. I couldn't say which combinations off the top of my head but I have noticed that some fonts render a lot more bold at 16px than at 15px for example. Experiment and you might find something you can live with. Alternatively try feeding a different font-weight to IE using conditional comments.
You can't unless you can convince Microsoft to use Mozilla's rendering engine, or the other way around. So unless you use your 'out of the question' solutions it ain't going to happen. Font rendering is out of the control of a web designer..
I know you mentioned Flash is out of the questions but have you considered sIFR.
It degrades nicely for non-flash browsers and look the same on supporting browsers.