Questions tagged [letter-spacing]

a CSS property that defines the spacing between text characters

Description

The letter-spacing CSS property specifies spacing behavior between text characters. As a length, it is an animatable property.

Usage Example

#spacing_normal {
    letter-spacing: normal; /* normal spacing between 2 letters */
}
#spacing_px {
    letter-spacing: 5px; /* space of 5 pixels between 2 letters */
}
#spacing_em {
    letter-spacing: 0.5em; /* space of 0.5em between 2 letters */
}
#spacing_inherit {
    letter-spacing: inherit; /* inherit the letter spacing provided for parent */
}

References

  1. W3C Specification
  2. MDN Link
  3. Fiddle Example
122 questions
41
votes
11 answers

Letter spacing in canvas element

The question says it all pretty much. I've been searching around and starting to worry that it's impossible. I've got this canvas element that I'm drawing text to. I want to set the letter spacing similar to the CSS letter-spacing attribute. By that…
Pinpickle
  • 894
  • 2
  • 9
  • 17
33
votes
6 answers

Letter-spacing wrong text center alignment

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. HTML

- Foo Bar Zan -

CSS div { width: 400px; …
pasine
  • 10,442
  • 9
  • 44
  • 75
32
votes
6 answers

Is there a way to make css letter-spacing: 0.5 px?

I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I'll use half a pixel so 0.5px, but it doesn't work, I tried using em attributes, but didn't achieve the…
Ilja
  • 35,872
  • 66
  • 218
  • 401
29
votes
9 answers

CSS text justify with letter spacing

Is there a way to automatically justify words using letter spacing, each in its row, to a defined width, using CSS? For example, "Something like this" would look, well, something like this: Is there a non-obtrusive way to apply such styling to my…
Groo
  • 45,930
  • 15
  • 109
  • 179
20
votes
2 answers

Understanding CSS letter-spacing: is it valid to replace the default value of normal with 0?

According to this page, the CSS letter-spacing property has a default value of normal. Notably, non-default values are added to the default value: The most important point to note when using letter-spacing is that the value specified does not…
Crashalot
  • 31,452
  • 56
  • 235
  • 393
18
votes
9 answers

IE9 letter-spacing problem

I have a page that renders ok, in FF (3x, 4x), Chrome, IE (6, 7, 8). When tested on IE9 the texts are wider. Investigating the problem it appears that the text is actually rendered whith letters more spaciated than in other borwsers. When changed…
humeniuc
  • 211
  • 1
  • 2
  • 8
12
votes
9 answers

How to change letter spacing of UIButton in Swift?

I've found how to set letter spacing to UILabel (here) but this method is not working for UIButtons. Does anyone know how to do it? Here is the code i'm using let buttonString = agreementButton.attributedTitleForState(.Normal) as!…
A.Solodky
  • 161
  • 1
  • 1
  • 7
12
votes
3 answers

CSS: Letter-spacing percent to completely fit the div container

i need to fit completely a text in a 100% width div container. I attempted using letter-spacing but it looks like only accepts px/em, and not percent values.. but that wont be responsive (e.g. resizing window). This is what i got:…
pumpkinzzz
  • 2,592
  • 2
  • 11
  • 28
11
votes
4 answers

Convert letter-tracking value set in Photoshop to equivalent letter-spacing in CSS

I am currently building a site from a PSD. Most of the fonts have a letter-tracking of -25 ( <- AV-> : I'm guessing that is the symbol for letter spacing?). How would I get the same effect in CSS? I know the property is letter-spacing: X but it…
Rick Donohoe
  • 6,141
  • 6
  • 24
  • 38
9
votes
5 answers

Filling div using letter-spacing

The problem I'm having is filling a div with text using letter-spacing. The main issue is, I don't know the width of the div. First I was thinking using, text-align= justify, but since that I've been running in the dark and got no clue to how to…
Kai
  • 115
  • 1
  • 5
8
votes
2 answers

CSS Kerning for Large Numbers

I realise that in the states large numbers are formatted with a , between thousands so you would write $1,000,000.00. In South Africa a , is non-standard and could be used as a decimal point instead of the .. We would write $1000000.00 which is…
jcuenod
  • 48,573
  • 13
  • 58
  • 98
8
votes
1 answer

Why is this font so big in Java?

I’m trying to use OpenDyslexic as a font option in a Swing application. But surprisingly, OpenDyslexic looks much bigger than any other font at the same point size, even though it looks normally sized in other applications. I’ve tried a handful of…
yonran
  • 15,964
  • 7
  • 60
  • 81
7
votes
2 answers

how to do you use letter-spacing smaller than 1px

I have a web font that I am trying to get the spacing just right. I have it set at letter-spacing: .03px. Works great in firefox 5, But i know this doesn't work across browsers. Is there anything i can do to help this? or what browsers would this…
eman
  • 71
  • 1
  • 2
7
votes
2 answers

Is it possible to have letter-spacing relative to the font-size and inherit properly?

My question is basically the same as this one, but replace "line-height" with "letter-spacing": When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative? My use case is like…
benface
  • 538
  • 6
  • 16
7
votes
2 answers

Right align text in with letter-spacing

If you left align text in an input, it stays left aligned, no matter how you set the letter-spacing. If you right align text in an input, the letter-spacing can push it away from the right edge. Example (shows up in Firefox, Chrome):
Chris
  • 5,396
  • 1
  • 35
  • 65
1
2 3
8 9