This article is a repost of an answer I wrote for Stack Overflow.

I first had to dive into the world of font metrics when I was trying to create some custom views to display vertical script Mongolian text. After trying unsuccessfully to modify TextView to behave as I wanted, I finally gave up and decided to draw my own text. The content below was one of the lessons I learned along the way.

Definitions

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 the 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:

--

--

Suragch
Suragch

Written by Suragch

Flutter and Dart developer. Twitter: @suragch1, Email: suragch@suragch.dev

No responses yet