Playfair Display —A Typographic Specimen
Project Brief
The project goal was to create a well structured and designed typographic specimen in the the format of a web desktop landing page. I was given the typeface Playfair Display by Claus Eggers Sørensen. I will give you a look at my design process and finally a prototype of my finished landing page.
What is a Typographic Specimen?
To begin, I first had to understand what a type specimen was. It is a functional and creative way of showcasing a Typeface in terms of its usage, applications and fonts. They often give a background or story behind the development of the typeface in order to create more context, identity and depth as to how, why and where they can be used as both a typographical or visual element in design.
Description
Playfair Display is a transitional, serif typeface.
History
It was designed by typeface designer Claus Eggers Sørensen and was published under the Open Font Licence 1.1, granting you license to use the fonts free of charge, and enables you to extend & modify the family should you wish to. The complete source-files are available here.
Inspiration
The typeface was released in 2011. Although fairly new, Sørensen took a lot of inspiration from the time of the enlightenment in the late 18th century. 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.
Playfair in Use
As the name indicates, Playfair Display is well suited for titling and headlines.
I saw it was used in many fashion blogs and magazines. One that really stood out to me was the Vogue España website.
Type Anatomy
It has an extra large x-height and short descenders. It can be set with no leading if space is tight, for instance in news headlines, or for stylistic effect in titles.
Capitals are extra short, and only very slightly heavier than the lowercase characters. This helps achieve a more even typographical colour when typesetting proper nouns and initialisms.
Languages
All European languages using the latin script are supported. Playfair Display also cover the cyrillic glyphs used in Bulgarian, Belarusian, Russian, Bosnian/Serbian (including Serbian morphology for б), and Ukrainian.
Font Styles
Playfair Display comes in three weights and two styles (regular, bold, black — normal vs italic), including small-caps for all weights and styles — also for the cyrillic.
Font Pairing
Being a transitional design, stylistically Playfair can accompany many sans serif fonts, where they are used for body text. Some examples of fonts that would pair well with Playfair are :
- Georgia
- Montserrat
- Open Sans
- Roboto
Once I had done some background research on my typeface, I was able to come up with the ‘Why’ behind my design concept.
I asked myself :
- Why would someone want to use playfair display?
- What is its unique selling point?
- What value does it add to designs?
I came up with the following ‘Why’ and it was the backbone of my design decisions :
“Playfair Display is a classical typeface with a modern feeling that will give designs the elegance they need.”
After having determined the ‘Why’ behind my design, I started to think about the mood that I wanted to create.
Mood
- Elegance
- Vintage
- Feminine
- Modern
- Bold
- Extravagant
- Classy
- Stylish
Visual Language
1 — Colour
I decided to go with pastel colours that had a vintage feel to them to really communicate my WHY.
“Playfair Display is a classical typeface with a modern feeling that will give designs the elegance they need.”
I used different shades and hues of each of the colours. I also used different opacities of the same colour to create a layering effect and give the design hierarchy.
I used black for titles to make sure that it popped out to the user / designer buying the typeface. I played around with using darker shades of the blue but it wasn’t clearly showing the hierarchy so decided to go with the black in the final version.
2 — Shape
I used shapes in the typeface to create an organic feeling to the landing page. Which consists of flourish shapes, curls and rounded edges.
3 — Space
The shapes I chose to work with helped create an organic space that would help the user move along the page. I used the colours and shapes to create hierarchy and layering effects.
- hierarchy
- layering
- gradients
4 — Movement
The shapes also help create a flow to the piece.
- Flowy
- Wavy
My moodboard included :
- Fashion pictures — playfair display is used in many fashion blogs and magazines. I used one modern editorial photo and one vintage photo.
- Colours — the pastel colours are giving off that vintage vibe.
- Typeface characters — I used some of the characters to showcase the typeface to reinforce its elegance and femininity.
I used these images to reinforce my WHY — “Playfair Display is a classical typeface with a modern feeling that will give designs the elegance they need.
This was my first time working with photoshop, I went through a lot of different iterations before settling on my final design. I experimented with different tools and had a lot of fun doing so.
Initially I had the design on the left as my first start. I had many words in different opacities describing the typeface. However, I tested it out a little bit on people and realized that maybe there was too much going on so I decided to take a bit out and keep only a few.
I also played around with masking the headings (on the right), but decided to only use the flower masking for the accents and symbols on the sides of the page. I then turned to using a the darkest blue within my colour palette for the headlines, but soon realized that it wasn’t standing out very much. In the end, I decided to go back to using black for the headers — to give the landing page a clear hierarchy.
I have attached the prototype landing page below, however if you would like to be able to click through the font pairing carousel please click here.
Landing page
