Grid Systems

The Grid System

In graphic design, a grid is a structure of intersecting lines that serve to guide the layout of content. This framework is used to organize content in a rational, easy to process manner through the layout.

Not only do grids serve as a guide for positioning elements within a layout, they also help with responsive design (web pages must render well on a variety of devices, browser window sizes, and screen sizes). In short, grids assist designers in creating a unified structure. They speed up design and make it easier to align future elements against existing ones.

The Rule of Thirds

A common application of grids is “the rule of thirds.” This rule — often applied in photography — utilizes an invisible grid of two horizontal and two vertical lines. The important elements in the image should be placed along those lines or at the points at which those lines meet.

For instance, on the grid below the intersection points noted in red. In the photograph below the important element — the pineapple — is placed where the left two intersection points would be. To most, this layout is more interesting and appealing to the eye than a layout in which the pineapple is centered.

Phi (Golden Ratio 1.61803399)

The Golden ratio is a special number found by dividing a line into two parts so that the longer part divided by the smaller part is also equal to the whole length divided by the longer part.

The Golden Ratio determines the most pleasing set of proportions for an object and can be simplified by the ‘rules of thirds’. When the Golden Ratio is combined with a grid, rules for size, position and proportion can help a layout feel coherent and aesthetically appealing.

You can apply Phi to your design by taking the length or width of your page and dividing it by Phi.

The image below shows a horizontal and vertical split using this dimension.

Applying the Rule of Thirds & the Golden Ratio.

12 Column Grids

Common Breakpoints for responsive designs

Setting up a spacing system with units of 8 pixels

Set up a spacing system to create a consistent grid system.

Start by defining a base number for your grid.

Material Design principles use divisions of 8: 8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements (sometimes 4px if you need to go in tight).

You can use other base number like 5: 5  / 10 / 15 / 20 etc..

Creating Grids in Sketch using 8 px Units

Select Artboard

View menu > canvas > show rulers (if, not already showing)

View (icon top right) > show layout (lets you see grid on artboard)

View (icon top right) > layout settings (lets you define the settings

Columns

  • Total width = width of Grid.
  • Off set = if the width of the grid is less than the full width you divide the excess by two to center the grid – so…. Artboard width – Total Grid width / 2 = offset
  • Number of columns (Desktop = 12, Tablet 9” 12, Mobile 6)

Rows

  • Gutter height set as 4 (smallest division when using 8px unit base)
  • Row height set as 1

Desktop HD w1440 with 1248 Grid

Tablet 9” w768 with 720 Grid

iPhone 7 w375 with 360 Grid

Grid Further Reading

Grid Resources

 

 

Typography

Like other key design elements, typography matters. It can set a tone and mood, and even influence the meaning a reader draws from the text.

Font vs Typeface

A typeface is a family of fonts.

For example, Helvetica is a Typeface and within this font family  are fonts of varying weights and styles e.g. 12 pt Helvetica Bold.

There are 5 Typeface Families

Geometric Sans

  • Represents 3 different groups Geometric, Realist and Grotesk
  • Geometric Sans-Serifs are those faces that are based on strict geometric forms.
  • Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

Humanist Sans

  • These are Sans faces that are derived from handwriting
  • Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

Old Style (aka Venetian)

  • These are our oldest typefaces.
  • Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond

Transitional & Modern

  • Typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic
  • Examples of transitional typefaces: Times New Roman, Baskerville. Examples of Modern serifs: Bodoni, Didot.

Slab Serif (aka Egyptian)

  • They convey very specific — and yet often quite contradictory — associations.
  • Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

Popular Type Faces

Sans Styles

  • Myriad
  • Gotham
  • DIN
  • Akzidenz Grotesk
  • Interstate

Sans Serif

  • Mercury
  • Electra
  • Perpetua

Anatomy of a Typeface

Ascenders, Meanline, Baseline & Descenders

Kerning, Tracking and Leading

Tracking is overall letterspacing.

Kerning is selective letterspacing.

Leading is the space between rows.

Choosing the right fonts

  1. Consider your brand & Audience
  2. Make sure it’s readable
  3. Factor in information hierachy
  4. Contrast font family & weights

Best Practices

  • Make sure the body copy is readable.  Readability has a lot to do with color contrast, character spacing, tracking, and leading.
  • Bold, sans-serif, all-caps works well for header text
  • Medium serif works well for body text.
  • To create visual hierarchy play with size, weight, color and position.
  • You can use just one typeface but useful to have different fonts to create information hierarchy
  • Break long text up with bulleted lists if possible
  • Chunk copy into sections with easily scanable sub-headers
  • Avoid single words on a single line at the bottom of a par (Widow) or at the top (Oprhan).
  • Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.
  • Line spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” linespacing option to achieve this. The default singleline option is too tight; the 1½ line option is too loose. In CSS, use line-height. The easiest way to calcualte is to multiply the font by 1.5 (16pt / 24, 21pt / 32, 24pt / 36 or 32pt / 48)
  • Line length is the horizontal width of the text block. Line length should be an av­er­age of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabet, like so:abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Questions to evaluate Typefaces

  • How legible is it? Do the letterforms feel organic or more stylised or geometric?
  • How readable is it? Does it invite long-form reading, or is it more suited to headlines?
  • How flexible is it? Does it work in different sizes and weights? Does it function in both body copy and titles?
  • How unique is it? Is it memorable? Does it have interesting details? Does it have amazing numerals or an interesting looking lowercase g?
  • How classy is it? Does it feel elegant or more down-to-earth?
  • Has it been optimized for screen? Will it look good on Macs, PCs and mobile devices?

Creating a Design System for Typography

  • Header
  • Sub Heads
  • Intro Par
  • Body copy
  • by lines
  • Time Stamps
  • Grid definition (vertical and horizontal)

Tips

  • Most brands have existing Typefaces so best to refer to Brand toolkits or guidelines before selecting a new typeface for a client
  • Remember most typefaces cost money – each weight or style will add to the price tag
  • Some typefaces are designed specifically for Headlines (aka “display faces”.  Examples include, League Gothic, Mardrone, Didot, Grafolita, azo sans uber.
  • Use a reputable foundry to source your fonts. Adobe Subscribers can use Type kit to test various typeface’s weights and styles. Google Fonts (using free resources runs the risk of missing characters or punctuations
  • When selecting typefaces keep it exactly the same, or change it a lot!

Further Reading

Typography Resources

  • Fontface Ninja (a browser extension that lets you inspect, try, buy and bookmark any fonts on any website) https://fontface.ninja/
  • Kerntype (a font spacing game) by Mark MacKay for Method of Actions http://type.method.ac/
  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/
  • The League of Movable Type: a collection of high-quality open-source typefaces that are licensed for use on the web, and available for download as .otf font files. https://www.theleagueofmoveabletype.com
  • Typedia.com: A Shared Encyclopedia of Typefaces. Typedia is a resource to classify, categorize, and connect typefaces. Search for typefaces, designers, foundries, and more.