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

Its not a problem with the font as such. Yes, as @matthew said, the font design itself has some character built in. For example, check out difference between say "Segoe" family and "Verdana" family. You will keep on resetting your css if you need to use both. One style just won't work.

The larger part of the problem lies in the way different browsers render even on the same OS. Heck, even different versions of IE render differently. ClearType, Anti-aliasing, font smoothing, software rendering instead of GPU rendering, rendering engine itself, etc. etc. all play their role to make sure you don't end up with pixel-perfect design across all browsers across all OSs.

ClearType tries to align with pixel-grid causing another set of problems with subtle differences in height.

This link is very old, but still very relevant: http://www.joelonsoftware.com/items/2007/06/12.html

See Also: http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html

See Also: https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers

See Also: CSS font differences between browsers

Your best bet would be to keep tinkering with css until you get close enough.

Answer 2

The fonts itself has problems it seems. CSS can be used as shown above to solve the problem but still it should be said that it is better in your scenario to fix up the font files itself.

Check out this page as it will give you better insight on how to edit a font: http://mashable.com/2011/11/17/free-font-creation-tools/

Answer 3

The "padding" at the top and bottom of fonts is essentially reserved space for diacritics (https://en.wikipedia.org/wiki/Diacritic). Some scripts stack multiple diacritics on some letters, including capitals (for example, Vietnamese https://en.wikipedia.org/wiki/Vietnamese_alphabet) so a font designer that forgets to reserve some place for them won't be able to extend his font later. Also, horizontal scripts require some separation (leading) between lines to be readable.

Only very specific glyphs like box drawing elements extend to the limits of a glyph box http://www.unicode.org/charts/PDF/U2500.pdf That's also why the "padding" is built-in each glyph. If it was an external property it would not be possible to differentiate between glyphs intended to be jointive and glyphs that need some separation (in other words the amount of padding is a glyph property no a whole-font property).

The following example requires a good font with decent Unicode coverage (http://dejavu-fonts.org/ works)

Jointive box drawing elements
↓
┃ÇŖŞ
┃ẤỄǛȰ┃U ← You really need to include the "padding" to align with box drawings
  ↑
 Latin capitals with multiple diacritics (really crowded)

Lastly fonts stem from very old technology (movable type), and the conventions used to describe them still refer to fifteenth century habits, which makes them quite un-obvious to laymen.

(See also http://www.webfonts.info/node/330 for info on complications added by computer font formats)

fonts opentype text-rendering

Answer 4

After looking at the html source of a html document found out that after the normal margin/padding added by all the browsers, chrome by default adds its own webkit's margin/padding properties.

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

Solution is instead of normal

*{
margin:0;
padding:0;
}

Append the style with

*{
margin:0;
padding:0;
-webkit-margin-before:0;    
-webkit-margin-after:0;
}

As -webkit-margin-start and -webkit-margin-end are already set to 0px, there is no use of setting them in here.

Tell me if that works! :)

Answer 5

I often run into the same issue, especially when trying to get text to top-align with something beside it that isn't text, such as an image.

Here's a technique I've had some success with. Select a portion of the text so that a colored background appears behind it. The top of the selection highlight will reveal what the font considers the "top" and "bottom" of the letter. Take screenshots of the font at various sizes and across multiple browsers. Zoom in on the screen capture in Photoshop and count the number of pixels from what you believe "should" be the top and the actual top. Calculate the percentage that number of pixels represents within the entire selection height.

Then set a negative top margin on the text in ems that is equal to the percentage of the "overflow." So if the text should be 10px tall and it's actually 12px tall, then give it a negative top margin of -0.2em.

Then wherever you assign the font-family that's causing the problem, also include this negative top margin as well. You can use the same technique for bottom and side overflow as well, but I typically find it's the top that causes the biggest headaches.

Answer 6

The reasons of this pecularity of the computer fonts are mostly historical. In the past, fonts were the sets of small metal blocks with one character on each, and the height of these blocks had to be enough to contain all the elements of any character, including descendants, ascendants and diacritical marks. The typographic tradition has defined the font size as the height of such metal blocks. That's why almost all actual characters are usually much smaller visually than the font size set for the text and there is some white space above and below them.

Here is a good article explaining the historical roots of the main typographic measurements: http://www.dev-archive.net/articles/typograph1-en.html#Ch22