Text in p tag not left aligned properly-CodePudding

I have two lines of text in a p tag that I break with a br tag. But they don't seem to align properly, this is not for every letter, but in my case the L has a little whitespace left to it.

Check image for whitespace

This is my html code:

<p >LET'S WORK <br> TOGETHER</p>

And this is my css code for the class:

.footer-title {
    font-size: 45px;
    color: #FF4545;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: left;
    font-family: sans-serif;
}

Why are those particular letters not aligned? And how can I fix this?

CodePudding user response：

If you want to be a break between this 2 sentences, use 2 different

tags.

<p > LET'S WORK </p>
<p >TOGETHER</p>

CodePudding user response：

Interesting, I inspected the attached image.

I think the issue is related to the font type being used because I also see a whitespace after the L letter.

Please try to use another font and see if the issue remains.

UPDATE:

So as we expected it, it is something related to font design. you can work around it with that.

.footer-title {
    font-size: 42px;
    color: #FF4545;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: left;
    font-family: sans-serif;
    border-left: 1px solid black;
}

.adjust-left {
    margin-left: -4px;
}

<p >
    <span >LET'S WORK</span><br>TOGETHER
</p>

I added the left border, so you can see they are aligned. you can remove it.

CodePudding user response：

These extra whitespaces are called "sidebearings" and are defined in the font's metrics – so the alignment is an expected result.

Depending on the used font-family, its width and also the current font-size, the whitespace/offsets will be more or less perceivable.

You could mitigate this by applying a negative margin as suggested by @od-c0d3r.
Just use relative units like em for a more responsive adjustment.

range.addEventListener('change', (e)=>{
  document.body.style.fontSize = e.currentTarget.value 'px';
});

.wrap {
  border: 1px solid red;
  display: inline-block;
}

.footer-title {
  margin: 0px;
  font-weight: 400;
  font-family: Arial;
  margin-left: -0.07em;
}

<p style="font-size:16px;">font-size: 
<input id="range" type="range" min="24" max="200" step="2" value="72" >
</p>
<div >
<p >LET'S WORK <br> TOGETHER</p>
</div>

If you need a perfectly cropped text element, you could create a <svg> element via opentype.js.
See this codepen example.