Font Size vs Zoom --- The only thing that's wrong with YUI's grids.css #
In the course of a recent code review, I got into a discussion with fellow Yahoo Webdev Nate Koechley, the engineer behind the YUI grids CSS.
YUI Grids is designed to give the developer a few microformat-style grid layouts that can be easily mixed and matched to create many different types of pages. It does something like what Blueprint does, but without a lot of Blueprint’s problems. I’ve been using it since it was released for internal use back when I was first hired here, and have really come to love the skeleton that it provides for building a page.
However, there’s one mistake about it that I routinely alter in my pages’ CSS. Standard or not, I have a personal gripe with flexible layout pages.
As someone with just-correctible-enough-to-drive vision (and maybe not even—I have a lot of trouble with street signs at night), I frequently bump up the font size in my browser. A big selling point that got me to use the very buggy beta Firefox 0.2 was that it could increase the font size of ANY web page, whether the designer “allowed” it or not.
People like me don’t browse from page to page with the font size increased. I scan through headings and links, and when I find something interesting, I increase the size to read it, and then zoom back out when I’m done. (Sort of like the iPhone: zoom into the newspaper article, read it, and then zooms back out to see the whole page.)
When I do this, I can’t stand for the columns to change widths. It drives me crazy. I add this to my CSS almost every time:
#doc {
width:950px;
}
When I say that it’s the “only thing that’s wrong with grids.css,” I really mean it. I can’t praise it enough, and highly recommend that every developer use it on every page they build. But fix the width.
On Aug 10, 2007, at 9:15 AM, Nate Koechley wrote: Tell me more about this. In general you prefer the page width to be fixed even as the text within it grows? I definitely understand that the introduction of a horizontal scroll is bad, but you dislike expansion even before it exceeds the vierport’s size? [sic]
Short Answer: Yes and yes.
Long Answer:
This is a tricky issue that the hardware and software worlds just don’t address very well. (Hopefully they will someday.) To make things more complicated, every user thinks that they’re 100% dead-on right, and we all seem to have a slightly different opinion about how it should work. I don’t claim to be an expert typesetter, but it is an ergonomic issue that I regularly run into and think about quite often.
Line Length Measurement
You hear stuff like, Lines of text should be about 4 inches (500px, 50%, etc.) wide at the most to be readable.
Really, that’s not the case. Look at a billboard—the ideal text width there is about 30 feet, some 10000pt font-size, or a skywriter which is even longer and bigger. Just consider how many millenniums it took for hand-written text to reach a good state, and then how many centuries it took to really apply those learnings to machine-printed text. If you want to see text layout done very very well, look at the print world.
Visually, size is measured in degrees. A column of text should be about 10-15 visual degrees. (10 degrees is about the width of your fist at full arm’s length.) The font size just needs to be big enough that you can make out the letters at whatever distance away you have to move the page to get it to that 10-15 degree width.
Lines that are shorter than this are easier to scan for relevant details, but harder to “savor.” That’s why newspapers usually have very narrow columns and text in books takes up almost the whole page. If the column is too narrow, you’ll tend to bring the page closer to your face–which is why newspapers can get away with very small text. It’s rare that someone reads a newspaper at arm’s length. (As people get older, and the muscles that focus the eyes on items up close start to weaken, many will wear glasses to zoom the text up to a comfortable width for reading at arm’s length.)
Physical Resizing
So, the width of a column should be about 10-15 degrees for most text (narrower for “scannable” stuff, like sidebars and alerts, wider when we are being really thoughtful and analyzing the concepts.) We’re unconsciously going to “zoom in” by moving closer to the target until this ideal width is reached. The font size should be such that it can be read easily from a distance that brings the visual column width to a comfortable range. So, you slide your chair until you’re at the right width, and then adjust the font size. Or, you resize the browser until the columns are where you like them, and then move the font around until it’s readable.
Most of the time, this is largely unconscious, which is good. However, you almost never want the line length to scale up with the font size, because the line length is already good—but the text is too small for the eyeballs to focus on it. (If it’s not, then you really need zoom, not a font-size change.) When I bump up the font size on a YUI grids page, the line length expands to occupy about 30 degrees of visual space, which is too much. The natural instinct is to slide my chair back, which means that I can’t read the text easily, or more likely, just get annoyed and move on.
This also ties into discussions about wide-screen vs. multi-screen, pixel density, and maximize behavior. Even if we say that we want to always have a fixed width, what may be perfect on one display may be obnoxious on another. I have a 24" monitor that is 1920px wide, but my browser window is usually around 1024. Sites that work well on 1024x768 (or 800x600) will be abusive on a 50" 1080p HD display, and vice versa. What we really need is a way to easily zoom in and out with one action, and adjust the font-size as a separate action. Also, it has to be so easy to do both that the user is hardly aware of the work involved—that’s the really hard part.
Moving Forward
Browsers tend to blur the distinction between zoom and font-size; they get users and developers to share in the error by frequently saying one when they mean the other. Opera Mini on my phone has a “zoom” feature that only changes the font size. IE 7 zooms images and column widths when you change View > Font Size. In the 2 seconds here and there that I’ve managed to play with it, it seems like Safari on the iPhone is probably the best implementation to date of zoom and font-size both done independently and well. OSX provides a “zoom” feature that’s pretty easy to use, but it feels klunky to zoom the whole OS just to read a web page.
Kathy Marks wrote up a great list of the best fonts for the web, and also has some great resources at the bottom of that page about typography. And of course, there’s iA’s classic article: Web Design is 95% Typography.
I should point out that full-width designs are good for some particular cases, but probably wrong for most. In the cases where it makes sense to size the page to the browser’s width, I don’t think it falls into this sort of problems. Flexible-width pages, however, are a nightmare. Fixed-width isn’t perfect either, but it’s better.
What we really need is separation between “zoom” and “font resize.”