Use this grid template and layout process to align text, UI elements and other visual content along both horizontal and vertical axes
Recently, we’ve been successfully experimenting with a 6px baseline grid coupled with the 960px grid system designed by Nathan Smith. As Pierre pointed out in his blog post, this system has three advantages:
- Simplifies the design process by removing the “chance” factor (no more questions);
- Decreases the time spent at positioning elements;
- Increases the feeling of organization in our design by articulating all the graphic elements with type.
The baseline is designed to be compatible with standard font sizes: 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 points. These sizes prove to be extremely useful when combined with leading derived from 3. For example, body copy can be defined as 14/18 (14pt size and 18pt leading). Small copy can be defined as 9/12. The magic of the grid operates and all these elements suddenly align; same if we choose to create a text block with type set slightly bigger (for example 21/27). Copy aligns itself every six, every four or every nine lines.
We hope that you’ll find this grid useful, not just as another trend to follow, but rather as a holistic strategy to envision and execute simple, clear and balanced design projects.
What you’re downloading:
A glimpse into the files up for download.