Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Contrast Through Scale

on Friday 19th of October 2012

Typographic contrast is a deft and powerful weapon in your design arsenal. Its presence and impact typically goes unnoticed by readers, but its absence can ruin a site. In this series of posts, Christopher Murphy of The Standardistas takes a look at a number of techniques you can use to establish harmonious contrast in your designs.

A typographic scale

A typographic scale. ©vanseodesign.com

by CHRISTOPHER MURPHY

Contrast defines hierarchy, creates emphasis, suggests the relationship and relative importance of content, and can control how quickly text is read.

You can create contrast through thoughtful use of:

  • scale
  • weight
  • classification
  • case
  • color.

Used individually, each can be hugely effective. When orchestrated and used collectively, however, they are a potent combination. Think of them like the spirits in a much-loved bar. Mixed with care, insight, and some thought given to quantity, they can combine to create a delicious, intoxicating and balanced blend. Combine them in an ad hoc manner, however, and the result is the opposite: a bar’s spill trough at the end of a night. In a word: revolting.

In this first article, I’ll focus on scale, offer some tips on setting a scale, and share some sites that I feel have used scale particularly well.

What is scale?

Scale refers to the range of values at which type is sized. The more regular the intervals between each value, the more harmonious the scale.

By setting a typographic scale, you can:

  • control the pace at which a reader consumes content;
  • guide the reader through a page; and
  • introduce hierarchy, helping the reader navigate and understand relationships between pieces of content.

Newspapers are masters at this. When we pick up a paper on our daily commute, our eyes are guided by a complex interplay of relationships between the content, largely driven by scale. The relative scale and placement of the typography allow us to infer meaning. Our eye is guided to the day’s top stories and we’re drawn in to these stories through carefully crafted typography.

Use of scale on The Guardian's front page

Careful use of typographic scale and placement control the readers’s pace and entry into the various articles, guide the eye, and establish a clear hierarchy of importance.

Consider this example from The Guardian. Our eye is drawn to the top story (‘School’s out…’), and we are led in to that story through the bullet points beneath (‘Student protests…’, ‘Isolated breakouts…’). Looking at the different text sizes – from large (the headline), to medium (the bullet points that draw us into the text as readers), to small (the copy of the article itself) – we can see how they’ve used scale to guide our eye and draw us in.

Thinking about the page in a wider sense, we can see a clear hierarchy between the top story of the day (‘School’s out…’) and stories that are lower in the hierarchy (‘Could Belgium be next?’). Here, scale expresses a meaning and relationship between the content on offer.

Start with your base paragraph size

The size you choose for your paragraph settings is important for two reasons. Firstly, in most situations, your site will have more <p> elements than any other, so it’s only prudent to start with your most prolific element. In addition, best practice suggests that you determine the size of all other elements based on your P size. However, many factors will influence which <p> size is best for your particular design. Here are some considerations to be mindful of:

Audience needs

When determining your base measure, think about your target audience to ensure your design is fit for purpose. What might they appreciate? What might they need?

Moshi Monsters homepage

With young audiences, type can afford to be smaller and ignore guidelines that aid legibility. On Moshi Monsters, the use of all caps settings at small sizes, though less inherently legible, push a sense of ‘design’ to the fore.

For example, consider the difference between an older audience of retirees and an audience of young children. The former may need type set a little larger, while the latter might be fine with text set a little smaller.

Reading distances & text quantity

It may be that you’re designing on a 27 inch screen two feet away, but that doesn’t mean that your site’s visitors will view your type in the same way. It pays to be mindful of the likely scenarios users will consume your text in and size sensitively to this. In his A List Apart article titled A Simpler Page, Craig Mod explores the issue of reading distance as it relates to tablets and digital books. A thought-provoking read.

Consider, too, the amount of text you’re working with. Are you designing for long-form content (like a book or magazine articles) or short-form? With the former, your <p> size must enable readers to consume all of your text without experiencing fatigue or abandoning the piece halfway through. Martha Rotter writes and speaks extensively about design issues related to long-form copy, and in her Smashing Magazine article earlier this year, she reminded us all of the importance of testing our type’s effectiveness and suitability:

“To find out what works, do some testing. User testing, A/B testing and even testing within your own team can yield insights. Have everyone on your team read through a handful of long-form content on various devices. If people can’t make it through more than a few paragraphs, try different fonts, sizes or spacing.”

Choose a tried and tested scale

Established by typographers in the 16th century, typographic scales create harmony and balance between headings and body copy. Building out your scale from your <p> requires some basic mathematics in order to establish a consistent relationship between the different elements of your page – headings, sub-headings, body copy and pull quotes, for example. However, if you’d prefer to avoid the heavy lifting, you can call upon existing scales to achieve a harmonious outcome.

For example, the 16th century scale (which is still used widely today) was largely determined by the limitations of technology – metal type in one face, one size and one weight – and progressed as follows: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 26, 48, 60, 72. We might echo this scale as follows, establishing a relationship between our body copy and its associated headings:

body { font-size:100%; }
h1 { font-size: 2.25em; /* 16 x 2.25 = 36 */ }
h2 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
h3 { font-size: 1.125em; /* 16 x 1.125 = 18 */ }
h4 { font-size: 0.875em; /* 16 x 0.875 = 14 */ }
p { font-size: 0.75em; /* 16 x 0.75 = 12 */ }

However, we needn’t restrict ourselves to a scale drawn from the sizes of type when it was cast in metal. We might also explore other scales.

In his presentation Web Type – 80% Science, 20% Art, Jon Tan explores the Fibonacci Sequence as a canon on which to compose – setting each subsequent value to the sum of the preceding two values – 16, 24, 40, 64:

body { font-size: 100%; }
h1 { font-size: 4em; /* 16 x 4 = 64 */ }
h2 { font-size: 2.5em; /* 16 x 2.5 = 40 */ }
h3 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
p { font-size: 1em; /* 16 x 1 = 16 */ }

The result is a scale that’s pleasing on the eye, as Tan puts it, drawn from a healthy mix of science and art. Alex Charchar has written extensively on the topic of typographic scale, I’d encourage you to set aside some time to digest his ideas.

Consider ratios

Thanks to computers we can set type at any size we please in order to devise our own, unique scales. We needn’t constrain ourselves to centuries-old paradigms or even current trends. The result of this freedom, however, can be a typographic smorgasbord with little or no underlying harmony. Writing in the The Elements of Typographic Style (which every aspiring typographer should own), Bringhurst states:

“In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”

Limiting your typographic scale can improve your typography considerably. And rather than arbitrarily plucking type sizes out of the air, ratios will ensure your intervals are consistent and your scale harmonious. However, this is where the math comes in.

Ratios are inherently appealing. You might be aware of the golden ratio (also known as the golden section or golden mean), a ratio of 1:1.618 that can be found in everything from the underlying proportions of classical architecture to the world of nature.

As Tim Brown puts it in his excellent article, More Meaningful Typography for A List Apart:

The golden ratio and other meaningful ratios rooted in geometry, music, nature, and history can be expressed as modular scales and put to work on the web.”

Using the golden ratio as a typographic root, you can produce values for a modular scale by multiplying by 1.618 to determine the next highest number in your typographic scale (or dividing by 1.618 to determine the next lowest number). The result is a set of harmonious proportions.

Putting this into practice, we can start with our body copy size, say 16, and work up or down from that to determine our relative sizes (working up to determine heading sizes, working down to determine caption sizes):

h1 - 41.886784 x 1.618 = 67.773
h2 - 25.888 x 1.618     = 41.887
h3 - 16 x 1.618         = 25.888
p - 16 x 1   = 16

The mathematics might look complicated. Fortunately, Brown has built a helpful calculator that takes care of this for you. Applied in CSS, the above scale would be as follows:

body { font-size: 62.5%; }  /* Sets our base type size to 10px, easing the maths. */
h1 { font-size: 6.7773em; /* 10 x 6.7773em = 67.773 */ }
h2 { font-size: 4.1887em; /* 10 x 4.1887em = 41.887 */ }
h3 { font-size: 2.5888em; /* 10 x 2.5888em = 25.888 */ }
p { font-size: 1.6em; /* 10 x 1.6 = 16 */ }

The golden ratio isn’t the only ratio that can be used to determine a typographic scale. We can invent our own or look to the world of music for inspiration, too. Owen Gregory’s Composing the New Canon: Music, Harmony, Proportion extensively explores the use of musical scales as a backbone for typographic scales. As Gregory puts it:

“Music moves us, often in ways we can’t explain. By some kind of alchemy, music frees us from the elaborate nuisance and inadequacy of words. […] There are some obvious and notable similarities between music and visual design. Both can convey mood and evoke emotion but, even under close scrutiny, how they do that remains to a great extent mysterious.”

Helpfully, Gregory explains how an understanding of musical scales can be applied to the world of typography for the web. Building on some of Mark Boulton’s ideas around designing from the content out, Gregory explains how to design typographic systems from the content out – systems that have an inherent harmony and logic. His article is well worth reading and exploring.

Bottom line? Whether you borrow from an established scale or opt to create your own using ratios, once you establish a scale, stick to it. Therein lies harmony and beauty.

Show and tell

Below are just a few examples of sites that I feel use typographic scale to great effect.

zeldman

Jeffrey Zeldman’s Web Design Manifesto, 2012
On the redesign of his personal site, Zeldman stated: “Thank you for the screen shot. I was actually already aware that the type on my site is big. I designed it that way.” Zeldman brings typography right to the fore in a design that echoes the functionality of applications like Instapaper and Readability, which put the reader first and foremost.

Platt

Joshua Platt’s Index
Using nothing more than a carefully controlled palette and some sensitivity given to the scale of his typography, Platt pulls off a typographic tour de force–playing with tempo and pacing through the careful control of scale.

Diehl

Diehl Group Architects
In a series of hero images on their site’s front page, Diehl Group Architects play with extreme contrasts of scale between titles and subtitles.

Form and Future site

Form and Future
Despite the numerous elements in their type system (seven visible here), Form and Future’s elegant use of scale draws us into the content and down the page.


For more from Christopher Murphy, visit Monographic.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus