Vertical rhythm relates elements together through proximity and create an aesthetically pleasing appearance. In typography, vertical rhythm impacts the readability of the text and establishes visual hierarchy.
In order for visual rhythm to work, not only do elements have to take up the same amount of space on the grid, but the text within those elements needs to have the baseline sit at the same place on the grid line. Our UI Kit is designed with this in mind. (See “Bad Rhythm” below for an example of why consistently sized elements that do not have a baseline shift is insufficient)
position: relativeto shift text to sit on the baseline, and have SASS mixins to achieve this for a given font style.
inheritBaselineto true, and it will inherit the baseline of the parent - no longer shifting any text.
ca-type-blockmixin that creates the whitespace necessary for the contained text to shift “into”. That is, it creates the 1/2-grid
padding-bottomon a container for the text to have room to be shifted “into”.
top. It doesn’t create a new stacking context, but does create a new positioning context.
translateYcaused issues with stacking context, and breaking
z-indexrules, so dropdown menus and others started becoming unruly to manage.
ca-type-ideal-xstyles, padding on a box surrounding some text results in, visually, the box having reduced padding on the bottom even though the
padding-bottomvalues are exactly the same
To control positioning of elements close together inside a container.
There's no need to use the baseline grid for icons that are aligned optically.
Here are some references: