2

Do all font ascenders/descenders have the same space above/below? I'm trying to write a global stylesheet which will take away top and bottom space from h1-6 elements which I found to be no more than 8 pixels or so (which lowers as the h elements lower.) The reason I'm considering this is because I won't have any tall characters which will occupy the ascender/descender so I really have no usage for it (plus I need exact precision in the positioning of my elements.)

My question is if all fonts have the same ascending/descending space, or if it varies by font or OS or browser.

Jace Cotton
  • 2,004
  • 1
  • 21
  • 38
  • Interesting question! Afaik in reality they CAN have different paddings/margins, this is why using a CSS reset is highly recommended. Modern browsern should render the same here, but especially legacy browser will not. – Sliq Nov 03 '13 at 13:29

1 Answers1

5

Do all font ascenders/descenders have the same space above/below?

Nope

It varies by font, by OS, by Browser, and probably lunar cycle as well. You can expect fonts to consistently be inconsistent.

Some fonts don't even have the concept of ascenders/descenders. What would you do if an icon font was used? Some fonts align descenders such that they don't even descend below the baseline. Others, such as calligraphic fonts tend to drop below the baseline, whether or not the character has an actual descender.

When I'm building pages off of comps that don't include font-size descriptions, I often have to render a large set of varying font-sizes of a particular family. I have a utility webpage that I use locally so that I can determine which font size must be used, and what font alignment will work.

Example:

font size example

This example uses Arial, and even Arial renders differently for some sizes between Chrome, Firefox and IE. When you're using sets of fonts you then also have to worry about all the other options in the set, in case the user doesn't have that font installed.

If you absolutely must have an exact rendering, you should be using an image to render the text. Use the [alt] attribute to reference the text in the image. It's not as manageable as text because it requires re-rendering every time a content change is desired, but it works well enough, especially for things like logos which absolutely must render in a specified manner.

Community
  • 1
  • 1
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • Source/reasoning? Why it varies? Resources I could find information on this? This is not an answer. -1 – Jace Cotton Nov 01 '13 at 18:28
  • @JaceCotton, I'm getting there, I'm getting there. – zzzzBov Nov 01 '13 at 18:29
  • Okay. Hah "lunar cycle". :P Thanks for the answer. I do wish there was some set guideline that all fonts follow, but I guess that's not gonna happen considering there's so many fonts... That's what I was wanting to know. Thanks! – Jace Cotton Nov 01 '13 at 18:30
  • 2
    Guidelines that all fonts follow? Why? Do you want all the different fonts to be, ehm, the same? – Mr Lister Nov 03 '13 at 15:43