Comments on: letter-spacing https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 31 May 2022 14:06:01 +0000 hourly 1 https://wordpress.org/?v=6.6.1 By: Breezy https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1617798 Wed, 21 Mar 2018 22:26:06 +0000 http://css-tricks.com/?page_id=14063#comment-1617798 In reply to Jesse.

Chris’ solution didn’t work for me since I had a border around my text (a button) as well – so I added a “text indent” instead using this bit of css: text-indent: 15px; Obviously replace the 15px with whatever value your letter spacing is. Works great.

]]> By: Qodesmith https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1602786 Wed, 13 Jul 2016 01:25:30 +0000 http://css-tricks.com/?page_id=14063#comment-1602786 In reply to Jesse.

Got here from a google search of letter-spacing. Chris’ hack seems to work nicely!

]]> By: Muhammad Imran Nazish https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1600845 Fri, 08 Apr 2016 18:55:43 +0000 http://css-tricks.com/?page_id=14063#comment-1600845 Thank you for the help.

]]> By: Maria https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1597979 Thu, 12 Nov 2015 19:11:29 +0000 http://css-tricks.com/?page_id=14063#comment-1597979 Does anyone know what 100 A/V or 200 A/V equivalent in indesign is in css or in wordpress? I’m trying to communicate with my programmer and she says she doesn’t understand 100 or 200 A/V, I need to give her the numbers in wordpress language.

Anyone?

Thank you!!!

]]> By: Phil https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1587453 Thu, 11 Dec 2014 17:45:43 +0000 http://css-tricks.com/?page_id=14063#comment-1587453 “The most important point to note when using letter-spacing is that the value specified does not change the default, it is added to the default spacing the browser applies”

Nitpicking, but I think a better way to say this would be “does not replace the default” rather than “does not change the default”.

]]> By: asdasdfasdfasdfasdf https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1585440 Mon, 22 Sep 2014 13:16:49 +0000 http://css-tricks.com/?page_id=14063#comment-1585440

(however, a patch for Webkit support was submitted 10 months ago. Current status is unknown, but it is coming.)

With DirectWrite enabled for everybody since chrome 37, chrome now also supports sub-pixel values for letter spacing and font-size. However, at the moment end-users can disable direct write in chrome://flags if they desire.

]]> By: Carlos Villalta https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1584381 Tue, 12 Aug 2014 17:35:07 +0000 http://css-tricks.com/?page_id=14063#comment-1584381 In reply to Christopher Mischler.

Small Comment.

SVG support for firefox for letter-spacing and word-spacing is still not here, there’s a known bug.

https://bugzilla.mozilla.org/show_bug.cgi?id=371787

]]> By: Chris https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1584023 Thu, 24 Jul 2014 21:10:27 +0000 http://css-tricks.com/?page_id=14063#comment-1584023 In reply to Jesse.

Just stumbled on a similar issue myself.
I’ve done a bit of testing and it seems that that last letter also generates the letter-space which creates the visual imbalance in the layout.
I found this simple workaround to correct things:

h2 {
font-family: ‘Oswald’, sans-serif;
font-size: 1.25em;
text-transform: uppercase;
color: #dca013;
font-weight: 300;
letter-spacing: 1em;
padding: 0 0 0 1em; /* compensates for the extra spacing */
}

(although my instinct suggests it should be .5em)

]]> By: Hani https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1522791 Sat, 05 Apr 2014 15:59:26 +0000 http://css-tricks.com/?page_id=14063#comment-1522791 Oops seems like the word “span” encased with “less than” and “greater than” symbols got stripped in my last comment. That’s what I get for not previewing before posting. Anyway, I wrapped each of the characters with a “span”.

]]> By: Hani https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1522781 Sat, 05 Apr 2014 15:57:22 +0000 http://css-tricks.com/?page_id=14063#comment-1522781 In reply to fizz web design.

Well, the problem with that if letter spacing is static, it loses the ability for it to be truly responsive to the width of the container. I ended up wrapping each letter in a and defining a width of 4% on each character. (There’s 25 characters = 100% width). Seems to work out just fine. Although, I do lose the SEO benefit for that string of words. I suppose I can use javascript to wrap each character with a on page load to regain the benefit.

]]> By: fizz web design https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1521089 Sat, 05 Apr 2014 09:58:58 +0000 http://css-tricks.com/?page_id=14063#comment-1521089 Maybe a combo of text-align: justify and letter spacing?

]]> By: Hani https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1515868 Fri, 04 Apr 2014 16:14:36 +0000 http://css-tricks.com/?page_id=14063#comment-1515868 I’m not sure that parent-relative values work for letter spacing. I’m trying to figure out how to make a line of text’s letter spacing responsive to the width of its container and a percentage isn’t working. Any tips? (I may have to go with some javascript to resolve it.)

]]> By: T4NK3R https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1276413 Sat, 08 Mar 2014 09:47:37 +0000 http://css-tricks.com/?page_id=14063#comment-1276413 Remember to test (especially negative) letter-spacing in different browsers. Firefox and Chrome render spaced text quite differently : (

]]> By: Melanie https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1064061 Tue, 07 Jan 2014 15:23:54 +0000 http://css-tricks.com/?page_id=14063#comment-1064061 In reply to Jesse.

Wouldn’t box-sizing: border-box; resolve the issue?

]]> By: Cameron https://css-tricks.com/almanac/properties/l/letter-spacing/#comment-1020698 Thu, 02 Jan 2014 09:50:10 +0000 http://css-tricks.com/?page_id=14063#comment-1020698 In reply to Jesse.

I’ve also got this issue. Letter-spacing appears to add a bit of space to the end of the word on the right. In box-model terms, it’s the element itself (i.e. not margin or padding) which is proving to be a bit of a problem.

]]>