1.21 gigawatts 1.21 gigawatts - 7 months ago 31
HTML Question

Is there a way to make a variable width font act like a fixed width font in HTML?

Is there a way to make a variable width font act like a fixed width font in HTML?

For example, if I have the sentence, "The quick grey fox jumped over the lazy dog" displayed in "Courier New", a fixed width font, it would be wider overall than if it was in a variable width font like, "Arial". I would like to use "Arial" instead of "Courier New" but have the characters fixed width.

Example of variable width:

The quick grey fox jumped over the lazy dog.

Example of fixed width:

The quick grey fox jumped over the lazy dog


Notice how close the characters are to each other in the word "quick" and "grey" in each example.

Answer

Not with just CSS. I would recommend you use the popular Lettering.js (you'll need jQuery for it) to generate span tags around each character, then set an width across all the characters.

.monospace > span {
  display: inline-block; /* Enable widths */
  width: 1em;            /* Set width across all characters */
  text-align: center;    /* Even out spacing */
}

Test Case