Search code examples
cssfont-size

CSS: em or ex for number width?

I have to set the width of an input field such as it fits 2 numbers (e.g. from 00 to 99). I tried width:2em but it is too large, `width:2ex' and it is too small...

Which unit is best to use? Is there any standard practice?

EDIT

I know that proportional fonts make width calculation difficult, but usually numbers have fixed width to allow alignment of digits. So I figured out there were some unit to deal with them...

e.g. the following 10-digits random sequences (in proportional font) have the same width...

1234567890

3421434234

2324235252

Solution

  • One em is the maximum character-width of the current font (the width of an upper-case M). One ex is about half the height of the current font (the height of the lower-case x).

    Sadly, if you aren't using a monospaced font (one where all the letters take up the same amount of horizontal space, such as Courier), the width of a certain combination of letters will not be the same as every other combination of as many letters.

    Example:

    Stack Overflow does not use a monospaced font for its comments, hence these following lines are of different width, though containing the same amount of letters:

    iiiiiiiii
    MMMMMMMMM

    However, if I write in a monospaced font, they do occupy the same horizontal width:

    iiiiiiiii
MMMMMMMMM