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:autoto 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.
1 Trackbacks/Pingbacks
- Pingback: All in a days work… on July 22, 2007
Guilty of not using overflow enough in designs that I code out. People who define height's to columns, unless they have a bloody marvelous reason to, be ashamed. At the very least just use a min-height if your concerned with a design falling into itself.
Good write up!
I see this a lot. For most of the sites we design we use the ctrl-+ test. In firefox this will increase the font size. It's a quick way to check how your layout reacts to changes in font size.
Use Opera with pixel zoom, that will enlarge the entire page, not just the text.
Its a good point tho, this is a usability and accessibility test. And I think alot of people forget to test this, including myself. Gonna do it now tho :p
You're too optimistic about Akismet.
That aside, yeah, the right size text matters, make it big, make it small, everything should still work. I'm definitely guilty of being text-size bad.
Im guessing im probably also guilty…
Elliot: Akismet fails 1/500 comments, and has had 2 false alarms in the history of its use here. I know there are better systems for blocking spam, but I'm sticking with Akismet for now.
Sebastian: I like pixel zoom but I need to use Firefox for all of its dev features, and Firefox doesn't have that option
I'm guilty. I know my navigation bar breaks if you increase the text size.
Too lazy to fix it.
Wow, the prototype for my blogs new layout didn't even include this! Thanks for writing this!