Developer

RWD focus: Responsive typography, Part 1

Ryan Boudreaux focuses on an area of responsive web design that deals specifically with fonts and type styles. He outlines the workflow that governs the approach to responsive typography.

Responsive Web Design (RWD) continues to evolve while keeping up the pace with the constant arrival of new tablets, smart phones, and other mobile gadgets.

One of the areas included in RWD is responsive typography and, in particular, how web fonts are rendered on various devices with regard to screen resolutions and sizes. Recent considerations in RWD include breakpoints, media queries, layout grids, and wholesale canvas swaps depending on the device, but what about fonts and typography?

Addressing web fonts as part of a responsive typography strategy means that we need to take on a new approach from the traditional web design workflow process. Following along with the workflow described in this piece, I will include a demonstration of each step using a sample article entitled, "Take Great Photographs with Cameras - 7 Tips" from Article Geek for the textual content.

Responsive workflow

The heart of responsive typography development is based on recently accepted workflow processes for responsive web design, which is typically broken down into ten steps as described in the Responsive Design Workflow: Mobilism 2012 presentation by Stephen Hay. Viljami Salminen has distilled many of the same principles into "Prototyping Responsive Typography"; both Hay's presentation and Salminen's piece are inspirations for this article.

Prototyping

The first phase of the responsive typography process begins with adding a portion of the new content to be designed in the responsive format. Using just the textual content and a controlled set of fonts and font styles, you are then encouraged to view the typography as it is displayed in the browser without any other visual diversions or distractions. The typographic prototype functions as a single web page consisting of purely textual content along with font and typeset styles and scaling in an isolated fashion.

Get your content first

Before you can make any decisions about your font and typographic styles, you need to back up just a bit, and understand the textual content that will appear on the website. The content should drive the design, and not the other way around. This is a major shift in many traditional web design processes where the one-size-fits-all approach, which has worked in the past, no longer is appropriate. Not only the textual content, but the language, the flow, the topic, and subject matter needs to be fully understood before any styles or typesets are considered. For instance, the Comic Sans font will not work well with most serious subject matter topics, and in the same vein, a light-hearted subject will not be exhibited well using a font such as Baskerville, which is often considered to be the world's "most serious" font, often put to use in resumé writing. The sample raw text content from the article for the demonstration is displayed in Figure B:

Design in text

Several tools are available that allow for online testing and designing with text, while several allow real-time modifications and real-time reviewing, including Google web fonts, Typekit by Adobe, Web Font Specimen by Nice Web Type, Typecast, and FontFriend by Soma Design allowing you to design in the browser as displayed in Figure C below.

Figure C

Designing in the text means you can take the draft or original content and play around with various iterations from the typeface and font library. Start with a broad scope, and then start narrowing down your selection process. First, start with font classifications which include the common categories such as:

  • Sans Serif, Serif, Slab Serif, Script, Blackletter, Mono, Hand, or Decorative
  • Font weight, which is the thickness of the stroke (light, regular, heavy)
  • Font width, which is the width of the letterforms (condensed, regular, extended)
  • x-height, which is the ratio of lowercase height to height of capital letters (low, regular, high)
  • Contrast is the ration of thin strokes to thick strokes (low, regular, high)
  • Standard upper and lowercase letters, all caps only (all caps or small caps)
  • Number style (uppercase, lowercase)

And then you might need to consider language support to ensure the minimum characters necessary for each language you indent to add to your font subset.

For this part of the demonstration, I am using a combination of Google Web Fonts and Web Font Specimen. Using Google Web Fonts, I've narrowed the search font for a Serif with a slightly thin thickness, a straight slant, and slightly wider width, which resulted in 8 font family options as displayed in Figure D:

For the demonstration I then tested three of the fonts from this list Linden Hill, Neutron, and Port Lligat Slab by adding the link reference code displayed below to the <head> for the Web Font Specimen test file.

<link href='http://fonts.googleapis.com/css?family=Neuton|Port+Lligat+Slab|Linden+Hill' rel='stylesheet' type='text/css'>

And then we will be calling the font style one by one using the CSS code snippet:

@font-face {
font-family: 'Neuton', serif;
}
Studying the various font selections from the library, I've gone ahead and applied the Neuton font into the Web Font Specimen test file as shown in Figure E. It shows the title, by-line, and the first two paragraphs of the sample article text.

Figure E

Next, I swapped out the Neutron font with the Linden Hill font to see how it was displayed as shown in Figure F:

The variations are slight, but I like the second choice of the samples tested in the specimen file.

Next time

In Part 2 of this topic, we will continue with the workflow by narrowing down and selecting typefaces; we will apply a modular scale using several online tools to convert pixels to Ems; and we'll check and set the default line height. Finally, we'll view the completed demonstration.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks