How to remove spacing at the beginning of a word?

Question

I am trying to remove the spacing at the beginning of my h1 tag. Please see the attached screenshot. I have highlighted the h1 tag in blue so you can see the extra space at the beginning of the wording. It amounts to around 1 or 2 pixels. The space is not margin or padding. The space is definitely from the h1 element because I have removed the rest of the elements from the page. What could this space be? and how can I remove it?

UPDATE: Please see this jsFiddle for the example code

Answer 1

This vertical sliver of whitespace before each character is almost certainly a characteristic of the font you're using to render this <h1> text. Font designers manage inter-character spacing by putting some of the space at the end of characters and some of it at the beginning. They typically optimize this for both optical (eyeball) alignment at the beginnings and ends of justified lines and also for nicely balanced intra-word spacing.

If you must get rid of it, there are some things you could try.

1. Negative tracking. Try a small negative CSS letter-spacing attribute like .05em. This will cram your characters a little closer together. Be subtle with this effect.

2. A boldface font choice. Often the font designer makes the font bold by thickening the strokes symmetrically about their centerline. This may eat up a bit of the leading whitespace.

3. As a last resort, render the text into a graphic (png or gif) and then trim its edge. This won't look very good.

Answer 2

In this case the issue was due to the padding on the body of the HTML markup.

Adding this clears it;

body{
 margin:0px;
 padding:0px;
}

Whether this is the solution in your scenario is impossible to say without the full code.

http://jsfiddle.net/jU43x/5/

Answer 3

Adding margin-left: -3px; to the h1 tag will fix this: demo

h1 {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 97px; 
margin-left: -3px;
}

Answer 4

The analysis by @OllieJones is correct: you are dealing with details of font design. In effect, you are trying to undo some decisions by the font designer, in a specific context; there is no general mechanism for that.

What you can do is to shift the content left. The amount of the shift depends on the specific font properties and the characters involved. In the given case, a shift of 5px pushes the “C” against the left edge. But beware that if the first letter is something else, it probably gets pushed too much. Different letters have, on purpose, different spacing around them in the font design.

Content can be shifted using positioning or, perhaps safer, using auxiliary markup and a negative margin:

<style>
h1 > span {
    display: block;
    margin-left: -5px
}
</style>
<h1><span>Covered with grass then detained</span></h1>

This lets you use normal styling for the h1 element. For example, if you draw a border around it, the letter “C” will touch the border. I presume this what you want (though it would be a typographic error). Alternatively, shift the h1 element left simply by setting a negative left margin on it.