Category Archives: CSS

Working with em-based widths can be baffling

Posted on by

These four paragraphs have the same number of characters, but because the letter M is fat and the letter I is skinny, different amounts of characters appear in each line:

M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M

I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I

This is the exact same text, but now I’m using a monospace font:

M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M M

I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I