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
1
vote
1 answer

How to correct the ligatures of 'fi' and 'fl' in case of larger letter-spacing?

I use Google font 'Roboto' and expanded letter-spacing of .3em . How in this case is posible to corect sticky ligatures of little 'f' letter in words consisting 'fl' and 'fi' ? I tried to change to font-family for 'Roboto' to 'sans' and…
o_s_a_k_a
  • 71
  • 1
  • 12
1
vote
0 answers

Safari increases letter-spacing when using text-shadow

Here's an example of the CSS that's giving me grief: @import 'https://fonts.googleapis.com/css?family=Pathway+Gothic+One'; body { background: #444444; } h1 { font-family: 'Pathway Gothic One'; text-transform: uppercase; color:…
Will
  • 181
  • 1
  • 4
1
vote
1 answer

Fractional Letterspacing in Outlook 2010 not working

I'm designing a HTML email right now. So far so good it all worked fine. But my client wished for a tiny bit more letter-spacing. letter-spacing of 1px is to much, but no letter-spacing is to bulky. I used letter-spacing of .5px in some places. It…
Niqql
  • 410
  • 1
  • 5
  • 26
1
vote
1 answer

How to specific letter spacing in a sentence

I have added letter-spacing:-1px. However I also need to letter-spacing the hiragana(japanese) numbers. I can't solve this problem by using romanji letter. How do I tighter(make less space) only for these number? I tried to add between…
Kami
  • 157
  • 11
1
vote
2 answers

Is there a way to move letters closer to each other for only a certain range of a string using CSS?

Given that I have the string "Software", I would like to reduce the spacing between the "f" and "t" and keep the rest of the string spacing as it is. Plan B for me at this point is to add a span around the letters f and t but ideally I would not…
Vinicius Santana
  • 3,936
  • 3
  • 25
  • 42
1
vote
1 answer

CSS: h2::first-letter with a border needs a margin for the rest of the h2

I hope this could be answered. More details: I want to create extra spacing after the ::first-letter but when I add margin to it expands the border. I tried to find a solution and found ::after but that didn't work for me.. CSS…
1
vote
1 answer

Is it possible to have different letter-spacing between characters in the same word? Can this be accomplished with CSS only?

I've done some research, and I'm aware of the letter-spacing CSS property, but is it possible to have different characters within the same word spaced differently? I wouldn't be skipping any layers, so I couldn't accomplish this with using span tags…
Brandon McConnell
  • 5,776
  • 1
  • 20
  • 36
1
vote
1 answer

Letter-spacing input even

I am making a html form with a inputfield. If I use letters and numbers the letter-spacing is incorrect. How do I make sure that the letter-spacing is always good? Good: Bad (letter-spacing): input{ margin: auto; display: block; background:…
Bjorn
  • 71
  • 6
1
vote
1 answer

How to enlarge UILabel width (letter spacing) in Objective-C?

This is the code I am using for the UILabel title of my View Controller: UIFont *bebasFont = [UIFont fontWithName:@"Bebas" size:100]; RestaurantsTitle.font = bebasFont; RestaurantsTitle.text = @"RESTAURANTS"; and I need to enlarge the space between…
1
vote
1 answer

xsl-fo letter-spacing with text-align

Im using xsl-fo for printing pdfs (started to make my own library with itext, but xsl-fo looks fine for me). I have problem with aligning text which have different letter-spacing than default. my code is:
user3932298
  • 13
  • 1
  • 3
1
vote
1 answer

JavaFX Webview letter-spacing Bug?

Currently I am using the JavaFx Webview to load a HTML page. But there is a problem when it loads the HTML page. It doesn't read the letter-spacing or -webkit-letter-spacing attribute in CSS. It's fine with the Chrome browser. How can I make it work…
narr
  • 13
  • 4
1
vote
4 answers

Custom script font kerning and letter spacing with fontface

I'm having an issue with a script font called Thirsty Script Bold that I'm using on my site. The letter spacing appears to be correct for some letters, but not for others. I haven't even touched the letter spacing though. You can see an example…
Adam Privette
  • 93
  • 1
  • 6
1
vote
2 answers

CSS letter-spacing SAFARI

I have my site how I like it, cross browser, although I have letter-spacing in CSS, but in safari it does not understand what I have, it ruins the design - any advice? Here is the CSS: body { margin: auto; font-family:…
user2080194
1
vote
1 answer

Is it possible to somehow get a html element as an image to render on a canvas?

It may seem like a really random question, but I am trying to figure out a hack to get correctly letter-spaced text rendered on a canvas. After much searching in google it seems like there is no way to really do this. The first thing I tried was…
jcvandan
  • 14,124
  • 18
  • 66
  • 103
1
vote
1 answer

AngularJS + ng-repeat + inline-block with letter-spacing

I have a problem with letter-spacing for my inline-block elements. As you see there(jsfiddle) my lower elems are collapse, because they are not separate with '\n' or gap. If I repeat that with Angular, I have collapse elems. How can I fix this…
Paul Kononenko
  • 9,407
  • 4
  • 18
  • 13