Symbol width and height

Question

How do I set a symbols width and height?

<span>&gt;</span>

that > is not wide enough:

span {
    font-family:arial;
    font-size:20px;
}

Is it possible to set it with code like width: 10px; height: 20px; ?

Answer 1

Set the font-size to 20px and then use the transform property, using scale(.5, 1) to halve the horizontal scale and leave the vertical scale as is.

span {
  font-size:20px;
  transform: scale(.5, 1);
}

or see the fiddle.

Answer 2

> is a character. You can adjust its size with font-size and font-stretch (although it has limited support).

Keep in mind that the width will vary with the font family too.

(Be careful not to use a greater than symbol when you actually want an arrow.)

Answer 3

No you can't change width and height separately and this is for a good reason. Fonts (and this includes symbols as well) aren't made to be stretched. Doing this you would end up with distorted and ugly looking symbol and making all typography experts yelling like hell. This is the reason why you can only set one value - the aspect ration will always stay the same. It's for us all safety.