Brennan’s Blog

The other day CNN.com revised their website and added a useful feature that Jeffrey Zeldman has promoted a while now. Essentially you place a couple of clickable controls near your content to allow the reader to adjust the size of the text easily.

I have prepared an example which is easy to reuse. I call it font sizer. It makes use of a little Javascript and CSS to allow the user to click on a couple of links to increase or decrease the font size. The CSS involved here is to simply change the value of the class attribute on the content container. I have 3 class selectors specifying the font size: small, normal and large. When you view the source you will see that the CSS controls exactly what the content does. And it is trivial to change the value of the class attribute.

var content = document.getElementById('content');
content.className='large';

Web browsers support font resizing as well, but they do it for the entire page. And doing it that way tends to pull apart the page in ways the layout cannot handle gracefully. Try it on CNN.com and as you reach very large font sizes you will see how the textual site navigation starts to push things all out of shape. By providing your own feature you can control how it affects your layout.

Try out font sizer and put it onto your site.