Category: Resources

For the last few days I have really been trying to wrap my brain around the concepts of scale and ratio in design and specifically typography. I am pleased to say that a few things have really snapped into place for me. Much has been written about these topics, so the intention of this post is simply to continue the conversation and document a few ideas that I find most helpful or interesting.

Constraints

To set the scene I would like to quote Charles Eames:

Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible (and) his willingness and enthusiasm for working within these constraints

Yes, surprising as it may sound at first, constraints are the designer’s best friend. Real problem solving can only begin once you are familiar with the boundaries set by a particular project. Most often I find that designer’s block occurs when you don’t know the scope of your canvas, or worse yet, when there is no canvas. A good example – and the one that got me thinking about scale in the first place – is the concept of responsive web design.

For a long time web designers conveniently ignored the impending realisation that we can’t keep producing sites with fixed dimensions as though they are intended for a fixed medium. As of 2011 we can no longer get away with this way of thinking. Contemporary websites are expected to adapt appropriately to an indeterminate amount of display sizes: mobile, tablet, notebook, desktop, widescreen, etc.

So then, if we are effectively removing our beloved canvas as a design guideline, what constraints are we left with?

Enter the typographic scale

Desperate times call for desperate measures, so we turn to the one thing that we have left: type. This is rather ironic since type has been used to set scale for compositions since the dawn of the printing press centuries ago. We are simply rediscovering a few guidelines we should never have forgotten:

1. The Golden Ratio

Just to refresh your memory, the golden ratio states that “a + b is to a as a is to b”. Most often this relationship is expressed as a rectangle where the long side is roughly 1.618x longer than the short side. In other words, if you remove a square from the rectangle, the resulting rectangle has the same ratio as the original one. This can be repeated infinitely. The awesome part is that this amazing math was not the product of modern technology or ancient philosophy – the golden ratio is exhibited in the very fabric of nature. What better number to use as a basis for meaningful typography than one endorsed by God!

2. Rule of thirds

A common rule of thumb for any visual composition, if you divide your canvas into three equal parts horizontally and vertically, the intersection of these dividers indicate visual key areas. In his 2009 article on the topic Jason Santa Maria argues that the usefulness of traditional ratios are questionable design for flexible media since we have no control over the context in which the viewer will experience our design. He has a point, but all hope is not lost, read on…

3. Point sizes

In typography a point is the smallest unit of measure. The standardisation of the point dates back to 1737 when it was proposed by French printer and typefounder Pierre Simon Fournier. In Fournier’s day France used the measurement toise which was equal to six feet. A foot was twelve inches, an inch twelve lines and a line was equal to twelve metric points. Fournier decided that two metric points would equal one typographic point, but by the 1760s there was already a deviation in the size of a point, so it became completely arbitrary. Today the size of a point is defined as exactly 72 points to an inch.

4. Typographic scales

Many people believe that the traditional scale of set point sizes for fonts (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) holds some special significance. That is not really true. Although this ancient scale has been thoroughly tried and trusted since the 1500s, we no longer have the limitation of metal-cast fonts, so feel free to modify this scale or invent your own! It can be agreed though that using a scale – one consisting of distinct and related intervals – adds harmony and balance to typography. I have to credit Alex Charchar’s 2008 article for initially getting me interested in the concept.

5. Modular scales

So if we’re going to be exploring scale beyond the limitations of fixed media, where do we start? Web type aficionado and Type Manager for Typekit Tim Brown recommends combining what we know about typographic scales and meaningful ratios into what he calls modular scales. In his talk at Build 2010, Tim suggests a very sensible starting point and one which I will explain at the end of this post: the optimal size of your body copy. There is no mathematical equation to determine this size, it will vary from one typeface to another and across different media. Once you have determined this chosen size, multiply or divide it by a constant to create your scale. Traditional ratios (like the golden ratio and the rule of thirds) offer fertile ground to start from. Tim discusses his method in more depth on A List Apart.

6. Relative font sizes

Using pixels as a measure for web typography was never a good idea in the first place. If you think about it, the pixel imposes a constraint which actually has nothing to do with type: the smallest discernible unit on a display device. Once we start thinking in scales and ratios, the pixel becomes almost inconsequent. Percentages and even ems or ens make more sense as a typographic unit. The size of any piece of type should be relative. But relative to what? That’s easy: once again, relative to the size at which your body copy is most legible. Jon Tan wrote an article in 2007 entitled The Incredible Em & Elastic Layouts with CSS which really helped me understand the concept. (Of course pixels are still useful as a unit to refer to the size at which text ends up displaying on a particular screen!)

7. Fractional numbers

I have been reading Ethan Marcotte’s excellent book on Responsive Web Design. Both he and Tim Brown (mentioned above) agree that it is completely acceptable, and probably even advisable to break free from the comfort of easily divisible numbers. Once we start working with scale instead of fixed sizes, fractions are bound to pop up. Don’t fear the fraction! As Ethan says “(a fraction) perfectly represents our desired font size in proportional terms. What’s more, browsers are perfectly adept at rounding off those excess decimal places…” Tim Brown has a calculator to help you determine these numbers to build your typographic scale.

How can we apply this knowledge to create significant design?

A quote from Robert Fleege:

Embrace restrictions. Some of the best ideas & solutions come from constraints. If there aren’t any, go ahead create some of your own.

In closing I would like to address a question that I had to ask myself:

Are we just grasping at straws by using arbitrary scales and ratios?

The answer is no. Why do pants have two legs? Because humans do. Why do umbrellas have a certain size and shape? To keep humans dry. Why are wine bottles all of a similar size, shape an weight? For humans to pour from them easily.

In other words, we are designing for human interaction.

What is the font size that the human eye can read your body text at most comfortably? Determine the answer to that question and you have a very rational foundation to build upon. When faced with a missing canvas, we can use scale and ratio to determine all other measures for our design to be based on.

This guideline cuts across web, print and any other media. Once we realise that we are designing for humans – not calculators – the typographic scale starts looking a lot more friendly and constraints become way more meaningful than just the edges of a blank canvas.

I would love to hear your thoughts on the relevance of typographic scale, so please post a comment here or on twitter.

– Imar