Hi, I'm about to get started on a css-based template. Except I've used to have so much problems in the past with font sizes on Mac and Windows, where the fonts on a Mac are smaller than that of on a Windows machine. I'd like to know a definite solution to the problem so I don't make the same mistakes again. Well, first of all, is there a solution? I've been searching online but most of the resources are kinda outdated... Thanks. edit: oops, after all that rambling, I forgot to ask my question. which type of font-size is the most universal? pt, em, px, or %?
Loaded question - though 'smaller' on Mac is usually not an issue, if anything they tend to calculate a hair WIDER on the Mac. In either case, since you cannot always rely on the same font being available on all platforms, I suggest that if the width of a single word or line of words you cannot have wrap is important, use the same metric as your container, and make sure that container is 10-15% wider than you 'need' it to be so if someone does view on a machine that uses larger fonts, your layout isn't COMPLETELY broken. Which brings up an important point about things like headers and buttons - Most of the time you don't want these types of items to wordwrap, especially if you are using a fixed image as a background - if the container is in px, use px, if it's in EM, use EM. Your metrics should match, otherwise it WILL BREAK SOMEWHERE unless you take the time (and extra code) to make said elements DYNAMIC in both width and height. (which on buttons is often not an option without a great deal of extra code) When discussing the font types most people harp on and on about the book meaning of the measurements ignoring that the IMPLEMENTATION varies wildly from OS to OS and browser to browser. In the following a number of things I'm going to say will fly completely in the face of what a lot of your 'zealots' say, takes a dump on the books, and makes a lot of so called 'experts' look like retards. %/EM - These are both pretty much the same measurement, 100% = 1EM in most every browser. The advantages of this font style is that IE6 and earlier allows the user to resize text measured in this metric... because of this many of your more zealous types have begun a battle cry to 'ONLY EVER USE %/EM' - which is total bullshit. Because it resizes with the 'system metric' in Opera/IE, it breaks layouts on fixed elements on 'Large font/120 dpi' machines. Because gecko based browsers ignore the system metric on their default font size, it means inconsistant cross-browser behavior and being 'large font unfriendly' in FF. Because they both mean factional values, they introduce rounding errors because no two browsers round off numbers the same way either... There is a LOT wrong with using this font type, because of that and the rabid zealous pricks that yelled at anyone using any other measurement - I pretty much discounted using it wholesale. In TESTING, I've revised that opinion and come to the conclusion it is an adequate choice for content areas of sufficient width and dynamic height, but using it on any other type of element is just asking for your layout to break somewhere. px - the easiest to explain because it means pixels, it is also the most mis-used and poorly used. It does not resize with the system metric meaning anything smaller than 12px is USELESS at default zoom to 'large font' users, and does not allow you to resize it in IE6/earlier. Oddly enough the NOT resizing it is the CORRECT behavior (sorry gecko) as a pixel should remain a pixel. If you ARE going to resize PX sized fonts, you should resize px sized elements like images as well so the layout doesn't break - This is where Opera and IE7 get it right, leaving firefox and other gecko based browsers to continue resizing text like the sweetly retarded cousins of Netscape 3 that they are. PX should be used whenever you want the text to ignore the system metric in all browsers - aka when you are putting text inside a fixed height/fixed-width container, like over a background-image that cannot grow in height/width (like a uber styled menu button) so at LEAST it's not broken at default zoom on large font machines. IF you are going to use PX, for **** sake use a size LARGE ENOUGH IN THE FIRST PLACE that people don't have to dive for the zoom... anything less than 12px is a total /FAIL/ on usability, and I get twitchy below 14px.... See phpBB - any default skin I have to zoom in 50% to make useful on my computer is very unlikely to get return visits from me. pt - Much maligned in recent years, it was the DE-FACTO choice online from when CSS was first introduced... why? It obeys the system metric in all browsers automatically resizing 25% larger on large font machines. There is a reason it is the default font size in YaBB, SMF, vBulliten, text-entry boxes - it doesn't alienate large font users in either netscape or IE, meaning they usually don't need to use the browsers text-resizing in the first place. LIKE %/EM it has issues in fixed-width/fixed-height containers and should not be used in those circumstances - and like px you cannot resize it in IE6/earlier. Seven years ago all the zealots were screaming 'ONLY USE PT', just like today you have the zealots screaming 'ONLY USE %/EM' Both PT and PX have an advantage of 'granularity' - they do not introduce an extra floating point number to the equation meaning one less place for the differences in rounding techniques to show up. PT still does not correspond to pixels though, so you need to remember the line-height will likely NOT be always the same across browsers. Remember, FF rounds all fractions up (1.1px = 2px), IE chops all fractions off (1.5px = 1px), and Opera rounds fractions off (1.5px=2px, 1.1px=1px). Fact is, each metric has their own best uses - there is NO silver bullet single font sizing technique that does everything well - so it is a matter of 'best tool for the job'. IDEALLY your CONTENT should at LEAST obey the system metric. Non-content things like adverts, menus, etc, usually being in a fixed width column on the other hand should probably be the same metric as their container... and if you actually do this crazy thing called 'USING FONTS BIG ENOUGH IN THE FIRST DAMNED PLACE' you won't have issues... 10px is a /FAIL/, 0.5em is a /FAIL/, 8pt is a /FAIL/ - in that way at least If anyone out there doubts the above, have a look at: http://battletech.hopto.org/for_others/font_test.html Which illustrates the various 'issues' with each font metric in each browser... oh, and notice who the odd man out is, it's not IE, Opera or Safari.
One more thing - Test, Test, Test, Test again then test some more in EVERY browser you can lay your hands on - we've got no excuse for not testing for Safari anymore from WindowsLand, and I highly recommend testing in both large fonts (120dpi) and small fonts (96dpi) windows settings as well... Best way I've found to do that is running a copy of windows under a VM like VMWare, Parallels or M$ VPC using the metric you are not running - in my case I run win98 small fonts under WinXP large fonts - which also gives me a native testing environment for IE 5.5, and let's me have multiple versions of FF, Opera, etc installed without worrying about them conflicting with each-other. And having a VM available lets you run linux too... or run windows under linux for testing without the BS Wine headaches... Or for Mac users Parallels lets you run all those windows proggy's.
To sum up (and in addition to) what deathshadow said, get the latest copy of Internet Explorer you can (that will usually be 6 or 7 depending on your OS) and are comfortable with, then if you're not comfortable with using a virtual machine (or don't know how, don't have enough memory or hard disk space, etc) go to http://tredosoft.com/Multiple_IE and download the Internet Explorer standalones. You'll have to hack - I mean modify - the Windows Registry to make conditional comments work in them, but it's well worth the effort. Follow the instructions PRECISELY AS THEY ARE GIVEN as any mistakes can and usually will screw up your operating system so bad you'll have to either use Systems Restore or just flat out reinstall Windows completely. Then go to www.getfirefox.com http://browser.netscape.com http://sourceforge.net/projects/kmeleon www.opera.com/download and www.apple.com/safari and get the latest versions of those browsers (Safari is a beta on the Windows operating system and should not be used for general browsing - use it to test YOUR Web sites and NOTHING ELSE, don't even test other people's sites unless you create a local copy of the HTML and CSS code and are confident that the JavaScript code won't bend you over the table sideways). Then test in each of those browsers as you go along. For the IE standalones, you don't need anything older than IE 5.01 - if you only care about IE 6 and 7, you can safely ignore the older versions (I still test back to 5.01 but that's just me, and I only care that the sites work that far back, even if they don't look 100% perfect).