Search code examples
androidmaterial-designpixelscreen-density

Why do they use “dp square” unit for measurements of baseline grid in relation to “icons”, but “dp” unit in relation to “type”?


In this specification document for Material Design in Android, it is written,

All components align to an 8dp square baseline grid. Type aligns to a 4dp baseline grid. Iconography in toolbars align to a 4dp square baseline grid.

Why have they used the dp square unit for the baseline grid for UI components and iconography, but the dp unit for the type?


Solution

  • When they say "8dp square" they simply mean that both the horizontal and vertical gridlines are 8dp apart. When it comes to typography, there is not really a concept of aligning to vertical gridlines since the kerning parameters for the type determine the spacing between letters. So they say 4dp instead of 4dp square. Notice that the sample images for widgets have both horizontal and vertical gridlines while the typography images have only horizontal lines. It's that simple: vertical gridlines for widgets; no vertical gridlines for text.