Letter-spacing input even

Question

I am making a html form with a inputfield. If I use letters and numbers the letter-spacing is incorrect. How do I make sure that the letter-spacing is always good?

Good:

Good

Bad (letter-spacing): Bad

input{
  margin: auto;
  display: block;
  background: transparent;
  height: 76px;
  border: none;
  text-align: left;
  font-family: "Avenir", sans-serif !important;
  font-weight: 500;
  font-size: 30px;
  width: 600px;
  letter-spacing: 49px;
  padding-left: 30px;
}

<div class="coupon">
  <h3 class="widget-title bluetext">Coupon</h3>
  <div class="couponwrap">
    <input type="text" id="ticket-number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"  maxlength="8" minlength="8">
    <div class="cursor-hide"></div>
  </div>
</div>

How can i fix this?

Text-align: center is not a solution. I want to left start typing — Bjorn, Jan 27 '15 at 12:41
Wouldn't `text-align` center break down if theres an uneven/even number of characters...? `monospace` seems the only solution as letter widths are different for each... — somethinghere, Jan 27 '15 at 12:41

score 0 · Accepted Answer · answered Jan 27 '15 at 13:02

As was stated in the comments, you should use a mono-space font like Courier. Avenir's characters (and other non-mono-spaced characters) have unique horizontal space per character.

If Avenir is absolutely necessary, you could use multiple inputs with javascript auto incrementing on input.

Letter-spacing input even

1 Answers1