For Print: Baseline Grid

We use an 12-column grid with a 6-pixel baseline grid.

Always use traditional type sizes (9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72) and align type to horizontal baselines to ensure consistent craft in your layouts. The best way to do this is to combine the previously mentioned type sizes with leading in multiples of three (72 font size + 72 leading, 24 size + 27 leading, etc.). See the Typography section for more details.

Your grid should always maintain 12 columns, scaled to the width of your page, with one extra "alley" on each side of your columns.

Space between columns is typically 30pixels/points as a base; if you change your spacing between columns, make sure it is in multiples of 6, so the alleys between rows and columns of content can match.

For Web: Baseline Grid

We use an 12-column grid with a 8-pixel baseline grid. We have 4 breakpoints of 1920px, 1440px, 1024px and 360px. Adhere to the sizes in the typography section and align type's line-height to the horizontal baseline grid of 8px. See the Typography section for more details.

Your grid should always maintain 12 columns, scaled to the width of your page, with one extra "alley" on each side of your columns.

Space between columns is typically 24pixels/points as a base; if you change your spacing between columns, make sure it is in multiples of 8, so the alleys between rows and columns of content can match.