The Design Calculator

A modular scale calculator to help designers make layout choices.

Click Here to Use the Calculator

GitHub Repo

This content is adapted from a talk given to AIGA Orange County at their 2018 July Community Meeting.

The Layout Loop

  • Building layouts can be a time consuming experience for Designers when they’re relying primarily on instinct and feel with their layout choices.
  • It raises an important question: “How does a Designer know when a layout is finished?” Answers can range from “It feels right” / “The content fits” / “The client approved it” / “There are reasons for all of the design choices”.
  • These are valid reasons, but do they help Designers work efficiently through their creation process and design decision making? Should the type be 12pt or 13pt?

Designing with Ratios

  • Inspired by common intervals we see in music and scales such as the Golden Ratio, Tim Brown (Head of Typography for TypeKit at Adobe), explores how Designers can make layout decisions faster by working from a ratio of scale in his piece More Meaningful Typography.
  • The piece is primarily focused on how Designers size typography on the web, and proposes that Designers select and use a scale to size their content from.
  • How does a designer know their layout is finished? Because it follows a pre-selected scale and the content is sized in relative proportion.

A Ratio Calculator

  • But what if this thinking extended beyond sizing typography and was applied to object scale, format dimension, margins, and grid layout?
  • That question drove the creation of the Design Calculator, a web-tool that allows Designers to input their layout dimensions, select a ratio, and output a scale of numbers that they can use to help make layout choices.
  • Below is a high-level walkthrough of how a layout could be created using the Design Calculator.

1. Work in Points or Pixels
Designers need to work in the same units throughout their layout in order to successfully measure everything consistently. 5mm is not the same as 5pt. 
One quick rule of thumb: Print = Points | Screens = Pixels. 
1pt is the same as 1px (provided your DPI / PPI is the same).

2. Enter the width and height of the artboard.
There are presets available in-case the Designer is working on a common size/device format. The Design Calculator will automatically select a ratio that matches the dimensions of the artboard. If the Designer wants to use a different ratio, they can select one from the dropdown.

3. Size the type and leading for the layout’s primary content using numbers from the calculator.
In this example, the type and leading are sized at 7pt / 14pt. 
We’ll see sizing of the baseline explored in more detail below.

4. Use numbers from the calculator to set margins for the layout.
This could also be applied to margins and padding on objects in a web layout.

5. Design content hierarchy and spacing into the layout, and establish a baseline grid.
Spacing could be determined by numbers in the calculator, or simply align to the baseline grid. When setting a baseline grid, trying using a smaller number from the calculator, preferably one that’s a multiple of some of the larger numbers in the scale.

6. Affirm contrast and hierarchy by using larger numbers in the scale.
Here the leading is six times the baseline of 7pt, making 42pt. Although 42pt is not in the scale it is still proportional and relative to the rest of the layout.

7. Digging deeper with alternate ratios and scales.
If Designers are planning to present different versions of the same layout, they could pick another ratio from the dropdown, such as the Golden Ratio: 1.618, and run through the same process again.