November 2008

The Typographic Grid

We con­sider this to be the aca­d­e­mic part two to “Grid Sys­tems.” Hans Rudolf Bosshard tack­les a deeper under­stand­ing of the complex grid.

InDesign 8.5x11 Grid System (12)

Adobe InDe­sign file with a grid sys­tem for an 8.5“x11” page that is divided into 12 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 12pt baseline grid.

InDesign 11x17 Grid System (12)

Adobe InDe­sign file with a grid sys­tem for an 11“x17” page that is divided into 12 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 12pt baseline grid.

Photoshop 975px Grid System (12)

Adobe Pho­to­shop file with a grid sys­tem for a 975px wide page that is divided into 12 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 16px baseline grid.

Doane Paper Utility Notebook

A portable note­book fea­tur­ing a patent pend­ing Grid+Lines sta­tionery design that com­bines the ben­e­fits of grid and ruled lines onto a sin­gle sheet of paper.

Photoshop 975px Grid System (6)

Adobe Pho­to­shop file with a grid sys­tem for a 975px wide page that is divided into 6 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 16px baseline grid.

Phiculator

Phic­u­la­tor is a sim­ple tool which, given any num­ber, will cal­cu­late the cor­re­spond­ing num­ber accord­ing to the golden ratio.

The Grid: The Structure of Design

Using a grid is one of those basic design principles. A grid is made up of ver­ti­cal and hor­i­zon­tal lines and is the foun­da­tion of nearly every type of visual media.

Grids: Order Out of Chaos

Many of the pages that you see every­day have a grid. You may not see it but it is there, hold­ing up the design, estab­lish­ing struc­ture, guid­ing the page elements.

Setting up a Baseline Grid

In this arti­cle, I will go through some sim­ple steps to acheive good clean well struc­tured typog­ra­phy in Adobe Indesign.

The Evolution of the International Typographic Style

The chief char­ac­ter­is­tics ]are designs that include min­i­mal graph­ics and a focus on typog­ra­phy, sans-serif type­faces and grid based layouts.

Replica Typeface

Replica is a new type­face by Norm that was designed on a strict grid sys­tem. Avail­able in the fol­low­ing weights: Reg­u­lar, Italic, Light, Light Italic, Bold and Bold Italic.

The Grid Systems T-Shirt

Grid Sys­tems dates from antiq­uity and orig­i­nated in mul­ti­ple cul­tures; some of the ear­li­est shirts and cities were built using grids. Grid Sys­tems is a lim­ited edition T-Shirt.

InDesign 11x17 Grid System (6)

Adobe InDe­sign file with a grid sys­tem for an 11“x17” page that is divided into 6 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 12pt baseline grid.

InDesign 8.5x11 Grid System (6)

Adobe InDe­sign file with a grid sys­tem for an 8.5“x11” page that is divided into 6 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 12pt baseline grid.

Grid Systems: Principles of Organizing Type

Grid Sys­tems pro­vides a rich, easy-to-understand overview and demon­strates a step-by-step approach to typo­graphic composition.

Grid Systems in Graphic Design

The man­ual for graphic design­ers, typog­ra­phers and three dimen­sional design­ers. Con­sid­ered by most to be the defin­i­tive book on grid sys­tems. This book is a must for any designer.

Baseline Rhythm Calculator

Gen­er­ate a basic CSS stylesheet with the proper cal­cu­la­tions for a consistent baseline.

Grid Layout

The Grid Lay­out Javascript enables web-developers to stick to a Grid Lay­out quickly and sim­ply by includ­ing the Grid Lay­outs Javascript file and sim­ple XHTML code.

Nudge Your Elements

Put sim­ply, what it means is that rather than fully left-aligning an ele­ment with the grid, some padding is required so that the ele­ment is nudged away from the grid-line a little

About

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom.

If you want to say hi or for general inquiries, send an email to: hello@thegridsystem.org

Have an article, tool, template or news you want to submit? Send an email to: submit@thegridsystem.org

Subscribe

Want to stay updated with the most recent content? Subscribe below via email for daily updates or to the RSS feed.

Colophon