Making every character on a web page the same width

Question

Is there a font or CSS property that would give every character the same width without the need of drawing them yourself(.ttf)?

Answer 1

How about Courier New? monospace?

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Answer 2

For certain cases, using the pre tag,(<pre>text</pre>), might fill your needs for monospaced (fixed width) text. It worked for me with HTML5 + Chrome (current version). The ttelement is deprecated.

However it appears the <pre> tag can only contain tags which are considered "phrasing content". See "Content model" section on the w3 documentation for that tag. You can click the link to see what elements are considered "phrasing content". Of course, each browser may support a looser version of the spec if you don't care about valid HTML or cross browser compatibility.

Answer 3

You could chose from any of the freely available fixed width fonts and embed them in your site.

If you don't want to embed a font in your page, you could use the following to take whatever monospace (another term for fixed width) font is available:

font-family: "Courier New", Courier, monospace;

Answer 4

Another option would be to use lettering.js, which would create a span element around each letter that you could then set a width to with css. This would probably only be advisable for small texts, though.

Answer 5

There's a number of monospaced fonts that give equal width to each character. Courier and Courier New are probably the most common, and should be available on pretty much every system.

Answer 6

If you only need numbers to be equal widths, you can use font-variant-numeric: tabular-nums;. It's really useful for animating counters. Read more about it on Mozilla web docs.