1

Notice the small space before the letter L in the first two lines in the following image.

enter image description here

It's more notable the larger the font size, but it's there in the second line too. The fonts in this example are Noto Sans/Noto Serif and sizes are 60/12 pt, but it's the same with other fonts I've tried.

Is there a technical term for that space, and are there any fonts that don't have it, or any way in CSS to set it to zero regardless of the font and font size (setting a negative margin works but will depend on the font and size)? My first thought was kerning or letter spacing, but that's only between letters, it seems.

Here's a similar example in HTML and CSS, with both kerning and letter spacing set to none, but that initial space is still there.

p {
    font-family: sans-serif ;
    margin: 0 ;
    padding: 0 ;
    line-height: 1 ;
    letter-spacing: 0 ;
    text-indent: 0 ;
    font-kerning: none ;
}

.a {
    font-size: 5em ;
    border-left: 5px solid red ;
}

.b {
    font-size: 1em ;
    border-left: 5px solid blue ;
}

.c {
    font-family: serif ;
    font-size: 5em ;
    border-left: 5px solid green ;
}

enter image description here

I've tried googling, but without a specific term, I just get a lot of unrelated results.

Improve this question
7
  • 3
    Hi. Welcome to GDSE. I think the term you might be looking for is the "left sidebearing". It's not technically a space, but something which is a part of the font design itself. Its role is to enable letters at the left edge to line up optically (not geometrically). For example an L will likely have a different left sidebearing from an O, even within the same font. see example. Different fonts will have different left sidebearings.
    – Billy Kerr
    Jan 29 at 12:23
  • 1
    I'm not a CSS expert and coding is generally off-topic here anyway, but I found this article for you which might help. It discusses the problem and a possible CSS solution.
    – Billy Kerr
    Jan 29 at 12:38
  • Thank you @BillyKerr. Sidebearing is indeed the term I was looking for. The article you link uses negative margins, which I was hoping to avoid since it depends on the font and size. But it may be the only solution, I guess.
    – S.T. Veje
    Jan 29 at 12:50
  • Actually, since it also depends on the letter that begins the sentence, it's not really a solution at all. The only solution may be to use a different font.
    – S.T. Veje
    Jan 29 at 12:54
  • 1
    There's no CSS only way to fix this at the moment. The only way to do so would be to keep a list of values to use and then adjust based on the first letter (or you could render it to canvas and calculate that in live time but that's probably way more work than you'd want)
    – Zach Saucier
    Jan 29 at 13:31

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.