Question

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 1

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