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

x ov gjqpy bdfhklt CAPS ÂÊÁËÈ

A glyph is designed on a two dimensional canvas. For the latin writing system the height of this canvas is consistent and width may vary. Glyphs are placed on a baseline. x is on the baseline and the top of x defines x-height. Round and pointy shapes appear smaller so are optically corrected. Descenders extend below the baseline. Ascenders, capitals go above x-height. Browsers align text with different fonts (in the same paragraph) by baseline.

So why is the build in margin? Glyphs need whitespace around to be aligned to each other.

What can we do to influence these margins?

1. Choose your fonts wisely.
2. Specify line-height p { line-height:0.5EM;}.
3. Baseline shift .shift { top:-.5em; position:relative; }
4. And wait for CSS3 module: line.

General advice: do not adjust a font yourself unless you are absolutely sure what you are doing. One of the many things you'll encounter is hinting. Windows needs hinted fonts and hinting is hard to get right. Also the way fonts are loaded (@font-face) will load a local copy if it exists. You can disable local fonts by a hack. Your mileage may vary.

Answer 2

You can do it with line-height

I know it's not too common in HTML5, and is more HTML4.1, but...

<font style="line-height: 5px;">

and if it's really that important:

<font style="padding: 5px;">L</font>
<font style="padding: 5px;">o/font>
<font style="padding: 5px;">r</font>
<font style="padding: 5px;">e</font>
<font style="padding: 5px;">m</font>

Answer 3

The native margins for text elements are as follows (at least in Firefox and Chrome):

Working Example

 p{margin:16px 0;}
h1{margin:21px 0;}
h2{margin:19px 0;}
h3{margin:18px 0;}
h4{margin:21px 0;}
h5{margin:22px 0;}
h5{margin:24px 0;}

To remove them you'll have to re-set the margin like so:

p, h1, h2, h3, h4, h5, h6{margin:0;}

Answer 4

I think is kerning what you intend to describe

take a look to this library

http://kerningjs.com/

CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.

Print designers have had it easy for way too long. This is 2012; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that, use Kerning.js!

it's free