4

We are working on an input-field in our application where the users can adjust the letter spacing of text elements in pixels, but we are not sure how many pixels the normal letter spacing is.

We would need to make it possible for them to reset the actual value to normal by inputting pixels.

This is what the input field looks like in the application.

Letter spacing:

[___] ↕ px

Should we default back to normal if they reduce the letter spacing to 0 px? Or 1 px?

3
  • 7
    Note that pixels may be a bad unit, as the width of a pixel depends on display resolution. Absolute units based on inches or millimeters are also not advisable as users may select different font sizes. You should look at the 'em' unit that is relative to the font and should yield visually consistent letter spacing. – Hans-Martin Mosner Oct 10 '20 at 7:55
  • we use the px value because that's the only stable value in email clients (and our application is an email design software - Chamaileon) – Roland Pokornyik Oct 12 '20 at 4:49
  • 1
    General comment: If you are going to do typographical things with your application, you need sufficient typographical expertise on the team (and listen to it). Typography is a complex field of expertise with a long, deep history, and a few tech bros who don't even know the right units are not going to get it correct. – Reid Oct 12 '20 at 5:41
12

Normally you cannot measure letter spacing in pixels, unless there is some special circumstance. First, each font has a different spacing. Second, the spacing is different for each letter in most fonts.

So the most prudent action to take is 0 is as set by font and all else is relative change for that value. The change is number of pixels but the spacing itself is not that many pixels, meaning that it is a slightly misleading name.

1
  • 5
    Or perhaps set it as a percentage of normal spacing? 100% = normal; 90% = compressed a bit; 150 = w i d e l y - s p a c e d. – TripeHound Oct 10 '20 at 11:59
9

This is called kerning and just like joojaa said, it's different on every font, UNLESS you are using monospace fonts. In this case, just get the font you're using and simply measure it with any design software such as Photoshop, Illustrator, Figma, whatever.

Now, if your font is NOT monospaced, then you can still measure it, but you'll break the natural kerning of the font. Consider the following image:

enter image description here

As you can see, without kerning applied the letters look almost as if they were for different words. Which means that adding more space will make the problem worse. See image below: I just edited teh regular Google listing and added the following:

letter-spacing:-1.5px;

and here's the result

enter image description here

almost ilegible and clearly non-accesible text.

In summary: there's not a "cover all cases" answer, but depending on the selected font there can be ways to do this by measuring the space. WHY to do this is a whole different story and I'd strongly recommend you test this extensively

4
  • 3
    I think its actually called tracking... Kerning is for individual pair. – joojaa Oct 9 '20 at 19:17
  • he says letter spacing, which is kerning. Tracking would translate to word-spacing CSS property – Devin Oct 9 '20 at 20:32
  • 2
    no tracking is letter spacing (see wikipedia for example) Kerning is very specific form of letter spacing that is aplied character by character. Also your example is clearly tracking. – joojaa Oct 9 '20 at 20:40
  • 9
    I mean your example images in the beginning show kerning. While your demo shows tracking. People arent often so pedantic so its commonly used interchangeably – joojaa Oct 9 '20 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.