Embedded padding/margin in fonts

Question

It seems that all fonts have some sort of embedded padding or margin. By setting:

margin: 0px;
padding: 0px;

You never get what you want. Does anybody know why this is?

Answer 1

It sounds like the issue you are having is not with the CSS but the font itself. Most fonts define a baseline, x-height and line-height out-of-the-box. Your specific issue is likely with the font's leading, the space between lines. Sometimes these values can be wildly inconsistent. If you are really trying to get a specific font to line up correctly, I would recommend taking a look at FontLab and editing the glyphs/baseline/line-height for the specific font you are working with.

You can also look at a web-safe version of the font. These types of fonts usually have been specifically spaced to render best on the web. This isn't always the case, but it might get you the results you are looking for. Check out Google's library of web fonts here.

Update

This answer has received enough attention that I decided to add the first comment below to the answer and expound on it.

Browser Reset: Every browser will set default states for many of the reserved HTML tags like a and strong. There are other things defined by default including fonts, line-heights, weights and sizes. This could have an affect on the rendering of a font. Generally this is localized to specific browsers. So, by using a CSS reset, you can eliminate default rendering issues in browsers. Eric Meyers Reset is a good reset, but there are definitely others. Try using different ones to see which works best for you.

However, CSS resets work by targeting all browsers and setting them to all be the same. Some people prefer to use something that, instead, targets only the issues with each browser. That is were Normalize will be better.

There are also issues that a CSS reset will not fix. Such as font aliasing (making the fonts seem smooth rather than jagged). Since some browsers and operating systems do not add anti-aliasing to fonts, you will also see glyph width differences. This, unfortunately, is unavoidable in most cases. Some people go the route of using a flash font replacement tool like Cufon or Sifr. This too has it's own list of issues (such as the FOUC).

Another Update

One other issue that is still out there is the problem with kerning, or the space between glyphs. There is a CSS property letter-spacing that will allow you to do a global kern on a block of text, but it lacks the ability to target individual glyphs like Photoshop or InDesign. The kerning is also based on whole-pixels, so you are limited by what you can achieve. It also has issues with IE and is not as reliable as one would hope. There is a javascript called kerningjs that is pretty decent but it, too, is whole-pixel based and therefore not as accurate as rasterized text.

On the whole, fonts on the web have gotten better over the past few years. Sadly, we are still dealing with issues from the past, when fonts were only intended to be printed or rasterized. There is hope on the horizon for us font enthusiasts, though. As @allcaps said, the CSS3 specification for linebox is out there, so it's only a matter of time until it is widely accepted!

Answer 2

you can use line-height and letter-spacing padding/margin in fonts... otherwise use custom css for each heading........

/*use line-height*/
.font{
line-height: 1px; 
letter-spacing: 1px;
}

or use custom css......

  h1{margin:1px 0;}
    h2{margin:1px 0;}
    h3{margin:1px 0;}
    h4{margin:1px 0;}

using these css before use reset css .......

Answer 3

If you want use space between lines in a paragraph, you can use:

line-height: 3px; /*3px is an example*/

Or, if you use space between letters, you can use:

letter-spacing: -2px;

Hugs, Vin.

Answer 4

What's about resetting the margin and padding value to zero in all

*{
  margin: 0;
  padding: 0;
}

Answer 5

I have run into this pain a couple of times when using some webfonts for icons and gained better control by placing them in an absolute positioned container.

HTML

 <div class="relative">
     <div class="webfont">&#10004</div>
 </div>

CSS

 .relative { position:relative; }
 .webfont {  position: absolute;

             top: -5px; 
             left: -5px; /* easier control with these values */
           }

This felt like a better way to control things cross browser, rather than say, using positive/negative margins and paddings.

Giving the text block a container and class we have much more cleaner ability to tweak it's position cross browser. ( IMO ).

Might be something there.

Cheers,

Rob

Answer 6

Here is my Opinion

• The margin is the distance from each side to the neighboring element and the margin property can be set for the top, left, right and bottom of an element
• padding is the distance between the border of an HTML element and the content within it.

But in your case you dont really need these both you , as you are interested in font spacing , there is one css property called letter-spacing

• The letter-spacing property increases or decreases the space between characters in a text

Try

 h2 {letter-spacing:-3px}

The letter-spacing property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".