Update: Cucumbertown is in midst of a design overhaul. We are now focusing on mobile and web and the design changes are not yet reflected on the site. Subscribe, if you want to keep yourself updated. The journey is exciting and we are chronicling everything.

Typographic conscience hit the web design world quite some time ago. Oliver Reichenstein passionately wrote about it in his controversial– Web is 95% typography post. Yet, unlike the other design choices that are data driven or research oriented, type choices we designers make tend to be ad-hoc and impulsive even today (I have experienced everything from blind folded choices to democratic voting).

At Cucumbertown, I was tasked with the redesign of the whole product experience; I wanted to make this process a bit more rational and goal oriented. One that is truthful to the product, end user environment, target group and typographic principles. Here is a chronicle of my journey so far, hoping to debate, clarify and fine tune my process with my fellow UX community.

Outline our Type Persona

Cucumbertown’s persona is a 26-35 year old working exec./mom. We wanted a typographic persona targeted at this group. This persona would appeal to our target group and represent the product, with characteristics similar in their day-to-day encounters with print/web/real life examples. Having that reference point makes the process of choosing from tons of great typefaces just a bit easier.

We explored typographic patterns on magazines, packaging and lifestyle products to define our persona and started looking for typefaces with those characteristics. To most of us, this exercise might seem implicit. After all, we’ve been designing for ages. But nothing could be further from the truth.

Our pinterest moodboard for food typography

I went all the way from collecting images on Pinterest to physically correlating product specimens from the real world. If you are designing a product, this is probably the most important activity to get it right at the onset. You can parallelize the activity with other elements but make sure you get this right.

The end result of this exercise defined our desired Cucumbertown Typographic style to few key keywords- Elite, Informal, Playful and Subtle. I also identified these keywords with some popular Typefaces to give the idea more visual clarity and presented to my Team. With a common consensus, I went on to short list Typefaces that matched this persona.

persona

Picking a workhorse

In the old days of letterpress printing, a typesetter did not have the luxury of digital font technology and had to make do with a small set of font families for almost all kinds of projects. The typefaces they used had an extensive set of weights and variants designed exclusively for meeting all possible requirements. Stylistically, I was keen on picking up the modern day equivalents of such workhorse typefaces – that can be used over and over, singing more than one note – letting them work in a variety of projects. While assuring great flexibility, I was also looking for a typeface that could blend in with a variety of design moods with a timeless quality. Typefaces like ProximaNova, Omnus Pro and Benton Sans were picked over the likes of DIN, Meta and Interstate for this versatility.

Oxtail (above) was rejected despite having good persona match as its style statement was bit overwhelming to be timeless. Din (below) on the other hand matched the persona yet appeared too modern and rigid for Cucumbertown texts.

Oxtail (above) was rejected despite having good persona match, as its style statement was a bit overwhelming to be timeless. Din (below) on the other hand matched the persona yet appeared too modern and rigid for Cucumbertown.

While having a persona defined upfront limited the choices, further considerations on the durability of the typefaces – choice of variants and weights available and vendor optimization for quick loading helped us narrow down further.

Go for type families that offer a great variation in weights and variants. But also keep an eye on the page load time.

We shortlisted type families that offer a great variation in weights and variants. Keeping an eye on the page load time.

Micro details, relishing the curves!

Typefaces seduce designers. Characteristics of the letter form- the serifs, cusps, strokes, slabs… are all possible elements for design inspiration. I was looking for characteristics in Typeface structure that can etch a unique style for Cucumbertown.

We loved the hanging numerals of FF Meta and the   spontaneity of letterforms of FreightMicro. We wanted to use them for our recipe steps numbering and for the interviews with our users in our magazine.

For instance, I loved the hanging numerals of FF Meta and the spontaneity of letterforms of FreightMicro and thought of using these qualities for our recipe steps numbering and for the interviews with our users in our magazine.

Finding the right pair

A project usually has one or two typefaces. But not more than three. Type pairs create a fine balance between functional and aesthetic demands. Heading typeface was picked with an eye on the product’s brand identity and one that stayed closer to the type persona. I went the conventional route with the choice of body text. While it shared the humanist structure of the Headings, focus here was on the readability and space economy. Typefaces with good x-height and open counters improved readability. Weights below 400 for body text were avoided, as they tend to render poorly on some browsers.

We tried different type pairings- from using a superfamily (one that has both serif,sans,slab variations- like the specimen composed to the left) to Typefaces with contrasting characteristics (Middle one with Omnus Pro and Adelle Sans)  till we achieved a closer match with the product branding and the type persona (Shortlisted candidates on the right most specimen- FreightMicro and Bento Sans).

I tried different type pairings – from using a superfamily (one that has both serif, sans, slab variations- like the specimen composed to the left) to typefaces with contrasting characteristics (Middle one with Omnus Pro and Adelle Sans) till we achieved a closer match with the product branding and the type persona (Shortlisted candidates on the right – FreightMicro and Benton Sans).

Avoiding Lorem Ipsum

While it is a great way to evaluate the overall texture and distribution of a typeface, dummy text do not give us the actual sense of readability and hence content appropriateness. Evaluating readability and style without relevant content was a wasteful exercise. So I made all our tests with actual content from the website. Type was set with recipe steps, actual comments and recipe titles. This is a luxury we have due to the design overhaul. Its important that you mimic how your end result is going to be if you are in the ideation phase.

Creating specimen sheets for different device widths

Consideration for space economy on mobile screens was the key focus as we were going the responsive way. While choosing typefaces that can deliver maximum words per line on the mobile layouts, I also ensured striking a fine balance between space economy and readability on bigger screens. Typecast is a great service to create Specimen sheets and distribution among stakeholders.

The typeface should render with optimum space economy and even line breaks on mobile widths while readable as longer lines of text on bigger screens.
The typeface should render with optimum space economy and even line breaks on mobile widths while rendering at optimum line lengths on bigger screens. The ground rule here is to avoid too few or too many words per line. Both unfavorable for good readability. In the example above we can see how FreightMicro (right) slightly edges Benton Sans (left) in this department.

Field testing

While testing specimen sheets with our users, I realized the need to make further considerations over the line heights on the recipe steps. Cooking often demands frequent glance at the instructions and ingredients. The reader’s eyes have the constant task to glance-scan-and re-discover quickly where they were last placed. This is a reading pattern very different from the typical continuous reading.

fieldtest

My initial specimens designed with Adelle font family (one of my personal favorites) with its compact and taller letterforms, reduced the white space available between words and lines, eventually causing uneasy readability in comparison to the generous distribution of text set in a typeface like FreightMicro.

Lastly, avoiding the ‘Mac Trap’

Macs are beautiful devices for designers, and they handle most designer tools effortlessly. But the whole world out there does not see your designs or read your content on a Mac. They do not read on Cinema displays. They love reading content on smaller devices, their PCs and on the browsers of their choice. So it’s essential to consider the device/user agent rendering of different typefaces on multiple devices.

Some thumb rules I followed

1. Typeset the fonts in varying sizes from 12px to 18px. This is usually the range in which readable content text works on the web.

2. Choosing Typefaces with open counter structure, good x-height. They generally render well on screen and offer good readability.

3. Avoiding very thin or very chunky typefaces – Both render badly with Firefox browsers rendering technology. Webkit antialiasing makes them even  thinner.

4. Picking beautiful numerals and italics – Being a recipe site and a network for sharing personal experiences, I wanted to give a strong personality though type in those sections.

5. Making sure the macro level typographic impression of the layout. The relationship between text units, line spacing and readability remain the same – with default system fonts itself even in the event of a third party font not being downloaded properly. This ensured backward compatibility.

font-chart

As you can see from above, this process helped me a great deal, in shortlisting from the myriad of options available today. We are currently evolving our new designs with FreightMicro, Benton and few others from the initial list.

Having evolved a typographic language this way aligned our efforts closely with our product strategy and brand value. While this is still a work in progress, I have greater comfort and conviction today with my type choices.