0

I am learning about letter spacing. I am using the em unit here for letter spacing. The element on which I use the unit does not have any parent except html. But if I change the font size of the HTML, the letter spacing does not change.

At first, the HTML tags were not present in this code. I tried adding them to see if it works. I also tried to set font-size at :root, but none worked.

html {
  font-size: 2px
}

h1 {
  font-family: 'COUTUREBold';
  margin: 0;
  font-size: 38px;
}

.wide {
  font-size: 24px;
  letter-spacing: .5em;
}

.narrow {
  font-size: 48px;
  letter-spacing: -.15em;
}
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/couture" type="text/css" />

<h1>Hello World!</h1>
<h1 class="wide">Hello World!</h1>
<h1 class="narrow">Hello World!</h1>

Code: https://codepen.io/KAEKrishCodes/pen/ExOYxPY

tacoshy
  • 10,642
  • 5
  • 17
  • 34
imkrishnasarathi
  • 5
  • 2

1 Answers1

0

If you want the letter spacing to be affected by the font size of the html element, you can use the rem unit instead of em for letter spacing. The rem unit is relative to the root element's font size, which is, in most cases, the html element. You'd want to change all mentions of em into rem in your code.

For example:

letter-spacing: -.15em;

Would become:

letter-spacing: -.15rem;

Not sure whether I'm correct on whether this is what you want to do, but I hope it helps.

radio
  • 93
  • 7
  • This element does not have any parent. So if we use em here, what is it referring to? – imkrishnasarathi Jun 05 '23 at 07:51
  • I'm sorry, but I'm not sure why you would have an element without a parent apart from the body element. Can you not just use the `rem` element, or is the code not working correctly? – radio Jun 05 '23 at 12:20