Letter-spacing wrong text center alignment

Question

I have noticed a odd behavior in using letter-spacing and text-align: center together. Increasing the space, bring the text to be closer to the left margin of the element.

div {
  width: 400px;
  height: 200px;
  background-color: #3b0d3b;
  text-align: center;
  margin: auto;
}

p {
  color: #fff;
  margin-top: 40px;
  text-align: center;
  padding-top: 10px;
  font-size: 1.2em;
}

.spacing {
  letter-spacing:.4em; /* This property is the problem */
}

.spacing-large {
  letter-spacing:.9em; /* This property is the problem */
}

<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan -</p>
  <p class="spacing-large">- Foo Bar Zan -</p>
</div>

I spot the same behavior on last Firefox and Chrome. Is there a way to fix this issue?

the text is not centered. the left dash is closer to the left margin than the right dash to the right margin. — pasine, Feb 06 '14 at 19:28
If you look closely, the top one is not centered as well... so it looks like a bug to me. At least it is consistent across browsers. — beautifulcoder, Feb 06 '14 at 19:30

Huangism · Accepted Answer · 2018-08-09T12:19:09.367

108

It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side

div {
  width: 400px;
  height: 400px;
  background-color: #3b0d3b;
  text-align: center;
  margin: auto;
}

p {
  color: #fff;
  background: black;
  text-align: center;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

.spacing {
  letter-spacing: .4em;
}

.spacing-large {
  letter-spacing: 0.9em;
  text-align: center;
  text-indent: 0.9em;
}

<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan -</p>
  <p class="spacing-large">- Foo Bar Zan -</p>
</div>

The logical explanation I came up with is - since it is the first letter, spacing on the left side will not apply.

edited Aug 09 '18 at 12:19

answered Feb 06 '14 at 19:30

Huangism

16,278
7
48
74

I guess it is because it is easier to align paragraphs with different letter spacing? – cytsunny Mar 17 '17 at 04:02
It appears to me that the spacing adjustment is made to the right of the character only. So if you increase letter spacing it doesn't append space to the left side of the character at the same time as the right. Was trying to see if you could apply flexbox to characters in a word, alas I have not found a way. – Peter W Dec 23 '17 at 20:25
1

This is fine when you are consistently using text-align: center on the text, but a text indent will cause issues if some text is also left aligned – lewismcarey Jun 07 '18 at 20:11
Thanks! It doesn't work with multiline text though. Margin-left with the same value helps in this case. – ZenBerry Apr 12 '23 at 09:50

score 10 · Answer 2 · answered Aug 11 '16 at 09:34

10

Using padding would be safer incase the text goes onto two lines. text-indent would only indent the first line of text.

p { 
  padding-left: 0.9em; 
}

answered Aug 11 '16 at 09:34

fidler2326

101
1
4

4

This is an under-appreciated contribution, much better solution in my opinion/case – jamiescript Oct 15 '19 at 08:26

rhodesit · Answer 3 · 2020-04-27T05:49:13.597

2

Set a negative margin the same amount as the letter spacing. So if your letter spacing is 10px, set margin-right:-10px.

Using text-indent will leave that space in front of the first letter, even when the parent element is too small to fit the content, causing it to not look centered.

edited Apr 27 '20 at 05:49

answered Oct 17 '19 at 20:51

rhodesit

41
8

score 1 · Answer 4 · answered Feb 06 '14 at 19:33

1

If you look closely, the top one without letter spacing is not properly centered as well. The only thing I can think of is to monkey patch it with margin-left: 15px like so:

p { margin-left: 15px; }

answered Feb 06 '14 at 19:33

beautifulcoder

10,832
3
19
29

score 0 · Answer 5 · answered Sep 16 '20 at 17:32

This behavior is because there is the extra space (as a result of increased letter spacing) added to the right side of the right most letter.

There is a simpler method to achieve center alignment in such cases. Just remove the letter spacing property from the last alphabet

Here is a solution.

div {
  width: 400px;
  height:400px;
  background-color: #3b0d3b;
  text-align:center;
  margin:auto;
}

p {
  color:#fff;
  margin-top: 40px;
  text-align:center;
  padding-top:30px;
  font-size: 1.2em;
}

.spacing {
  letter-spacing:.4em;
}

.spacing-large {
  letter-spacing:.9em;
}

<div>
  <p>- Foo Bar Zan -</p>
  <p class="spacing">- Foo Bar Zan <span style="letter-spacing:0">-</span></p>
  <p class="spacing-large">- Foo Bar Zan <span style="letter-spacing:0">-</span></p>
</div>

Notice the span element nesting the last character.

score 0 · Answer 6 · answered Dec 07 '20 at 21:48

0

The best answer I have found to solve a letter spacing word being off center is to simply put   in front of the word.

answered Dec 07 '20 at 21:48

Johnathan Evans

1

This doesn't work because you introduce both a space and letter spacing to the left of the text, which is larger than just the letter spacing on the right of the text. So now your 'centered' text is too far to the right. – Bryan Dec 29 '20 at 10:55

Patrick Fisher · Answer 7 · 2021-10-08T20:16:03.380

letter-spacing is inherently imbalanced, coming after each letter. You can compensate for it with a negative margin-right.

For example, in React with TypeScript and styled-components:

import React from 'react'
import styled from 'styled-components'

/**
 * Center text, accounting for letter-spacing.
 */
export const CenterText: React.FC<{
  className?: string
  letterSpacing: string
}> = ({ children, className, letterSpacing }) => {
  return <Body {...{ className, letterSpacing }}>{children}</Body>
}

/**
 * Negative right margin handles inherent imbalance in letter-spacing.
 * `justify-content: center` handles both narrow content and overflow.
 * `text-align: center` aligns multiple lines of text when text wraps.
 */
export const Body = styled.div<{ letterSpacing: string }>`
  display: flex;
  justify-content: center;
  letter-spacing: ${o => o.letterSpacing};
  margin-right: -${o => o.letterSpacing};
  text-align: center;
`

Letter-spacing wrong text center alignment

7 Answers7