CODEWITHSUNDEEP
csstypographykerningletter-spacing
Vinicius Santana
Vinicius Santana

Reputation: 4106

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

Upvotes: 1

Views: 2353

Answers (2)

user663031
user663031

Reputation:

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.

Upvotes: 2

caldera.sac
caldera.sac

Reputation: 5088

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.

Upvotes: 2

Related Questions