CODEWITHSUNDEEP
htmlcssfontswebfonts
Morgan
Morgan

Reputation: 387

Left space on first letter CSS

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!?

Image of kerning problem on first letter of sentance

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?

Upvotes: 22

Views: 19582

Answers (8)

Michal Kliment
Michal Kliment

Reputation: 313

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;
}

Upvotes: 7

A.J. Hernandez
A.J. Hernandez

Reputation: 968

This problem was driving me crazy so here is an elegant solution that uses ::first-letter selector. For example I was able to fix my spacing issue by adding:

#yourDiv::first-letter {margin-left:-5px;}

Hope this works for others that were in my situation. Here is a link for more information: http://www.w3schools.com/cssref/sel_firstletter.asp

Upvotes: 1

some_groceries
some_groceries

Reputation: 1192

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"

Upvotes: 0

Lafontein
Lafontein

Reputation: 240

You can use Gill Sans font. It is very similar to Lato. Problem is in Lato font itself not in Css.

Here is your link for GillSans

Upvotes: -1

Anthony
Anthony

Reputation: 37065

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.

Upvotes: 23

rajesh
rajesh

Reputation: 1485

Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.

The best way to solve this is to set all the margins and paddings on the html and body tags to 0:

Add this CSS:

html,body {
    font-family:Lato;
    margin:0px;
    padding:0px;
}

p{margin-left: 11px;}

DEMO

Upvotes: 0

Aaron
Aaron

Reputation: 10430

Try using first letter 

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

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

Upvotes: 4

Reptar
Reptar

Reputation: 372

The white space is there because it is a header. You can align it to the left by doing:

margin-left: -10px;

Upvotes: 0

Related Questions