Hello Old Friend
Remember back in the good old days? The days when our stylesheets were littered with ‘px’ font sizes and all was naively well? Guess what? Those days are here again.
For quite some time now I’ve been using Yahoo’s great font and reset styles in every new project. Basically, they normalize font sizing issues using percentages. 100% is 13px and they have a chart up and down to attain the other pixel sizes you may need.
The other day as I started a new project, it hit me. Safari is now on ‘roids. Firefox 3 is not too far behind. And Internet Explorer 7, well IE7 now does the ‘zoom’ of the whole page rather than just shifting font sizes up. The only browser that has problems with resizing pixel-based font sizes is Internet Explorer 6, right? And now is the time, if there ever was one, to begin IE6’s deprecation.
I’m not gonna lie, I immediately fired up my text editor and starting littering, nay, joyously smashing ‘13px’ and ‘48px’ (just because) all over my stylesheet. And you know what? It felt great.
Now there are those who enjoy percentages and em’s already and they probably won’t take kindly to this but frankly, I just don’t enjoy math that much [1]. I hereby declare pixel font sizes safe to use once again.
body { font-size:12px; }Note: I checked around with a few people to make sure I wasn’t hog crazy before posting this. If I am in fact hog crazy and coincidentally the people I asked also are, feel free to point it out in the comments. I’m not above being wrong.
[1] I was going to be much more harsh on those who would continue to use percentages and em based font sizes, telling them that they were obviously wrong, but I’ll leave that kind of stuff to Jeff Croft. :)
Post and Author Info.
Published October 09, 2008 by:
Commenting is currently off for this post.
So far there are 33 comments.
I’m with you on this one; long live pixel font-sizes in CSS! This doesn’t take away from the artistry involved in creating liquid em-based designs, but it’s simply not a requirement with the modern browsers already on the average users’ machines.
October 9th, 2008
I would love to deprecate IE6 once and for all and you may be right for websites addressing the general public. But latest stats and research unfortunately points out that within corporations, IE6 still rules the game:
Specifically, approx. 60-70% of corporations will stick with IE6 for internal web-apps until it’s safe to adopt IE8, skipping IE7 completely.
For us poor web-designers this means we still have to cope with IE6’s abysmal zooming behaviour if we want to write and deploy accessible websites/web-apps.
October 9th, 2008
@Michael – IE6 support is only a conditional comment and a stylesheet away. I’m not saying leave it in the dust, I’m just saying start coding for the new and support only what you have to. If we never push forward, we never move forward.
October 9th, 2008
You missed the boat by one day :)
http://mezzoblue.com/archives/2008/10/07/zoom/
October 9th, 2008
I agree, out with percentages and in with absolute pixel sizes. Personally I never quite got to grips with the whole percentage thing anyway, perhaps also becuase I was never that great at Math. :)
October 9th, 2008
@John – Yes, I love conditional IE6/IE7 stylesheets and use them all the time. And I totally agree that we should serve damned IE6 a potentially lesser user experience than modern browser in order to get rid of it over time.
But having written large-scale, accessible web-apps with liquid/elastic layouts, I’m quite afraid of fumbling with lots of font-size adjustments within an already crowded IE6 stylesheet.
When developing “public” websites/web-apps, I already surrendered to classic px-sizes, knowing IE6’s rapidly decreasing market-share (as low as 30% in some countries). But when you have to deliver accessible web-apps with rather complex GUI features for corporations, .gov or .edu, you’re easily dealing with 1000 – 5000 lines of CSS code.
From my experience, you’ll need about 15-20% of the CSS code on top of that to build a working IE6 stylesheet, curing all those pesky IE6 CSS bugs. Adding font-size issues to that bloated thing easily kills my joy when using px-units in the original CSS.
It’s great that especially .gov and .edu customers demand full accessibility for websites/web-apps nowadays – we had a hard time convincing them about that. But getting there still calls for proper font-size handling within IE6, and with minimal fuss for the web-designer.
October 9th, 2008
Welcome to the club: http://wilsonminer.com/posts/2007/mar/16/problem-pixels/
;)
October 9th, 2008
I’m using pixel font sizes most of the time together with an em based grid system. IE6 gets its font size in percent with a conditional comment just to support people who still use the browser.
October 9th, 2008
Been doing this myself for a few months now. And you are right, it’s such a good feeling to ditch the brain-warping maths :) Intriguing how the idea is spreading now, but it’s about time. Death to IE6! ;)
October 9th, 2008
Michael said, “It’s great that especially .gov and .edu customers demand full accessibility for websites/web-apps nowadays”
Agreed, though I wouldn’t be surprised to see a lot of them running out-dated browsers. I’d love to be shown otherwise. And to facetious, I don’t think IE6 can be considered “accessible” so should NOT be programmed for to help users gain a more accessible program and experience. ;-)
October 9th, 2008
@Wilson – Oh, yeah, brag about how you have 2007 in your articles url. Some of us take a little longer to come around. :)
@Jan – Exactly. Easy to do when it’s “needed”.
October 9th, 2008
@Philip – I won’t consider IE6 as an accessible “content-viewing tool”, too. But when you want to land a job, you have to cope with the minds and expectations of your customers, be they as bad as they are within a reasonable scope of due diligence.
Sometimes, I think IE6 is like a zit you’ll have live with until you finally reach adolescence, years from now. No matter how hard you squeeze it, no matter how much of Clearasil you apply to it, it keeps coming up again and again, giving you a bad feeling and causing lots of trouble.
IMHO, we’ve reached the end of CSS
puberty right now but haven’t yet entered the state of blissful adolescence ;)October 9th, 2008
As web developers, It is not our job to pander to those who aren’t willing to use tools suitable for their situation.
We don’t implement speech-synthesis for our websites, we expect blind people to find a browser suitable for their uses, eg JAWS. As long as we design websites with a sensible baseline font size that is comfortable for about 95% of people, we don’t have to worry about using ems or percentages for scaling – the other 5% are more than capable of getting a free web browser that provides the text resizing functionality they need.
Worrying about IE6 has nothing to do with accessibility. As long as your site is presentable and feature-complete in Internet Explorer, your work with it is done.
October 9th, 2008
Obviously IE6 has issues with text resizing, but to be fair, if somebody has difficulty reading 12px text, then they need glasses or assistive browsing software.
October 9th, 2008
Andrew said: “As long as we design websites with a sensible baseline font size that is comfortable for about 95% of people, we don’t have to worry about using ems or percentages for scaling – the other 5% are more than capable of getting a free web browser that provides the text resizing functionality they need.”
I’m disagreeing here strongly, though humbling: Most of those “5%” have no saying and influence about the browsers they use for accessing websites/web-apps when it comes to corporations. This is a very, very sad fact we have to cope with as sensible web-developers.
Actually, those “5%” are more like 50% or more when you define your target audience within corporations, leaving aside one’s personal hatred for that situation (mine included!). I’ve given up recommending better browsers to individual corporate users a long time ago. They simply can’t have it when IT isn’t allowing or supporting it. We all know how much superior FF3, IE7/8, Safari or else are, including additional tools like JAWS. But we can’t overrule the IT department’s standards in a matter of weeks or months.
Regarding our work’s “done” state, it’s still the customer’s final call about that, no matter what we think, believe or know better. Most of us web developers don’t have the money and/or stance to walk away from a job, when we (rightfully) disagree with such restrictions.
October 9th, 2008
@Dan – try that on an Apple Cinema Display or other monitors with megapixel resolution. You’ll be astonished how small 12px text can appear. And we shouldn’t forget how gifted we are with our “special” knowledge about resizing browser content. The majority of users isn’t even aware that this feature exists!
October 9th, 2008
@Michael – I was largely speaking about what I believe should be the case, rather than what actually happens
If you have a visual impairment that requires you use a different web browser to be able to do your job, I’m fairly certain that your employer is under a legal obligation to provide this for you. They usually provide back-supportive chairs, foot rests, monitor stands, wrist rests if you make enough of a fuss about it. Heck my IT department installed some software on one employee’s machine that forcibly prevents user input for 10 seconds every minute or something due to the employee having a medical condition that required breaks of that frequency.
October 9th, 2008
@Andrew – I’m totally with you regarding our mutual beliefs. And I agree with you when it comes to legal obligations for providing accessibility tools for impaired users. They are in place, thank God!
Hence, as my own eyesight gets worse over the years I’m catching myself increasing font sizes in the browser more and more. Lucky me, I’m using Safari on a Mac where it isn’t a problem, but I feel really sorry for all those other corporate users, not being really “impaired” enough to accept or being awarded additional tools to do so, as their standard browsers aren’t capable of zooming the “right way”.
Sometimes, smal legibility issues are all it takes to make or break a website/web-apps when users vote with their mouse. IE6 be damned in theory but supported in practice, that is (for now).
October 9th, 2008
Man, I wish ours and our clients’ analytics showed that IE6 was around 2%. As it stands, we’re still seeing between 20-30% or more. :(
October 9th, 2008
One major anti-IE6-stance I noticed recently was Apple’s decision to totally deprecate IE6 from using MobileMe. This one’s a first regarding the scale of their audience and I applaud their decision very much!
Hopefully, other will follow …
October 9th, 2008
Word.
October 9th, 2008
@Jeff: Word indeed.
October 9th, 2008
I’m pretty sure people who use IE6 aren’t even aware they can(‘t) change font-sizes – or anything, for that matter. They are the ones who accept everything as is, even Windows … ;)
(I know: I’m generalizing, poor corporate slaves, etc.)
October 10th, 2008
The really fun thing is that I never stopped using px since I figured that some day this would happen ;)
October 10th, 2008
I was surprised to see this post since I did the same thing a few days ago and have not looked back. I use to use this:
body { font:62.5%/2
To reset everything back to 10px and then use EMs from there.
October 10th, 2008
IE6 really needs to die. http://iedeathmarch.org/
October 10th, 2008
Well, perhaps I’m just a lazy developer? I never really got into the whole em thing. I’ve always been happy to use px :)
October 10th, 2008
Oh yes. I’d actually like to see stats on how many IE6 users ever resize the text on a page using browser controls; based on what I’ve seen over the years, most users don’t even know browsers have the ability to do so, and as it probably gets used by such a small percentage that I’ve had a hard time caring about the “ems” issue all that much. If I’m designing a site that has a need for alternate type sizes, it can be done with JS and alternate stylesheets, which is still a valid approach (and doesn’t depend on a particular browser feature).
October 11th, 2008
I started using px sizes again in the stylesheets about a year ago too. Life is so much easier now.
October 12th, 2008
I got you.
October 14th, 2008
There are plenty of reasons to use ems instead of px besides text resizing in IE6. I don’t even support IE6 anymore, but I use ems because relative units are necessary to ensure that text is readable on all displays and devices.
I have to disagree with “if somebody has difficulty reading 12px text, then they need glasses or assistive browsing software”. The readability of 12px can vary greatly depending on the pixel density of the user’s display. As resolution and pixel density increase as new monitors are released, text using absolute units becomes harder and harder to read.
And a final point, declaring font sizes with px overrides the browser’s default font-size settings. Instead of the text scaling to the baseline preferred by the user, they are forced to use text/page zooming to make the text readable.
October 22nd, 2008
I’ll be 100% honest…I never made the switch to em based…and very rarely used percentages for my fonts. I have, pretty close to all of the time, used pixel fonts for all my internal and external projects. Never once did that cause a problem with design or development.
I am very happy to see this come back full circle again. And I am very happy that I am now joined by some of the elite in this process of thinking.
November 6th, 2008
@Terry – It was never a design or development reason that people moved away from pixels, but for accessibility. Pixel fonts couldn’t be resized in IE.
November 6th, 2008