Baseline is an imaginary line that supports all the letters in your text. Thanks to that important definition we can measure the vertical spacing between the text lines, text blocks and other elements on the page.
Text is always about typography, whether it is printed or digital. Some typography rules can be implemented to your interface design and make your life easier. One of the most important concepts in this field is the baseline.
Several typography elements appear based on this concept. First of all, descenders, which are letter elements that are extended below the baseline. Lining figures, that unlike old style figures are aligned by height without any additional elements such as descenders and ascenders. Capital and lowercase letters are built depending on the baseline: some of them are strictly aligned, some of them like “O” and “S” are slightly extended below the line to get the visual harmony.
There is another helpful tool that was built on the idea of the baseline: it’s the baseline grid, especially the 4px grid that is used most commonly.
Baseline grid is normally applied to create the vertical rhythm between text blocks and other elements of the interface. The principle is simple: instead of aligning the content according to the text boxes, you can build your composition in accordance with the distance between baselines and cap lines (the height of capital letters). It definitely makes the designer’s life easier, as you can achieve the visual balance in details without measuring it pixel by pixel.
You may use the baseline grid to specify the distance between UI elements and simply traspher the UI specs into padding code for development.