1

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 have to touch the markup. My question then is:

Is there a way to change the spacing between letters for only a certain range of a string using CSS or SCSS?

Code example:

HTML

<h1>Software</h1>

CSS

h1{
   letter-spacing:-0.13em; //Is there a way to specify a range here?
}

Here is the plan B:

h1{
  font-size:5rem;
  font-family: 'Comfortaa', cursive;
}
span{
  letter-spacing: -0.13em;
}
<link href='https://fonts.googleapis.com/css?family=Exo+2|Michroma|Comfortaa' rel='stylesheet' type='text/css'>
<h1>SO<span>FT</span>WARE</h1>
Vinicius Santana
  • 3,936
  • 3
  • 25
  • 42
  • As of my knowledge, not with `CSS` for your current requirement.. – Guruprasad J Rao Jan 21 '16 at 07:32
  • CSS can't do that for you. You should use Javascript to get all h1-Elements, iterate through the string and replace "t" with "t" – Benjamin Schüller Jan 21 '16 at 07:44
  • I'm confused. If you are not going to change the mark-up, then how do you intend to tell the computer that you want extra spacing between the "f" and the "t"? CSS is **based** on markup. It's rules are defined to apply to selectors whose meaning is determined based on markup. If you are asking if there is some kind of CSS rule such as `span { letter-spacing: 1em between "f" and "t"; }` then no, there is not. –  Jan 21 '16 at 10:33
  • What if the font used for this text 'software' is not available in a user's browser, and another font gets used? Do you still want to have less space? If you do, this *is* markup – or an image – but I bet you don't—it depends on the *font*. – Jongware May 17 '16 at 12:35

2 Answers2

2

What you want is normal typographical behavior, often referred to as "kerning", which adjusts intra-letter spacing in visually pleasing ways. For example:

enter image description here

Kerning is a function of the font. In other words, some fonts have kerning data, and some don't. In the example above, the font is Times New Roman, which does contain kerning information. As you can see, the "f" and "t" are perfectly positioned.

Comfortaa has no kerning. To solve your problem, use a font that contains kerning data.

1

you cannot give a range, but you can try it in this way. this may help to you.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
      .myclass{
        letter-spacing: 10px;
      }
    </style>
</head>
<body>

  <h1>I am a <span class="myclass">Software</span> Engineer</h1>



</body>
</html>

put your specific string inside <span></span> tag,like above.

caldera.sac
  • 4,918
  • 7
  • 37
  • 69