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

« Back to Blog

A More Modern Scale for Web Typography

on Wednesday 15th of January 2014

PNG gallery


In RWD, the proportions and rhythm of your body, headers & measure deserve as much attention as margins, floats & media queries. Jason Pamental of H+W Design explains why, plus throws in a scale you can use and a live demo.

I’m a big believer in responsive web design. It’s the only way I know to provide the best experience across the increasingly fragmented landscape of devices and capabilities that is the new normal on the web today. But most of the advice you’ll find about responsive design ignores relative scale in typography.

I find that really jarring, because in my experience, it’s not just the absolute sizes of your type and spacings that must change as screen sizes shrink; the proportions between them must change as well. So I’ve come up with a responsive relative scale to help you achieve a more readable page regardless of device or resolution.

A step out of scale

For many of us, once we calculate a balanced and readable typographic scale and rhythm for our initial design, we turn our attention to tweaking floats and widths in the layout for other breakpoints.

What often gets missed is proportion. On every device, our H1s are three times (3em) the size of the body, every H2 is 2.25em, and so on.

One scale on desktop & mobile

Setting all elements to the same scale for all viewports hinders balance and readability.

The problem is, as the screen size shrinks and fewer elements are visible, the relative scale between elements becomes exaggerated.  What’s needed is greater subtlety and flexibility to maintain a more balanced proportion and better readability across all experiences.

A more modern measured scale

Starting from a well-tested set of norms as set out by Robert Bringhurst in his seminal work The Elements of Typographic Style, I’ve spent some time refining those proportions across a number of different devices. In doing so, a sliding scale emerged that preserves the spirit of his recommendations but yields more balanced results across screen sizes. (Here’s the CSS for my complete scale.)

Body

Font SizeLine HeightCharacters
Print12pt1.25em60-75
Desktop (lg)1em (16px)1.375em60-75
Desktop1em (16px)1.375em60-75
Tablet (lg)1em (16px)1.375em60-75
Tablet (sm)1em (16px)1.25em60-75
Phone1em (16px)1.25em35-40

Show / Hide the CSS


body {
  font-size: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}

/* Body Content */

#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */
}

@media (min-width: 43.75em) {
  #page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */
  }
}

H1

Font SizeLine Height
Print36pt1.25em
Desktop (lg)3em (48px)1.05em
Desktop3em (48px)1.05em
Tablet (lg)2.5em (40px)1.125em
Tablet (sm)2em (32px)1.25em
Phone2em (32px)1.25em

Show / Hide the CSS


h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }
}

@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height 
and something more appropriate for display headings */ } }

H2

Font SizeLine Height
Print24pt1.25em
Desktop (lg)2.25em (36px)1.25
Desktop2.25em (36px)1.25em
Tablet (lg)2em (32px)1.25em
Tablet (sm)1.625em (26px)1.15384615em
Phone1.625em (26px)1.15384615em

Show / Hide the CSS


h2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
}

@media (min-width: 43.75em) {
  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }
}

@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }
}

H3

Font SizeLine Height
Print18pt1.25em
Desktop (lg)1.75em (28px)1.25em
Desktop1.75em (28px)1.25em
Tablet (lg)1.5em (24px)1.25em
Tablet (sm)1.375em (22px)1.13636364em
Phone1.375em (22px)1.13636364em

Show / Hide the CSS


h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
}

@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }
}

@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
  }
}

H4

Font SizeLine Height
Print14pt1.25em
Desktop (lg)1.125em (18px)1.22222222em
Desktop1.125em (18px)1.22222222em
Tablet (lg)1.125em (18px)1.22222222em
Tablet (sm)1.125em (18px)1.11111111em
Phone1.125em (18px)1.11111111em

Show / Hide the CSS


h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }
}

Blockquote

Font SizeLine Height
Print24pt1.45833333em
Desktop (lg)1.5em (24px)1.45833333em
Desktop1.5em (24px)1.45833333em
Tablet (lg)1.5em (24px)1.45833333em
Tablet (sm)1.25em (20px)1.25em
Phone1.25em (20px)1.25em

Show / Hide the CSS


blockquote {
  font-size: 1.25em;
  /* 20px / 16px */
  line-height: 1.25;
  /* 25px / 20px */
}

@media (min-width: 43.75em) {
  blockquote {
    font-size: 1.5em;
    /* 24px / 16px = */
    line-height: 1.45833333;
    /* 35px / 24px */
  }
}

I’ve based my scale on a relative type size of 1em for the <body> tag, which (when you reset font-size to 100%) will result in a size equivalent to 16px in virtually all browsers. In most typefaces this yields an accepted standard(ish) size for body copy. By working in relative units and using the <body> as my baseline, our trusty <p> will inherit that standard base for most of the content and everything else will render in proportion to that no matter where it’s displayed.

Importantly, while each of the states retains a consistent scale in its individual typographic hierarchy (per breakpoint), as you move through the breakpoints, the scales vary as necessary.

The sense behind the scale

Why one width is not enough

We’re all aware of the ‘66 characters’ rule: Bringhurst’s recommended line length for maximum clarity, readability and proportion in print (also endorsed by Richard Rutter in his adaptation of Bringhurst’s work for the web. To be more precise, for the web it’s 16px (1em) text and a measure of 60–75 characters long, while headings should be 48px (3em).

These recommendations are based on a number of factors, such as:

  • how people tend to read;
  • the ease or difficulty in following a line to the end and bringing your eye back to the start of the next line; and
  • quickly understanding the relative importance of various levels of headings between blocks of copy.

It works. It feels harmonious. It has the significant advantage of being familiar due to its common adoption. It’s also, we must remember, based on a single column print or desktop layout.

66 characters per line

66 characters per line on desktop vs 66 character per line on mobile

Unfortunately, the 66-character guideline breaks down when screen sizes radically change. The multi-column design situations that Bringhurst discusses (such as for newspapers) are a closer match to the space constraints we face with smaller viewports, and for these he recommends 40–50 character line lengths. However, we can’t take this as an absolute rule either; 40–50 characters set at 1em with comfortable margins ends up feeling very hard to read.

Mobile Line-length

40-50 characters per line vs 35-40 characters per line on mobile

There must be a trade-off in how large the type appears and how many characters fit on a line. After a lot of experimentation, 35–40 characters per line on a typical smartphone seems to me to provide the best balance for more legible and readable text.

Of course once you begin altering line length, many other properties are affected.

Take it from the top

Don’t forget that headings also need quite a bit of attention, because a single scale simply doesn’t work for all viewports.

3em headings shown on desktop and mobile

Using one proportion for headings looks goofy. Here, the H1 is set to 3em for all media queries.

For example, a heading set to 3 em looks normal and proportionate relative to body copy on a desktop, but tends to look oversized and clownish when viewed on a very small screen because it’s not competing with as much white space and other page elements.

On my scale, the ratio between the body text and headers changes as we move from desktop to tablet to smartphone. The proportions for H1s, for example, reduce from 3ems to 2.5ems to 2ems as the viewports shrink.

Demo

Resize my live demo to compare how content displays at single scale versus my responsive relative scale.

I’ve built a sample page to show you how this looks in situ (and you can download the demo’s code). If you resize its window, you’ll see the scale of the headers change as the viewport changes. (Or you can toggle the page to “Off” to quickly see how awful a single scale looks at various breakpoints). My heading values may not be science, but they seem to feel right, and pass the ‘squint test’ nicely. (Okay, so the ‘squint test’ isn’t scientific either, but squinting at your design works well for seeing what elements still stand out.)

More subtle proportions at smaller breakpoints means there may be less size distinction between all the heading levels, but font size is only one element of the design. You can still establish good visual hierarchy and the desired contrast using color and font variants.

Comparsion of scales

Single-scale again on left versus my scale on right. See how the headings retain their importance but are in better proportion to the small screen?

Also remember that while headings rarely wrap on desktop states, they likely will on smaller devices, so you must apply more care to appropriate line-height for headings. Otherwise that spacing between headings and the elements that follow will look just as goofy on mobile as an oversized font!

Respect the white space

Shorter line lengths can permit tighter line-height but must be balanced by dedicating more of the viewport to text. However, when adapting a design for smaller viewports, often the tendency is to preserve elements of the background and original design. This results in considerable space on either side of the content being devoted to design elements like background photos or textures, content panels offset from backgrounds with shadows, etc. The result is not enough space for type, which ends up either too small or too ragged, with choppy line lengths and a rough reading experience.

By reducing margins outside the main content area (like when there’s a background color or texture and a main content area, each with their own margins), you can give more space for content, allowing for slightly longer lines of text. On a small screen I tend to get rid of any color or texture in the body and let the content area go all the way to the edge – a simple single margin. At 320px of width, we need all we can get to achieve readable copy!

Implementing my scale

You can apply these differing ratios easily using media queries in your CSS right along with the rest of your responsive design bits. Depending on your design and how many breakpoints you’re targeting, you may want to tweak intermediate ratio for tablets.

Note that in my sample page’s CSS I’ve also tried to preserve a reasonable vertical rhythm by making margins above and below relate to line height for body copy, and set the line heights for headings to a number with a relationship to that as well. Comments are inline to explain the math.

And so ...

Responsive Web Design is a big deal, and your typography is one of the most noticeable elements in your design. You’ve got the tools — don’t let a single-scale approach across devices result in gangly, oversized headers; unreadably undersized body text; and odd looking spacing between the two. Sure, every typeface is different, as is every design — so my scale won’t work exactly the same for every project. But it gives you a good starting point to help maintain the intent and hierarchy of your design as it travels from one screen to the next. So have at it, and get responsive with your type. And please feel free to post or email your thoughts and experiences. We’re all learning together, after all.

Liked this? Then Try >> Contrast Through Scale

A big thank you to guest author Jason Pamental for writing today’s post. For more from him, check out the H+W Design blog, follow him on Twitter, or check out his book Responsive Typography: Using Type Well On the Web. Guest authors are paid for their contribution, and all opinions are their own.

Type on Screen

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

Hook me up!

Comments

blog comments powered by Disqus

Upcoming Seminar

The Future of Ads is HTML

Mark Boulton explains how we can apply what we've learned about web and responsive design to create richer, more dynamic ads that engage, delight, and, most importantly, can be viewed on any device. This is a must-see for brands, publishers, agencies, and digital ad designers.

Find out more

Register your free place