Left space on first letter CSS

Question

I am using the Google font 'Lato' and I am having problems with having title and text align properly to the left... The font (when large) appears to have a kern space on the first letter and wont align left without space!?

So here also a fiddle:

<h1>Hello</h1> <p>Hello, this is sentance</p>

FIDDLE

Also, adding a negative value on the margin-left (magin-left:-10px) just seems like a terrible workaround... and this would not work overall for different font-sizes, unless individually adjusted as needed... surly there must be a better solution?

Can anyone help?

Answer 1

Okay, everyone who says it's due to automatic padding or margins due to the line being a header is wrong. See this fiddle as evidence:

http://jsfiddle.net/w25j9L7o/26/

The leading space is not being rendered by the browser or the CSS or anything else at the DOM/Browser level. It is the font. The H glyph has some built-in padding around it, and the larger the font size, the more noticeable that padding will be.

Even if you use negative margins to compensate:

1. The character itself is shifting over, which includes the empty space, so that empty space will be sliding over as well, affecting layout. The visible character isn't sliding into the empty space, the entire character (visible and invisible) is shifting to the left if you use CSS to fix it.

2. You would need to adjust that offset based on the font-size or figure out the underlying percentage so that the offset grows with any font-size set.

Or you can just use a different font that doesn't have this characteristic.

Answer 2

PX units are not such a good choice in this case. I recommend using EM unit if you working with font attributes like line-height etc. Because it's automatically calculated for each of font-size. It should look like this:

#yourDiv::first-letter {
   margin-left: -0.12em;
}

Answer 3

Try using first letter

h1:first-letter {
    margin-left: -10px
}

http://jsfiddle.net/w25j9L7o/1/

Answer 4

You can get kern.js from kernjs.com and edit your front kerning, like they said on their website "click and drag to adjust your kerning, line-height, letter placement, When you're done, copy the generated CSS and use it in your own stylesheet"