Why this module is important
Type grids provide structures for holding and moving content around static formats. The principles behind grids come from analogue type traditions, rooted in wood and metal setting and adapted for digital screens and viewports. A consistent approach to type grid systems is required, whether working in print or digital formats. Thankfully a lot of the terminology and approach to designing grids works for both media types. The differences are accentuated tensions between static formats and adaptable unlimited scaling possibilities.
Versatile practice in designing static print grids helps designers to adapt to designing for responsive digital formats.
2.2 Grids for type: the basic elements
Grids for type
Grids provide structure for typographic systems on pages or within digital formats. Having evolved for print over centuries, grids have grown from simple single-column formats to sophisticated options that enable designers to place information uniquely in digital formats.
There are different kinds of grids and their selection and use should be determined by the need to display content in a way that engages with audiences.
Form follows function.
The following section provides information on the kinds of grids available to designers and some of the terms that are commonly used to describe the way that grids are formatted.
Grids for page sizes
Grids have been designed with direct and harmonious relationships to page sizes. This enables type to flow with large amounts of ‘white space’ around content, or for pages to contain tightly designed grids filling page formats, depending on the commercial constraints of the publication.
Grids for print
Typographic grids for print media differ from digital grids in one major and all defining way – they are static and have unchanging relationships with the pages (formats) on which they are printed.
Content for print doesn’t have any need to change format. Before the advent of responsive web pages, digital design principles and specifically the use of typographic grids borrowed heavily from print traditions.
While responsive technology results in grids scaling and changing format for viewports, much of the basic thinking and terminology used in designing type grids is rooted in print-based logic.
There are common terms used to describe grid features which transcend formats and are used in print and responsive digital formats:
Margins are the spaces between the page edge (bleed) and type grids. Their practical need is to prove space between the page edges, spine and text and their width and depth define text measures, which in turn define type sizes on a page.
Columns are the vertical zones or channels that contain (define) text or image content on a page. A single column is the simplest example and, depending on the volume and complexity of content, can extend to several columns on a single gage.
Gutters are the spaces between columns. Gutters are often set at a single size (width, e.g. 12pt/16px) and often stay at the same measure, even when column measures (type areas) increase or decrease in size.
Rows are the horizontal content areas that extend across grid structures. Rows often work inside ‘column’ grids to also create ‘modular’ and ‘hierarchical’ grids and are used for crop and ‘hanging lines’ in design.
A baseline grid, as the name suggests, is an invisible measure between the baseline of lines of text within a column of text. Leading is always measured between baselines.
Baseline grids create vertical consistency between lines of type and enable design elements on a page to align.
When used thoroughly, all typographic and visual design elements used in a design ‘snap-to’ (connect-to) the baseline grid, providing order and relationship between the elements. This provides vertical rhythm and is an important factor in creating typographic layouts that flow and are easy to read.
In digital formats, designing with a baseline grid grounds the design across responsive regenerations of page designs across device formats.
4 pt grid: Robust principles
As 16px (1em, 12pt) is the common default text setting for browsers, it is practical to use 4px (.25em, 3pt) baseline grids to position type on. At 16px, type will sit on four rows of a 4px baseline grid.
It is then practical to create style sheets using type that is scaled/divisible by 4 px increments. As an example text can be set at 16px, H1s at 32px H2s at 24px, H3s at 20px and so on.
This logic is however superseded by other needs in setting up modular type scales with breakpoints for responsive viewport environments but the premise works –namely typography and visual elements have a direct relationship to baseline grids, however they are sized.
A unified system
When images are also sized to fit onto the four-point grid in our example, we find that type and content are inextricably linked together.
A hang line is an invisible horizontal line that cuts across vertical grids and from which content is positioned or ‘hangs’. Publishing systems might use more than one hang line to position content and anchor elements across pages. They provide visual continuity and give users visual cues to understand content and flow.
When designing grids for content, especially for Digital formats, type styles, story types and ‘containers’ will also be part of the design process (See Hierarchies section).
Add to this use of colour, images and any pre-existing house style rules that need to be followed or adapted and design becomes a multi-layered and faceted process.
Good typography supports good design which is a holistic process of considering all of the above elements and more. Yes, we know that everything in business is supposed to be holistic, but in this instance, everything counts… in large amounts.
Top 3 module take-homes
- Print grids have static relationships with page formats
- Digital pages use many of the design elements that print pages use
- Select grids that promote content blocks. Layouts make content interesting and worth reading