Left space on the first letter of CSS

Question

I use the Google font "Lato" and I am having problems with the correct orientation of the title and text on the left. The font (when large) appears to have a kernel space in the first letter and does not align the left without space !?

So here is the fiddle:

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

Fiddle

Also, adding a negative value to margin-left (magin-left: -10px) just seems like a terrible workaround ... and it won’t work in general for different font sizes unless individually configured as necessary .. Awful should there be a better solution?

Can anyone help?

Answer 1

Well, everyone who says that this is due to auto-completion or fields due to the row being a header is incorrect. See this script for evidence:

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

The master space is not displayed by the browser or CSS or anything else at the DOM / Browser level. This is a font. The glyph H has a built-in gasket around it, and the larger the font size, the more noticeable the indentation.

Even if you use negative fields to compensate:

• The character itself is shifted, which includes empty space, so the empty space will also slide, affecting the layout. The visible character does not slip into empty space, the entire character (visible and invisible) is shifted to the left if you use CSS to fix it.

• You will need to adjust this offset based on the font size or determine the base percentage so that the offset increases with any font set.

Or you can simply use a different font that does not have this characteristic.

Answer 2

Try using the first letter

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

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

Answer 3

There is white space because it is the headline. You can align it to the left by doing:

 margin-left: -10px; 

Answer 4

You can use the font Gill Sans. He is very similar to Lato. The problem is not the latin font itself in Css.

Here is your link for GillSans

Answer 5

You can get kern.js from kernjs.com and edit your kerning on the front panel, as they said on their website: “click and drag to adjust your kerning, line height, letter placement. When you're done, copy the CSS you’ve created and use it in your own stylesheet.

Answer 6

This problem drove me crazy, so here is an elegant solution that uses a :: selector with the first letter. For example, I was able to fix the problem with the interval by adding:

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

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

Answer 7

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

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

Answer 8

Most web browsers have different default settings for base margins and indents. This means that if you do not set a marker and an addition to the body body and html, you may get inconsistent results on the page depending on which browser you use to view the page.

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

Add this CSS:

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

Demo