University of Houston Introduction to Typography Art 3334 class www http://design.uh.edu/dossett/ Project 4 Dossett/Spring 2016 email [email protected]

Anatomy of a Modular Typographic Grid Source: http://vanseodesign.com/web-design/grid-anatomy/ Flowlines Flowlines are horizontal lines that break the space into horizontal bands. They can be used to help guide the eye across the page and can be used to impose starting and stopping Grids act as guides for the placement of elements Margins Margins are the negative space between points for text and images to be aligned. When in a design. No matter how simple or complex, the edge of the format and the outer edge of elements are aligned to the top of a flowline it’s grids share some common parts, each fulfilling the content. The proportions of margin help to called a hangline as the elements appear to hang a specific function. Not every one of these parts establish the overall tension (or lack of tension) from the line. Type is often aligned to a series of needs to be present in every grid. in a composition. The smaller the margin the flowlines equally spaced down the page called more tension is created. Larger margins create baselines. The base of the type sits on the line, Format The format is the area in which the design more whitespace and help focus attention on the hence the term. Aligning type to a baseline can sits. In a book or magazine the format is the page. positive space of the design. Larger margins also help establish a vertical rhythm in a design. On a website the format is the browser window. help the eye find a place to rest and can be a good The format defines the live area of a design where area to place subordinate information. Modules Modules are individual units of space that type, images, and other media are present. are separated by regular intervals. Modules are the basic building blocks of grids. When repeated they create columns and rows. Ideally the width of a module will be based on the measure of a line of text. The height would be based on some multiple of the type’s leading or line-height. The upper left corner of a module is considered to be the active corner and the lower right corner, the passive corner.

Spatial Zones Spatial zones are fields of adjacent modules. Each field can be assigned a specific function within the design. A long horizontal field might be used to place long horizontal images. A long vertical field might be used for long blocks of text. A large rectangular field might be used for video. Design elements will often be placed inside a field or spatial zone as opposed to a single module.

Columns Columns are vertical bands of modules. There can be any number of columns in a grid. More columns leads to more flexibility, but can also make the grid difficult to work with. Column widths can be equal or they can vary across a grid.

Rows Rows are the horizontal equivalent of columns. Online it’s harder to plan for rows as the height of the format is often inconsistent and dynamic.

Gutter Gutters are the spaces separating modules either vertically or horizontally. Typically we think of gutters as the space between columns, but they are also the space between rows.

Folio Folios are created when page numbers are placed consistently in the margin, usually above or below the composition.

Running Header or Footer A running header is a guide at the top to indicate your position in a manuscript. You’d find information like title, chapter title, section title, author, etc located here. A running footer is this information placed at the bottom of the format. University of Houston Introduction to Typography Art 3334 class www http://design.uh.edu/dossett/ Project 4 Dossett/Spring 2016 email [email protected]

Anatomy of a Modular Typographic Grid Four grids are the main types of grids one typically encounters. Each has a different function as far as holding content and choosing the right grid to Source: http://vanseodesign.com/web-design/grid-anatomy/ use should come down to the content for your specific project.

Manuscript grids — Sometimes called Column grids — When people think of Modular grids — Modular grids are Hierarchical grids — can be used a block grid or single column grid, grids, especially online, they likely like column grids with the addition when none of the above grids will the manuscript grid is the simplest think of column grids. As you would of horizontal divisions marked by work to solve the problem. They tend grid structure. It’s mainly a large expect column grids are made up rows. The columns and rows and to be created organically by first rectangular area taking up most of by placing multiple columns within the gutters between each create a placing design elements on the page the space inside a format. the format. matrix of cells or modules. and then finding a rational structure The primary structure is defined by Column grids are good when Modular grids are good for complex for presenting those elements. large text blocks and margins, which discontinuous information needs to projects that require more control Hierarchical grids are commonly position the block within the format. be presented. For example you might than a column grid can offer. Image found on the web. They’re based Its secondary structure defines the have various asides, pull quotes, etc galleries and shopping carts are more on an intuitive placement of location and proportions of folios, in your design, which can occupy likely candidates for modular grids. elements, which still conforms to footnotes, running headers, and different columns in the grid. One Modular grids lend themselves to the needs of the information. other secondary information. column might be reserved for text, the design of tabular information Customized proportions are Manuscript grids are good for another for images, and yet another such as charts, forms, navigation, typically used in hierarchical grids extensive and continuous blocks of for image captions. schedules, and of course tables of instead of regularly repeated text. They’re used in books and long Columns can be dependent on data. They can help standardize the intervals. Column widths tend to essays and perhaps lend themselves each other, independent from each space in tables and help integrate vary as do the location of flowlines. well to blog posts. They aren’t other, and crossed over by design tables with any surrounding text or They can be thought of as loose limited to text though. Images can elements. This leads to a large images. organic grids. Development often be used to fill the block. amount of flexibility when organizing Each module in the grid can define begins by spontaneously placing By adjusting the margins designers information on the page. a small chunk of information or design elements. Later a rational can help create interest. More You can separate blocks of adjacent modules can be combined structure to coordinate those opportunity for this exists where information by placing them in to form fields or spatial zones each elements is determined. two page spreads are used as in different columns and yet still show designated to hold a specific type of Hierarchical grids are good when magazines or books, but even on a a connection between them. Perhaps information. a project requires an odd grid that single page interest can be created text in one column and images and Smaller modules allow for a more doesn’t easily fit one of the other through margins alone. captions in different column next to flexible grid with greater precision, grid types and can be used to unify the text the image relates to. but they can become confusing to disparate elements and create a The width of a column should work with. Imagine for example superstructure for organizing them. depend on some element internal to setting up a modular grid in which If you’ve designed sites where the design, most likely the size of the each modules is 1px by 1px. Lot’s of you carefully align elements to text. flexibility, but not much practical each other without using one of A column should be able to use. the previous 3 grid types, you’re accommodate a comfortable Modules can be either horizontal probably approaching a hierarchical measure for reading and avoid or vertical and the proportion of grid structure in your design. excessive hyphenation at the end of a module can be determined in a lines. Too wide or narrow a column variety of ways. and reading becomes difficult. Hierarchy + Grid examples Hierarchy + Grid examples