Baseline Grid

A baseline grid adds visual rhythm to your design. This rhythm is as important as a regular beat in music. Robert Bringhurst writes:

“Headings, subheads, block quotations, footnotes, illustrations, captions, and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase. This means that the total amount of vertical space consumed by each departure from the main text should be an even multiple of the basic leading.”

Selecting a Grid Size

Tyfy has a grid unit variable that, by default, is half the base line height. Line heights for all text elements are defined as multiples of the grid unit, enforcing the baseline grid. Paddings and margins for most elements are also defined as multiples of the grid unit. Smaller grid unit values create tighter designs. Larger values result in a design with more breathing room.

Tyfy provides custom SASS functions to calculate line heights and other grid unit-based measures. These functions help to maintain the grid.

The tylead Function

Frameworks like Bootstrap will apply a relative line height that applies to every element. While this is very easy to implement, the result will lack the consistent beat of vertical rhythm that Bringhurst describes. However, establishing that rhythm across elements with a range of font sizes can be difficult. To make things easier, Tyfy provides a custom SASS function called tylead ("tyfy leading"). The function calculates a grid-based line height for a given font size.

p {
  font-size:$tyfont-size-base;
  line-height:tylead($tyfont-size-base);
}
p.special {
  font-size:1.2rem;
  line-height:tylead(1.2rem,tall);
}

Using this function eliminates manual line-height calculations. For more information about the use of the tylead function, see the functions documentation.

The tygrid Function

The tygrid function is syntactic sugar. Instead of writing mathematical expressions using the name of the grid unit variable, you can use the (much shorter) tygrid function. The function takes a number argument and returns the number multiplied by the grid unit. The result is cleaner code where measures are written in terms of grid units.

div {
  margin-bottom:tygrid(1.5); // 1.5 times the default grid unit length
  width:tygrid(50); // 50 times the default grid unit length
}

For more information about the use of the tygrid function, see the functions documentation.