///Fluidity and Text Sizing

Fluidity and Text Sizing

Fluidity and Text Sizing

Fluid and liquid layouts are definitely considered the ‘ideal’ design type right now, and I cannot agree more. I much prefer a fluid design over a set layout. For text we know that relative sizing (meaning the use of em, ex, and percentages) are preferred over the use of pixel sizing.

In any event, whether your website design is a fixed layout or a liquid layout – there should still be a measure of fluidity in text sizing. When I use the phrase ‘text sizing’ I refer to the fact that users can control the size of text on a page. For instance, if a Firefox user they may employ the popular CTRL + + to increase, CTRL + – to descrease the text size. Others may use the ability of their mouse scroller to adjust zoom the text size, etc.. While this may seem to be a simple observation, and one that is of little importance, it’s not quite as straightforward as that.

There are often elements, such a section headers or navigation areas, that break when zoomed – meaning they just don’t fit in the space anymore. This can happen in a liquid layout also, believe it or not. Many people use horizontal tab-like navigation, made pretty with images behind it. Now, when zoomed too much, sometimes the text becomes too big for the screen size of the viewer, and in the nature of a liquid layout, the horizontal navigation wraps and continues onto a line below the normal horizontal navigation. In many cases, that can look quite awful. If you use navigation like that, you need to test and see what happens, and design in measures so that if it does wrap – it still can do it in a way that looks good.

For fixed layouts, you get something a bit different – most often that is a horizontal scroll bar in the browser when you run out of room. None of us like those – so its best to test and avoid them if you can.

You cannot account for every possible window size in the world. People will zoom in and out if they know how, it’s like a kids toy, some of them think it’s just plain neat to see how many zooms they have to do before the site runs into itself. So, how do you accomodate the most people?

My rule of thumb:
Make sure your site can handle two increments both ways (increases in text size, and decreases in text size) without breaking. If you can, then you should be okay.

If you follow that rule, you should be safe under the normal conditions of someone who surfs the web with a constantly set increased or decreased text size (at least of a reasonable amount). Overall… the best suggestion I have is to always toy around with your zoom… your visitors will.

You can view some sample screenshots of what can happen to a zoomed site by going here (the original posting).

2010-05-25T23:01:16+00:00 August 8th, 2006|CSS|0 Comments

About the Author:

Nicole Hernandez is a web developer with a specialty in web standards and accessibility. She is the owner of Website Style and publishes technical articles on her blog called Beyond Caffeine.

Leave A Comment