Suragch Suragch - 5 months ago 106
Android Question

Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics

This seems like a basic question, but I couldn't find a similar one on SO. While reading the documentation, I was having trouble grasping the concepts. I want to understand what the difference is between

top
and
ascent
and also
bottom
and
descent
. And where exactly is the baseline? Do you have a diagram to help me visualize it?

Answer

Let's first review what the documentation says:

  • Top - The maximum distance above the baseline for the tallest glyph in the font at a given text size.
  • Ascent - The recommended distance above the baseline for singled spaced text.
  • Descent - The recommended distance below the baseline for singled spaced text.
  • Bottom - The maximum distance below the baseline for the lowest glyph in the font at a given text size.
  • Leading - The recommended additional space to add between lines of text.

Note that the Baseline is what the first four are measured from. It is line which forms the base that the text sits on, even though some characters (like g, y, j, etc.) might have parts that go below the line. It is comparable to the lines you write on in a lined notebook.

Here is a picture to help visualize these things:

FontMetrics showing top, ascent, baseline, decent, bottom, and leading

Remember that when drawing on a canvas in Java and Android, going down is an increase in y and going up is a decrease in y. That means that FontMetrics' top and ascent are negative numbers since they are measured from the baseline (while descent and bottom are positive numbers). Thus, to get the distance from top to bottom you would need to do (bottom - top).

The leading is the distance between the bottom of one line and the top of the next line. In the picture it is the space between the orange of Line 1 and the purple of Line 2. According to this site, though, leading is usually set to zero. The descent-bottom and the ascent-top distances usually provide enough line spacing already.

Check out these links for more information: