Playfair Display Type Specimen — UI Case Study

RED Academy UI Communication Program

The purpose of the P1 project was to create a purposefully designed typographic specimen for Playfair Display and showcase it as a desktop landing page.

The following case study will outline my process from research to prototype.

Research

First off what is a typographic specimen?

A type specimen is a publication in which a typeface is shown and presented, detailing what fonts the typeface consists of. These specimen can be used by graphic designers and typographers to judge how a particular typeface behaves on the printed page, and to decide if they want to buy and use the typeface in question.

Moen, Denmark

History

Playfair Display was designed by Claus Eggers Sørensen in 2011. Sorensen, originally from Denmark, received a BDes from The Ger­rit Rietveld Academie in Amsterdam and a Master of Arts in Typeface Design at The Department of Typo­graphy & Graphic Com­mu­nic­a­tion from the University of Reading.

Characterization

A modern typeface utilizing traditional Serifs

Design

Playfair takes its design from the time of enlight­en­ment in the late 18th cen­tury. Broad nib quills were replaced by poin­ted steel pens, which influ­enced typo­graph­ical let­ter­forms to become increas­ingly detached from the writ­ten ones. This shown by most ears and tails ending in a round ball shape, G’s having a linked loop, and most letters contain contrasting line widths.

Purpose

As the name indicates, Playfair Display is well suited for titling and headlines. Languages, like German, where nouns are capitalized, particularly benefit from this lower contrast between lower and upper case glyphs. In German, with it’s many capitalized words, and other European languages that use many diacritical characters, it is advised to use more leading.

• It is still quite rare to find a classical typeface tuned for display sizes

Influence

This design lends itself to this period, and while it is not a revival of any particular design, it takes influence from the designs of printer and typeface designer John Baskerville, the punchcutter William Martin’s typeface for the ‘Boydell Shakspeare’ (sic) edition, and from the ‘Scotch Roman’ designs that followed thereafter.

A comparison between William Martin’s Boydell’s Shakespeare venture, Baskerville by John Baskerville, and Playfair Display

Font Pairing

Being a transitional design, stylistically Playfair can accompany Georgia, Montserrat, Open Sans, and Roboto, for body text.

Places Used

Playfair Display is featured in more than 2,700,000 websites mostly being used as a titling and heading typeface. Below are some examples of the typeface in use.

Is Barack Obama the President?

Family Tales

Yuko Shimizu — Award-winning Japanese illustrator based in New York City and instructor at School…

Vogue España — Revista de moda y tendencias.

Centrefold Magazine, Issue 08

The Design Process

Design Inception

Why

Before designing the landing page I had to consider why would someone want to use Playfair Display. Using the history of the typeface I concluded the reason a designer would purchase the typeface.

“To provide designers with an elegant yet modern typeface that offers a feeling of sophistication to their content”

Mood

Combining classical and modern elements was a difficult tasks. It took boiling down the two themes to uncover what moods are shared between them. Contemporary, rich, classic, trustworthy, and elegant were feelings that I felt both expressed the modern and classical elements of Playfair Display’s mood.

Visual Language

The visual language used to showcase the typeface stems from the mood. Broken down into 4 categories I was able to paint a picture of how Playfair should be shown. Strong colours like navy, black, gold, and white give a feeling of sophistication. The space, shape, and movement of the landing page all take cues from the characteristics of the typeface’s design.

Mood Board

When constructing the mood board for Playfair Display I wanted to make sure the visuals were true to the history and creation of the typeface. I pulled classical elements such as quill pens and elegant moldings / finishings to showcase a classical feeling. The modern painted art showcases texture with its layers of paint and uses the design colour pallet. The women’s classical hair style mirrors the curves of the “&” symbol creating a link between form and mood. Sørensen grew up in Denmark which has cool mild climate. I chose to represent the feeling and temperature of the design as cold because of his history in Denmark. The centre piece of my mood board showcases a unison between modern and classical design. The modern couch contrasts the classic moldings of the room, but the two elements fit together creating a balance that I wanted to recreate for the landing page.

Style Tile & Brand Guideline

I created a style tile using notes from the mood board to better see all the elements of the landing page together. Headings, kerning, leading, fonts, icons, colours, and shadows are all shown in this style tile.

User Testing

I went through different iterations and layouts of my landing page before I decided on the final design. First of all the layout was important. I wanted to create a flow that would be best for selling the typeface. Initially I thought that Purpose, Font Family, and Examples would be the best layout, but later decided on a flow had a building feeling.

1. I first started with usage. Right away the potential customer could see what the typeface is used for and decided if that meets their needs.
2. Next I created a style section so the customer could tryout the font to see if the design matched their content.
3. Following the style section, I created the design section to give more detail about the actual typeface. This section is important because it breaks down the key elements of Playfair Display differentiating it from other serif typefaces.
4. Finally I finished the page with a download section that reiterates the key points of the typeface and provides a simple CTR for customers to download the typeface.

When creating the design of the landing page I had originally started moving towards a more flat design. I had flattened the images in Adobe Illustrator to give almost a painted or drawn feeling. Although this created continuity between the images it gave the landing page too much of a classic / interior design feeling and lacked the modern touch that I was working so hard to integrate. For the final design I recreated the inspiration picture as the background and used modern opaque panels to make a place for easy to read content to be displayed.

Design iterations of the landing page

Prototype

The following is a link to a functioning prototype in InVision. The prototype includes a click through in the Usage section that opens more examples, a scroll over the Style section that previews text, and a closer detail hover in the Design section.

Click here to view the project `PLAYFAIR`

Conclusion

The most challenging part of this design was to make a classic serif typeface feel usable in a more modern era of design. It took breaking down the words classical and modern to find the key pillars that these designs have in common. Using the history of Playfair Display along with my design inception I was able to create a landing page for a type specimen that, design wise, is true to the typeface. The overall aesthetic of the landing page is classic but with a modern integration that isn’t forced, but seamlessly integrates and feels like it should be there.

See more on my portfolio at www.devonseidel.com