In user interface design, vertical distances between UI elements are specified by measuring from the baseline of the text. This is a universal practice across design programs to ensure accurate spacing and alignment.

Measuring Distances from the Baseline in UI Design

In UI design, a 4dp baseline grid is used to align typography consistently. Text line height, whether measured in pt or sp, must be divisible by 4 to ensure it aligns properly with the 4dp grid.

4dp Baseline Grid

Where type sits, it measures the vertical distance between text and an element.

DePaul University

Typeface - design of a letter form

Font - a collection of typefaces

Picking a typeface for it's style, legibility, and readability are effective when following the fundamental principal of typographic design

Type properties

Material Design Documentation

This image gives a quick visual overview of different typographical terms

A few typography terms

The height of a capital letter measured from the baseline. *a higher x-height makes the typeface more legible when smaller

Cap height

the height of lowercase of a typeface *the height of the typeface's lowercase x determines the x-height

X-height

Ascender - the height of letters that are above the cap-height or baseline Descender - letters stroke below the baseline

Ascenders and descenders

The thickness of a font's stroke.
The typeface can have between 4 to 6 weight types


Weight

Certain guidelines for the implementation of typefaces and fonts help create a balanced user interface. 

1- "Make sure that the header font and the body font gives the same impression to readers." The general message being delivered should reflect in both the header font and the body font.
2-"Don't combine two fonts from the same classification, but different families"
3-"Make clear differences in font weights". A bad implementation would give a weak weight to the header and a strong emphasis on the body text, which can confuse the user.


Learn Before

Related

Learn After

Learn After

Related