Text in p tag not left aligned properly

Question

I have two lines of text in ap 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

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 class="footer-title"> <span class="adjust-left">LET'S WORK</span><br>TOGETHER </p>

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

Answer 2

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

tags.

<p class="footer-title"> LET'S WORK </p>
<p class="footer-title">TOGETHER</p>

Answer 3

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 .