Width example

Percentages

This column has been set at 48% of the containing element. I set the container div to be 750px (one of the current standards). While it is often quite useful to define the width of columns as a percentage, there are dangers as the user changes the size of the browser window. I’ll simulate the effect of changing the browser size by wrapping this column in containers of various width.

Now I have simulated a browser window with a viewable window of 1,500 pixels across. Given the growing nature of modern monitors it isn’t surprising to encounter someone with this much viewable space. The lines just seem to go on, and on, and on, don’t they? You run the risk of wearing out your reader’s eye at this width.

By contrast, let’s see what things look like on a screen with considerably fewer pixels across. Here’s 48% of a 500 pixel container. The line length is quite a bit shorter, isn’t it? With a paragraph this thin and no corresponding change in line height it can be difficult to find your place as you move down the column.

Pixels

This column has been set at a width of 360px. Changing the size of the browser window has no effect. 360 pixels is 360 pixels the world around (let’s not quibble about dpi right now, shall we?).

Changing the text size, however, makes a considerable difference. Notice how many fewer characters fit in a line? Taken to extremes you could find yourself with a rather serious readability problem.

Unsurprisingly, we experience the reverse situation when our text size is reduced. It might not be as obvious just because the tiny text is difficult enough to read on its own. But you would never knowingly set the text on any of your sites this small, would you?

Ems

This column has been set at a width of 30 em. It should look an awful lot like the paragraphs above. I did this on purpose. I suppose it’s entirely possible that you’ve made it this far without knowing precisely what an “em” is. Fair enough: it’s not nearly as straightforward as a percentage or pixel. An em is a unit of measurement proportional to the size of text. It’s historically understood to be the width of an uppercase letter M, hence the name. As far as we’re concerned an em is a square block with sides equal to the text size. At a font size of 12px, 1 em is equal to 12px. At font size 14px, 1 em is equal to, you guessed it, 14px.

As I said, ems are proportional to the font size. As the font size increases so too does the width of the column. The width is determined by the cascade. The user agent will calculate the width based on the font size of the parent element, unless the font size for that element is explicitly declared as I have done in this example. Meaning, if you declare a font size in the body, any child column with a width in ems will be a multiple of that font size. It might be a lot easier to see what I mean by playing around with a stylesheet yourself.

Take a look at our favorite dummy text in several different font sizes to see the difference a proportional measure makes. Pay extra close attention to the ends of each line of each paragraph.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Gee! Isn’t that neat? Why that paragraph looks exactly the same at small, medium, and large sizes! You can hit that increase (or decrease) font size button in your favorite browser as long as it lets you and that paragraph is going to have the same damned characters across every single time. Hopefully the utility of this facet is not lost on you at this point.

CSS Width Examples

Percentages

Pixels

Ems