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

Question

This question already has an answer here:

• Force Non-Monospace Font into Fixed Width Using CSS 8 answers

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

Answer 2

The only thing I can think of is to put each letter in an HTML element, and style that element something along the lines of:

width: 8px;         /* Whatever fixed width you want here */
display: block;     /* Force the width to be respected. See also: inline-block */
float: left;        /* So it won't be 1-per-line. Not needed for inline-block */
text-align: center; /* So the character appears in the middle of the block */

I'm not familiar with Flex, but if I were to implement this approach, I would put together some Javascript that would generate all the elements for me.

Answer 3

The result should be crappy as proportional fonts aren't made for that.

Nonetheless, you can achieve that with individual span around characters: http://jsfiddle.net/rvYES/

body {
  font: normal 100%/1.5 Arial;
}

span {
  outline: 1px dotted darkred;
}
span:nth-of-type(even) {
  outline-color: blue;
}

.w-fixed span {
  display: inline-block;
  min-width: 1em;
}

I added visual clues (outline) to see what's going on and used min-width just in case, not width.
This method will cause a huge problem of accessibility with screen readers, for blind and partially sighted people using these assistive technologies. Letters being into individual span will be spelled / read out
o
n
e

b
y

o
n
e

w
h
i
l
e

a

n
o
r
m
a
l

p
a
r
a
g
r
a
p
h

w
o
u
l
d

b
e

r
e
a
d

a
s

a

s
e
n
t
e
n
c
e
,

a
s

u
s
u
a
l
.

P
r
e
t
t
y

a
n
n
o
y
i
n
g

e
h
?

pun intended

Answer 4

It's an old question, but I would suggest looking for a suitable fixed-width font that can be used as a webfont that has the features you want. I'm a pretty big fan of Inconsolata, for example.

I'd start with Google Fonts and unselect all categories leaving only Monospace.

Answer 5

You might be able to use the letter-spacing CSS property to get what you want. By definition, monospace fonts have the same character width unlike serif or sans-serif. Using letter-spacing is your best bet W3C Reference