CSS Strategies for resizable text

The WCAG guidelines on resizable text state that you should be able to scale text by 200%.

How to test:
In Firefox, got to View -> Zoom -> Zoom Text Only. Then when you are back in your page, zoom up to 200% by pressing Ctrl + 6 times.

Possible problems that happen when only text gets bigger:

  • Text that wraps underneath itself has too little space between the letters. You’ve set your line-heights in px.
  • using height which causes text to get cut when it overflows that height
  • Items lie on top of one another, because you’re using absolute positioning
  • text stops sitting on a particular background colour and becomes hard to see (or just looks untidy)

SCENARIO: I have an element that must be at least x pixels tall, but could grow larger if I put more text in there
SOLUTION: use min-height rather than height, remember that older IE will treat height as min-height so use your .ie6 styles or whatever you are using to set it seperately

SCENARIO: I have an element that must be no more or less than a specific height
SOLUTION: set the height in ems rather than px and the box will grow with the text resizing

SCENARIO: text is sitting on top of other text or items and is illegible
SOLUTION: rework the layout using floats or relative positioning, negative margins, or if you have fixed dimensions for your absolutely positioned item (e.g. a close icon on a lightbox), style your surrounding boxes so that their margins sit on the area where the absolutely positioned item is. At worst you may have to use a bit of JS to refine the position (e.g. you need to align something to the bottom of another element) but that is mixing styling rules with behaviour rules.

SCENARIO: my text no longer sits on a coloured background, I’ve run out of background image
SOLUTION: rebuild so that the background surrounds the content section of your box, which has a background color. The background adjusts as the size of the content grows and shrinks because it sits around it rather than under it
LEAST DESIRABLE SOLUTION: wrap your text in an element that gets given a background color

SCENARIO: there’s no longer enough space between the lines of text
SOLUTION: don’t set line-height in pixels, set it in ems, and make less use of them because as you use relative units, you’ll find that they are a pain to maintain when they start getting inherited.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>