Text in p tag not left aligned properly

Question

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 class="footer-title">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?

Answer 1

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 class="wrap">
<p class="footer-title">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.