I’m enlarging my text, breaking your layouts

I don’t know if you read this when I was talking about my early Vista experiences, but with the sharpness of the Vista display and the effective font-smoothing it has, I am currently running my laptop at the highest resolution possible: 120 DPI with 1600×1050 pixels. At this size I can fit a lot of windows on my screen (considering I am usually running a handful of applications at the same time) and I rarely view any windows full-screen.

Unfortunately, not all fonts are very readable at small sizes and when it comes to browsing the web and reading as much text as you would find in a book, I have to set the default text size in my browser to be slightly larger than what most users have at 96 DPI. Therefore, while the default text size for most users is usually 16 pixels, I’m browsing the web at 18 pixels. It might not seem like a big difference, but it is.

What amazes me, especially when browsing so many standards-based, CSS-driven sites, is how many layouts break with just a 2 pixel increase in text size. I have seen so many websites with text falling right outside of their boxes or overlapping other text. It is apparent that a lot of designs are done with elements that are assumed to either fit on just one line or to fit in a small amount of space. For example:

• I have seen blogs with headers that continue to the second line but were sized to be only 1 line high, so the text overflows and overlaps a caption directly after the header.
• I have seen pages with small design elements (little boxes, usually) where the text falls right out the end of the box and over a background that is the same color as the text or hard to read over.

Now I can understand that most designers might assume that 16 pixels is the default text size on all computers and it’s unnecessary to support users with larger default text, but… oh, never mind, that’s a lie. I can’t understand any explanation other than, “whoops.” These mistakes are not hard to prevent anyway. It’s a matter of:

• Not assuming that all text is going to be displayed at the same size that you view it.
• Not assigning fixed heights to text containers when you know that text can extend past the number of lines you see.
• Applying overflow:auto to containers that have to be fixed but have text inside.

It’s simple stuff that you can do to ensure that your message gets across to everyone… because if users can’t read your text, they can’t get what you are trying to say.