Cyril Chandelier

For the first time in years, I had to dig inside one of the fundamental things we use everyday and everywhere: fonts.

Do you know how a fond is built? Applied to iOS, do you know how a UILabel will render a font?

First of all, a font is basically a container for vectors representing symbols from different categories such as letters, numbers, punctuation and other characters you can usually type with your keyboard. The more existing symbol a font contains, the more complete it is.

Within a font editor (Glyphs, Fontlab or whatever software allowing you to create and / or edit fonts) and for each symbol, the font “creator” draws vectorial paths according to some kind of grid. In iOS, UIFont’s grid looks like:

The baseline if the base of all symbols. Then you have to distinguish the cases between minuscule letters with the x-height (X-height in the previous figure) since the minus “x” is supposed to be a perfect lower character; and the capital letters having their theoretical height represented in cap height.

Space on top of the baseline to the higher symbol Y offset is called the ascent or ascender. Space under the baseline and used for letter legs is called the descent or descender. There is more space under descent, it represents a gap to add between lines.

Adding the ascent to the descent and the line gap results in the line height which is basically the height of a single line of text.

That explains a lot! Did you ever notice that a label vertically centered in a view is not perfectly in the middle of the view?

This is not a bug, just the way a font is rendered in a label. The extra space here is just the combination of both ascender and descender, and this space could be use (even if it is not in this case) to display accents, cedillas or other things that will be drew outside of the cap height bounding box.

Now, how can we respect a graphical chart dictating exact point size spacing between labels starting from the exact bottom of a label and ending to the exact top of another one?

So now, I have to work on a solution, the basic idea behind it is to subclass the UILabel class to have it read the metrics of UIFont’s and know its exact height. Even if it’s not working perfectly for every font (especially for some custom fonts that seems to be badly created) at the moment, the result is promising!