How to set character width in html/css

Question

I would like to have a font with all characters the same width in html div.

For example, a W is wider than an i in most fonts ...Is there any font that has all characters equally wide?

You mean a [monospaced font](https://en.m.wikipedia.org/wiki/Monospaced_font)? There are lots, such as Consolas. — Andrew Li, Jun 14 '17 at 13:58

score 3 · Accepted Answer · answered Jun 14 '17 at 14:00

3

You are looking for a monospace font...

Here are some examples: https://fonts.google.com/?category=Monospace

answered Jun 14 '17 at 14:00

RDumais

171
8

score 2 · Answer 2 · answered Jun 14 '17 at 14:08

You could to separate the character with an individual class and then you can use transform: scale(x, y); to alter the characters width and height.

.text {
    text-align: center;
    letter-spacing:2px;
    text-transform: full-width;
    -webkit-transform:scale(15.0,1.0);
    -moz-transform:scale(15.0, 1.0);
    -ms-transform:scale(15.0, 1.0);
    -o-transform:scale(15.0, 1.0);
    transform:scale(15.0,1.0);
}

<div class="text">tc</div>

domsson · Answer 3 · 2017-06-14T15:00:30.593

What you are looking for is a monospace font, i.e. a font with fixed-width characters.

Now, to use such a font you could either import one and use it directly by its name, like so:

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
div { font-family: 'Roboto Mono', monospace; }

<div><p>Some text in a div</p></div>

Or you could simply rely on the monospace value itself, which means that the user will see a font based on the browser and OS they are using:

div { font-family: monospace; }

<div><p>Some text in a div</p></div>

Alternatively, you could use the pre element instead of a div, as it typically displays text in a monospace font anyway:

<pre>Some text in a pre.</pre>

To find some fixed-width fonts, you can use Google Fonts, they have a filter just for that. Also, there are other questions/answers on the Stack Exchange network that are related and might be of use to you, for example:

How to set character width in html/css

3 Answers3