Authored by Primate

A rather awesome, informative
and witty blog about all things web

Responsive Type, part 2: The Base Font

Four t's arranged in a rectangle, the second one highlighted.

Following on from the first instalment in this basic guide to responsive typography, this article will focus on that most important font of all: the base font. Whether you’re designing a blog or a news archive, a brochure site or a web app, your base font is crucial to communicating the bulk of your content. Make sure you get it right.

The paragraph, or body copy, is your friend. It is the voice of most of your content and thus the most important voice of all. It is your base font, and it has final say in most other typographic decisions. It defines the width of your columns, your letter-spacing, line-height and baseline grid (if you want to go there) and, in some cases, even colour. To a large extent it informs the layout of every page of your web site.

Suffice to say your base font is important. Get it right, and half the job is done. Get it wrong and your readers will suffer forever. No pressure then.

Three magic ingredients

As I alluded to before, rather than focusing on how to get typography right, I tend to focus at how not to get it wrong, and when it comes to your base font, there are three simple facets you don’t want to screw up: the size, the measure and the line-height. If those all pass the is-this-readable-test, you’re most likely alright.

Size

What is the correct body size for a web site? Many, many moons ago, someone may have told you that a 12px paragraph was the way to go. A couple of years later you may have been advised 14px was the correct choice, followed by 16px, 18px and, from where things look to be heading, 20px, 30px (and so on). None of these answers are correct, of course. There is no universally correct font-size for your paragraph style, as this depends on a variety of factors, including your font choice, the viewport size, measure and – you guessed it – the type of content.

Expertly applied by Trent Walton on his own blog, very large body text in a single column can make for comfortable reading when leaning back in the office chair and scales down beautifully on smaller devices. In other contexts, 18px may work equally well, and even 12px has its place when the layout or content demands it.

Screenshot from Trent Walton's blog

Trent’s blog: a thing of beauty.

Measure

The key thing to consider here is measure. On a wide, single column layout an 18px font-size would create a measure too long for comfort (the ideal character count is somewhere between 45 and 75, according to Robert Bringhurst’s Elements of Typographic Style). Likewise, a single column layout using 30px may result in excessively long pages on a content-rich site.

As always, look to your context – that is to say your content – for the answer. If it suits, bite-sized chunks set over two or more columns will invite a smaller font-size. If one column works well (for a blog article or essay, for example), go a bit higher. Considering the importance of measure, it is easy to see how typography asserts itself on the core grid and page layout.

Line-height

Part of what makes vertical rhythm difficult is maintaining consistency as viewports grow and shrink and content shifts around; indeed a common typographic error in responsive design is leaving the line-height untouched whilst the font-size changes. But what is the ideal line-height?

Line-height, like font-size, depends in part on what typeface you have chosen. For example, a face with long ascenders and descenders may require more space between lines than a more compact one and vice versa. Font-size also plays a major role in defining the line-height, as headings generally need proportionately shorter line-heights the bigger they are. My own declarations often end up something like this:


h1 { line-height: 1; }
 h2 { line-height: 1.1; }
 h3 { line-height: 1.2; }
 h4 { line-height: 1.3; }
 p { line-height: 1.4; }

Note how the proportionate line-height grows as you move down through the hierarchy (this assumes an opposite growth in font-size, of course).

To make matters worse, the ideal line-height for any given paragraph also depends on the measure. As a rule, longer lines require more space between lines, but how does one deal with this in a fluid layout? Tim Brown suggests a possible solution: Molten Leading, a concept for a fluid line-height that scales with the width of the element.

Personally I think using max-width to restrict uncomfortably long measures (and thus slightly off-putting line-heights) goes a long way to remedy the problem and this is what we did when we redesigned our own site. As the viewport grows, so does the main content area, but only to a certain point. When the measure gets too long, the width is capped and instead the whitespace surrounding the content grows.

And that’s the base font. The next article will focus on establishing a hierarchy, using size, contrast and style changes to create order.

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.

Comments

Showing One Comment

Leave a comment
  1. Delia March 1, 2017 at 2:54 am

    That’s cleared my thoughts. Thanks for conibiruttng.

Leave a Reply