Ryan Cramer

March 7, 2009

Scaling of Dynamic XHTML/HTML5 Text

The architecture of dynamic content

Dynamic content design should recognize and accommodate the effects of text scaling and length. The typeface sizes that you define are likely to be the standard from which most people view your design, but they are not set in stone.

Browser variation

Current versions most Mozilla and Webkit-based browsers scale up the entire design when the text is scaled up, which maintains the proportional integrity of your design. But many other browsers will just scale up all the text (proportionally) and nothing else. Your design should acknowledge that this will happen and react to it in a graceful manner. But how do you do that?

Line-height specificity

Much of the solution falls in the developer’s lap, but your design specificity can help to ensure it goes in the right direction. The best thing you can do is to define and communicate the line heights for any bit of copy that will ever have more than one word in it. While line height will be scaled up proportionally to type size, it’s very possible that word-wrapping will happen in places that you don’t expect.

Word-wrapping

Whether the result of scaling or just a long bit of copy, consider the effects of this word wrapping on headlines, navigation, and anywhere else in your design. Produce examples in your design comps that show how a multi-line headline and multi-line navigation item look, even if you don’t expect to need it.

Testing

Whether the developer is you or someone else, you will want to test the development site in a browser that scales just the text (like Safari) to ensure that word wrapping doesn’t destroy the design.

Establish boundaries

Almost all designs will break at some point of text scaling. A safe bet is to test and see what effects occur when scaling up one or two sizes. Not all designs can accommodate scaling. In some cases the needs of your design may take precedence over supporting text enlargements, but you should design with an understanding of that compromise and the audience.

Text Scaling Examples

Original

Scaled Up

It may not be pretty, but everything holds together reasonably well. However, note that there is some breakage in the design where the search box is located.

Original

Scaled Up

While the design grid holds up, the text does not. This site does not respond particularly well to excessive text scaling largely because it’s composed of fixed size blocks that only have so much space. If scaling up in Firefox, then the blocks scale with the text … a much more desirable effect.

Original

Scaled Up

Yahoo accommodates text scaling exceptionally well. They have built it so that the layout itself is scaled according to the text size, while the images stay at their native resolution. This is a little bit tricky from both the design and development front, as the design’s proportions are all based on relative units (EMs). While Yahoo’s homepage may not be the prettiest page to look at, it is hard to dispute the exceptional skill and understanding of dynamic content present in this design.