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
143 questions
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
  • 687
  • 9
  • 19
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,876
  • 3
  • 43
  • 69
6
votes
0 answers

How to adjust letter-spacing in JavaFX

When using JavaFX2, how can i adjust the letter-spacing between characters of a Text object? Examples either in code or css are welcome.
Johannes Dorn
  • 1,307
  • 1
  • 16
  • 34
5
votes
2 answers

Keep width when using letter-spacing on hover

I have a some basic button styles where on :hover I add the letter-spacing property: .btn { display: inline-block; text-align: center; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; …
Vucko
  • 20,555
  • 10
  • 56
  • 107
5
votes
1 answer

Why does letter spacing not always work with all letters?

I've had this occur with some @font-face webfonts in the past. I recently downloaded the free Museo Sans 500 webfont, but am running into some problems with certain letters spacing properly, spficically the letter f. When adjusting the CSS…
Bryan Willis
  • 3,552
  • 1
  • 25
  • 34
5
votes
1 answer

Chrome v49 letter-spacing in SVG with transform matrix

Chrome v49 broke letter-spacings in SVG when used in combination with matrix transformation and translations: Living example: https://jsfiddle.net/75fpn6de/6/ SVG:
suamikim
  • 5,350
  • 9
  • 40
  • 75
5
votes
1 answer

Unable to enable letter spacing (kerning) on UITabBarItem

I am trying to enable Text Kerning (increase Letter spacing) on UITabBarItem title labels. But providing the NSKernAttributeName attribute for the UITabBarItem does not make any difference. The other two attributes, however, are working:…
5
votes
1 answer

Safari kerning issue when using "f" and "i"

I am running Safari 8.0.5 on OS X 10.10.3. I've ran into a letter-spacing issue whenever using the characters "f" and "i" right next to each other. My guess is that this is a Safari bug, and I've submitted it to Apple as such, but also wanted to see…
David Stinemetze
  • 8,830
  • 3
  • 21
  • 34
4
votes
2 answers

Spacing between characters inside of HTML tag - why does it become stretched out?

I am working with an HTML table that is misbehaving when it comes to semi-long lengths of text. The picture below is worth 1000 words. In the first cell shown, the text "Embroidered Lettering Only" becomes stretched out as far as 'between character…
dah97765
  • 679
  • 1
  • 13
  • 29
4
votes
1 answer

CSS underline and letter-spacing

In a website menu, I have implemented some wishes of my customer concerning typography in CSS. She needs a different tracking on the font, no problem. But, she wants the active link to be underlined. As I have not implemented the code to target the…
MarioDS
  • 12,895
  • 15
  • 65
  • 121
4
votes
3 answers

CSS letter-spacing and proportional fonts

So I know that my question is pretty technical, but basically I would like to know specifically how the following CSS affects the display of text in

tags. p { letter-spacing:2px; font-family:"Georgia"; } I know that Georgia is a proportional…

4
votes
3 answers

Safari, letter-spacing with custom font

Using the Dosis font from Google Webfonts ... @import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800); after extensive testing in Firefox and Safari, while being perfectly aware that i won't ever get both browsers to…
SquareCat
  • 5,699
  • 9
  • 41
  • 75
3
votes
2 answers

How to imitate a monospace font with a variable-width font?

I have read CSS - Make sans-serif font imitate monospace font but the CSS rule letter-spacing doesn't seem to be enough: How to imitate a monospace fixed font from a standard sans-serif font? This doesn't work perfectly: .text { font-family:…
Basj
  • 41,386
  • 99
  • 383
  • 673
3
votes
2 answers

How do I set letterSpacing for whole app in Flutter?

I am working with Flutter and I know that letterSpacing property is useful to give some spacing between letters. I want to give it to the whole application, I mean wherever I wrote any text in application. I want to set 1.0 letter spacing to all the…
Pratik Butani
  • 60,504
  • 58
  • 273
  • 437
3
votes
1 answer

How to modify letter-spacing in a JTextPane?

I'm need to modify letter-spacing (font tracking) in a JTextPane, and I can't get it to work. When I'm using a JTextArea, I can just do: Font font = new Font("Courier New", Font.PLAIN, 10); HashMap attrs = new…
Gustavo
  • 195
  • 2
  • 11
1
2
3
9 10