Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set character width in html/css [duplicate]

Tags:

html

css

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?

like image 386
Kiwi Rupela Avatar asked Sep 18 '25 22:09

Kiwi Rupela


2 Answers

You are looking for a monospace font...

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

like image 74
RDumais Avatar answered Sep 20 '25 14:09

RDumais


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>
like image 45
Clams Are Great Avatar answered Sep 20 '25 13:09

Clams Are Great