Baseline grid

The baseline grid, vertical grid use for setting type, is a common design need. GuideGuide provides two ways to create easy baseline grids. The following examples use a 16px grid.

The form

To create a 16px baseline grid with the form-view, fill in the height you wish your rows to be in the row height field, then click the Add guides button.

If you wish to have your baseline grid in a specific part of your design, select the layers where you wish to put your grid before following the directions above.

Grid notation

The first grid notation component you’ll need to create a baseline grid is a variable definition that contains your row height and a guide command.

$row = 16px |

This tells GuideGuide, “Make $row equal a 16px space and then a guide.” With $row defined, we need to call it in the grid notation. Because we want it to fill the page, we’ll make it a fill by adding the asterisk *.

$row* ( hl )

If we put those two components together, you get the final grid notation.

$ = 16px |
$* ( hl )

Need help?

Contact support