Labels done right

So, you want to make the proper button. (Which designer does not want to?) And then you come to spacing and text positioning. It just looks add in most cases. And to understand what goes wrong, you have to dive really deep into font design and typography.

Luckily, I took a course in font making and understood really a lot about font anatomy and the essence of making and using a font. The skills helped me really a lot in my typographic mastery and what makes great font and its usage.

So, the problem about label positioning the label inside the button is how the letters are designed. There is not only the space for the letter itself, but also ascenders and descenders for special signs and the ascending and descending parts of letters on the top and on the bottom respectively. They have different space and are individual for each font. So depending on the designer's choice, these spaces have different values and together with the line height value it creates the proportions in the text box you see. (By the way, the thumbnail of this post shows the Helvetica font letters in the Glyphs software, which is used for font design.) This leads to the necessity of balancing spacings and leads to unround numbers and confusions.

The solution which is gaining popularity is text box trim or vertical trim, how it is called in Figma. You can make a setting and use the cap height (capital letters height) instead of the line height. This way, the text box gets smaller and designers can control spacing better and the positioning looks better visually balanced. You can read about this method in this article.

The problem with this approach is the development part. The CSS has introduced the property for this case, but it seems not to be supported by all browsers. So it is not yet possible to implement it with little effort and easily. In this documentation, you can read the CSS details.

.text-box-trim {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

So regarding this, several advices:

• Discuss with your development team which approach you use. Otherwise, you will have to change the settings and spacings in your project.
• Experiment and discover font details. You can open fonts in Glyphs or similar programs to discover the "anatomy" of the font. Find font types which are comfortable for you to work with and use the knowledge of its proportions and vibe. Use the types of fonts you are comfortable with.
• Explore the particularities of the language you work with and explore the space you need for ascending and descending elements (each language may have different letter frequency and special characters). Experiment with different labels to explore which spaces you need for your characters.

‍