Designing for the web is challenging enough, but when you need to take into account scaling font-sizes, it can quickly become a nightmare. The common wisdom is to design your pages to accomodate fonts two sizes up and two sizes down from the default, but with this new script from two clever Yahoo! blokes, your can get way more clever.Skip to comment form
In the new issue of A List Apart, Yahoo! developers Lawrence Carvalho and Christian Heilmann (who is also a DSTF member) walk us through a new script allowing you to trigger events when the font size is increased or decreased in a browser.
This was by no means the first time it has been done, but it is an incredibly solid implementation and a great tool to have in your utility belt alongside CSS Drop Columns and Browser Size-Dependant Layouts. Lawrence & Christian offer a few suggestions for how to use it, including
- turning a horizontal menu bar into a vertical single list when the font is too large;
- replacing a graphical button with a normal submit on large fonts;
- applying different style sheets to the document according to font size. You could also automatically switch to a zoom layout at a certain stage;
- removing elements when a certain size is reached;
- showing more elements when a certain size is reached (in case the user zooms out instead of in);
- pulling in longer text passages via Ajax when the screen space allows for longer texts;
- increasing the width of a sidebar when the font size changes to keep a consistent line length; and
- centering an element that is defined in em on the screen.
But I’m sure you can come up with more.
- #1 On September 12th, 2006 4:52 pm