Screen font sizes and vision
Clearly, most web developers have better vision than I do. I am constantly scaling up font sizes in my browser to read other people’s layouts and the reason is equally clear in the .css page that I am wrestling with now at work. It starts with a “font-size: 74%;” as a body property and then scales up from there for titles and links. If you bump the font-size to 100% it completely breaks the layout (which is another issue).
Now that I think about it this may represent a prejudice on the part of web developers in favor of their fabulous layouts and attributing less importance to the actual content that will later be added by the stakeholder. Got to make it super-easy to navigate through the site to content which is too small for the site visitor to read.
So I bumped the body font-size to 100% anyway, and started working down the .css, reducing the element font sizes one by one to reconstitute the layout. But this leads to another observation; element names should be descriptive and should adhere to standards. It isn’t always clear what actual element they refer to without picking through the haystack to find a strand of hay with a particular serial number.
There’s a quick way to do this: open the .css in an editor, and Search for “font-size” from top to bottom. As reach each element, change it to 200% and hit ‘ctrl+s’ to save. Then ‘Alt+Tab’ to your browser and hit F5 to refresh. You’ll know immediately which element has been affected. Then ‘Alt+Tab’ back to the editor, set the element to whatever size you want, save, and hit ‘Find Next’. (This technique works with any property, and by the way it’s also a good time for adding comments to the .css page)
So here’s my message to web developers everywhere: “Some of us never had good vision to begin with and we’re not getting any younger. Knock off the itty-bitty type!”
This has inspired me to re-do the .css for my blog over Christmas break, by the way. The layout and other properties need spiffing up, and lately I discovered the .css doesn’t even load in IE7. So to you IE7 users out there, I apologize.
What tools do you use for css editing? Tried this?
I am not sure, but I think the problem with small fonts has been developing from this sense – I believe mistakenly – that everything needs to be immediately available to the viewer, so every possible link and advertisement needs to be on the screen above “the fold.” To get all that in, everyone shrinks the text, until all the user sees is a blob of color to indicate there is something there.
Granted, I’m a minimalist, but a nice reversion to “less is more” would be wonderful.
David, it’s so hard to convince people who seem to prefer a busy layout that less can be, indeed, more. More readable, more navigable, more content-focused.
This is particularly true of people who learned design for print layout and don’t understand that a screen is a low-resolution device and web pages have to be visually simple. Content can be complex but interface should not be. As Steve Krug says; “Don’t make your site visitors solve puzzles, unless it’s a puzzle site.”
Only exception to this might be a captcha, when necessary.
Ted, I use Expression Web at work because it is our approved application and I have to learn it to support it. At home I’m just as happy with Notepad++.