Try This On For Size

Published 21 years, 9 months past

Ian Hickson complains that he can’t read meyerweb.com due to his high-resolution display being placed too far away.  Two words, Ian: Text Zoom.  Two more words: user stylesheet.  (Three words, if you prefer “style sheet.”)  You can make the Web more legible with this simple rule:

html, body {font-size: 1em !important;}

That will reset this site’s text to match your browser’s default font size setting, because I do use ems and percentages for all elements that descend from the body element.  On the body, I use a pixel value for font-size, thus establishing the basic size of text for the site, and every other element scales from there.  Reset that element’s size, and you change the baseline from which the rest of the site is sized (which is how the “advanced setup” text-sizing feature works).  The same will happen on the new DevEdge, as it happens, and on any other site that intelligently uses inheritance and CSS to size text.  The tools are there.  Use them to your advantage.

(Aside: I find it weirdly funny that Ian’s complaining about not being able to read my site, which uses valid CSS, when his site is almost completely unreadable in IE5/Mac thanks to his valid CSS.)

I’ve been trying to come up with a name for this font-sizing approach.  “Baseline sizing” is too evocative of the baseline used to lay out lines of text, which has nothing to do with this technique.  “Body sizing” sounds like it’s a weight-loss program.  “Right sizing” probably hits too close to home for a lot of unemployed IT folks.  Something to mull over as I nurse back muscles sore from shoveling wet, heavy snow and ice.


Comments are closed.