Text in p tag not left aligned properly

Ethan Van den Bleeken 0
Viewed 65

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?

text-align text-alignment fonts css html
3 Answers

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.

herrstrietzel0

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.

od-c0d3r0

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