This chapter is from the book
This chapter is from the book
This chapter is from the book
Terminology
The vocabulary that describes the various components of a grid might seem simple, but it can also be surprisingly unspecific. For example: the notion of a column seems straightforward enough, but on a page based on an eight-column grid, a designer might create a layout with only two columns of text, rendering the meaning of that term imprecise. Even books about the craft of grid-based design don’t always agree on terminology, with some using terms (e.g., regions, fields) that are missing from others. For the purposes of this book, then, it’s important to establish some common ground terminology as we proceed further into more practical discussions of grids.
units
The building block of any grid, a unit is the smallest vertical division of the page (i.e., units are measured in width), upon which columns are built. Units are typically too narrow to house most textual content.
columns
Columns are groups of units, combined together to create workable areas for the presentation of content. Most text columns, for example, require two or more units to be workable. A grid system of, say, sixteen units can be combined into two columns of eight units each, or four columns of four units each, and so on.
regions
Regions are groupings of similar columns that form parts of the page. For example, in a four-column grid, the first three columns from the left might make up a single region for the display of one kind of content, and the remaining column might form another region.
fields
Fields are horizontal divisions of the page (i.e., fields are measured in height) that help a designer to visually pace the placement of elements on the Y-axis. Fields can be calculated in many ways, but using the golden ratio is one of the most effective methods.
)
baseline grid
In traditional typography, the baseline is the invisible line on which letterforms rest, e.g., the bottom edge of a capital E rests on the baseline, while the descender of a lowercase p will fall below the baseline. The baseline grid is formed by a uniform, top-to-bottom repetition of baselines spaced apart according to the leading or line-spacing of the text.
)
Figure 3.2 The baseline grid is based on the invisible lines on which letterforms rest.
horizontal vs. vertical orientations
These concepts are notoriously easy to confuse (a unit can be thought of as either a horizontal or vertical division of a page, depending on one’s point of vew), so this book refers instead to the columnar grid (divisions of the page measured in width) and the baseline grid and regions (divisions of the page measured in height).
gutters
Gutters are the empty spaces between units and columns. When units are combined into columns, they incorporate the gutters between them, but not the space to the left of the leftmost unit nor the space to the right of the rightmost unit.
margins and padding
Margins are the space outside a unit or column. Padding is the space within a unit or column. Margins are generally used to create gutters, while padding is generally used to create a small, visible inset within a block of text inside a column.
elements
An element is any single component of a layout. Examples include a headline, a block of text, a photo, or a button.
modules
Modules are groups of elements, combined to form discrete blocks of content or functionality. A registration form, for example, is a module composed of several constituent elements such as a label, a form field, a button, and so forth.