Styling password fields to get better dots

Make the dots in a password field bigger with this basic CSS style. It’ll make it easier to see the number of dots in the field, helping both yourself and the visually impaired.

Depending the font used the dots in the password field look like this. The font-family on the field below is set to sans-serif

We can use the Verdana font to scale the dots to a more comfortable size.

input[type="password"] {
  font-family: Verdana;
}

That’s better already, now let’s separate the individual dots.

input[type="password"] {
  font-family: Verdana;
  letter-spacing: 0.125em;
}

Much better. It’s now a lot easier to see the individual dots, and the dots nicely take up space in the field.

This works on Mac Firefox / Mac Chrome / Mac Safari / Win Chrome (+Edge). Android doesn’t have Verdana so shows dots that are a bit smaller.

I use Twitter to share new webdevelopment tips and tricks, so Follow me there if you found this interesting and want to learn more.

Rik Schennink

Indie Product Developer

to pqina.nl