Exercise 3 If the face fits

1     The Brief 

Create your own sample book of typefaces on your computer.  Organise them according to serif, sans-serif, script, decorative, fixed width, techno and pixel fonts.  Identify font styles like bold, italic, black or light fonts.

Now identify which fonts you might use in the following commissions:

  • A short story in a woman’s magazine entitled “I thought I loved him; now I’m not so sure”.
  • An advertisement in a parish magazine asking for more helpers on the flower rota.
  • A poster to advertise an after-school club for boys aged 13 – 14.
  • Your friend’s engagement party.

Make a mock-up of each commission and try different fonts to see how each changes the feel of the text.

2     Spider diagram

Today we have numerous typefaces available to us, and choosing a typeface for a specific design can be overwhelming.  Making a typeface sample book was an excellent way of organising my thoughts and comparing typefaces.  I used the categories in this exercise as a starting point and branched out my research by referring to Thinking with Type by Ellen Lupton.  I downloaded popular typefaces and explored them in more detail.  Adobe Fonts include many popular fonts in the Creative Cloud subscription, and Google Fonts also have many free options.

Once I had an idea of the fonts available, I made a spider diagram of my typeface preferences. I selected a typeface in each subcategory, e.g. under serifs, choosing a typeface under Old Style, Traditional and Modern.

Figure 1 Spider diagram

3     Presenting my sample book

I had my planning in place and now had to find a way of presenting the typefaces so they are clear and easy to compare.  I collected visual references on ways to present typefaces and decided to keep it simple.  I then went down the rabbit hole to create a digital book and explored InDesign by exporting .epub files, CanvaBook CreatorKindle Direct Publishing and Kids Kindle Book Creator, which prompted me to learn more about publishing software and the importance of layouts and grids. 

Figure 2 Visual references

I created a digital typeface book but could not embed it into a pdf file or showcase it in my blog without obtaining an ISBN or ASIN number.  Nevertheless, I will look into this when I need to publish eBooks.

Follow the link below to view my sample book of typefaces.

https://www.wynaerasmus.com/typography

I used Adobe Illustrator to create the layouts for each typeface and style and experimented with how each typeface works at a small size and heading.  Ellen Lupton says that combining type is like making a salad.  “Start with a small number of elements representing different colours, tastes, and textures.  Strive for contrast rather than harmony, looking for emphatic differences rather than mushy transitions.” (Lupton, 2010)  I will attempt this approach when mixing typefaces and identifying fonts in the commissions section of this exercise. 

4     Type Classification

4.1      Serif 

The “serif” is a small line or stroke at the end of a larger stroke in a letter.  Serifs help the eye flow from one letter to another but can also make letters difficult to read at small point sizes.  

4.1.1   Humanist or Old Style (e.g. Garamond)

The Roman typefaces of the fifteenth and sixteenth centuries emulated classic calligraphy.  The Garamond typeface has many variations, designed by different font designers inspired by the original punch cuts designed by Claude Garamond in the sixteenth century. (Lupton, 2010)

Figure 3 Garamond Premier Pro Typeface

During the production of Adobe Garamond, its designer Robert Slimbach started planning for a second interpretation of Garamond, called Garamond Premier, in 1988.  Garamond Premier has four optical sizes (Regular, Caption, Subhead and Display) and at least four weights (regular, medium, semibold, and bold, with an additional lightweight for Display), each with its respective italic, totalling 34 styles in the OpenType font format.  (Wikipedia, 2023)

4.1.2   Traditional (e.g. Baskerville)

These typefaces have sharper serifs and more vertical axis than humanist letters.  When the typefaces of John Baskerville were introduced in the mid-eighteenth century, their sharp forms and high contrast were considered shocking. (Lupton, 2010)

Figure 4 Baskerville Typeface

Baskerville is a serif typeface designed in the 1750s by John Baskerville in Birmingham, England, and cut into metal by punchcutter John Handy.  Baskerville is classified as a transitional typeface, intended as a refinement of what is now called an old-style typeface. (Wikipedia, 2023)

Baskerville PT was designed by Arina Alaferdova and Dmitry Kirsanov at Adobe Fonts, inspired by the original Baskerville.  URW Baskerville typeface has forty-seven styles (ten in Figure 4) and was published by URW Type Foundry. (Fontspring, 2023)

4.1.3   Modern (e.g. Didot)

Didot is a group of typefaces.  The word Didot came from the famous French printing and type-producing Didot family.  The typeface takes inspiration from John Baskerville’s experimentation with increasing stoke contrast similar to faces developed by Giambattista Bodoni in Italy.  (Wikipedia, 2023)

The typefaces designed by Giambattista Bodoni in the late eighteen and early nineteenth centuries are radically abstract.  Note the thin, straight serifs; vertical axis; and sharp contrast from thick to thin strokes in Figure 5. (Lupton, 2010)

Figure 5 Bodoni
Figure 6 Didot Typeface

Linotype Didot (LT Pro) was drawn by Adrian Frutiger in 1991. (Fontke, 2023)  AW Conqueror Didot Std was designed by Jean Francois Porchez at Adobe Fonts. (Adobe Fonts, 2023)

4.1.4   Egyptian or Slab Serif (e.g. Rockwell)

Many bold and decorative typefaces were introduced in the nineteenth century for use in advertising.  Egyptian typefaces have heavy, slab-like serifs. (Lupton, 2010)

Rockwell is a slab serif typeface designed by the Monotype Corporation and released in 1934.  The project was supervised by Monotype’s engineering manager Frank Hinman Pierpont.  Rockwell is used primarily for display or at small sizes rather than as a body text. (Wikipedia, 2023)

Figure 7 Rockwell Typeface

4.2      Sans-Serif 

A sans-serif typeface has no serifs and features clean character designs.

4.2.1   Transitional (e.g. Neue Haas Grotesk)

Helvetica, designed by Max Miedinger in 1957, is one of the world’s most widely used typefaces.  I love this typeface and chose this as one of my sans-serif samples.  Helvetica, also known by its original name Neue Haas Grotesk, is a neo-grotesque design, once influenced by the 19th-century typeface Akzidenz-Grotesk and other German and Swiss designs. 

Figure 8 Neue Haas Grotesk Typeface

Neue Haas Grotesk was digitised by Christian Schwartz in 2010 based on the original settings of the metal type and used the typeface’s original name.  The Guardian newspaper writing for Typographica, Matthew Butterick, described the release as better than any previous digital release of Helvetica “it never looked better”.

4.2.2   Humanist (e.g. Verdana)

Humanist sans-serif classification first appeared in the early twentieth century and is characterised by the presence of the hand and an overall more organic structure. (Wikipedia, 2023)

Figure 9 Verdana Typeface

The original Verdana family included only four fonts; regular, italic, bold and bold italic.  The new and expanded Verdana Pro family contains 20 fonts, adding light, semibold and black styles with italics, as well as condensed styles with italics across all weights.

4.3      Script Fonts

Script font can be defined as fonts designed to resemble cursive handwriting.  Cursive typography was used in the 19thcentury for products and services to set them apart from the competition.  A reputation was tied to this badge as a form of branding. 

Some examples from the early 20th century are; the signatures of Messrs Kellogg (1906), Ford (1909) and Cadbury (1911).  Today brands are embracing the informal feel and added personality that a script font can bring, such as Instagram (2013) and Pinterest (2011).  (Carson, 2017)

Figure 10 Script font wordmarks

4.3.1   Lullabies

Lullabies Font was designed by Ryan Martinson at Adobe Fonts.  This font with a handwritten feel is one of the script fonts I have chosen for my Typeface Sample Book.

Figure 11 Lullabies Script Typeface

4.3.2   Wreath

Wreath is a dingbat and brush script font family designed by Jeremy Dooley.  This typeface has twenty-one styles, but Adobe Fonts has only a few styles as part of the Creative Cloud subscription.

Figure 12 Wreath Script Typeface

4.3.3   Rollerscript

Rollerscript was designed by Nick Cooke in 1999 from G-Type, a digital font foundry.  Rollerscipt is often used in packaging design and has a casual, informal handwriting feel created with a roller pen.  It is legible, authentic, versatile and fun.

Figure 13 Rollerscript Typeface

4.4      Decorative Fonts

These fonts are only suitable for headings, but I included them in smaller sizes as well for the sake of comparison. 

4.4.1   Canvas

Canvas Script is part of the Canvas Acrylic mega family.  It is a set of acrylic brush fonts with regular, heavy, and layered versions.  It features an authentic, hi-res texture that retains its realism even at large sizes.  Yellow Design Studio designed the Canvas Typeface.

Figure 14 Canvas Script Typeface

4.4.2   Gloss Drop

Gloss Drop Font Family was designed by Roland Hömann and published by Phospho.  Gloss Drop contains only one style and could work well for text where legibility is less important.

Figure 15 Gloss Drop Typeface

4.4.3   Giddyup

Laurie Szujewska, Adobe’s art director, used the rope letters decorating cattle brands and cowboy blankets to create Giddyup, a typeface with a twist.  Laurie explains that the idea was to make each letter with one line that overlaps like a rope rather than two strokes joined together. (Adobe Fonts, 2023)

Figure 16 Giddyup Typeface

4.5      Fixed Width

A fixed-width font, also called monospaced, fixed pitch or non-proportional font, is a font whose letters and characters occupy the same amount of horizontal space.  This contrasts with variable-width fonts, where the letters and spacings have different widths. (Wikipedia, 2023)

4.5.1   Courier

Courier is a monospaced slab serif typeface.  The typeface was designed by Howard “Bud” Kettler.  Initially created for IBM’s typewriters, it has been adapted for use as a computer font, and versions of it are installed on most desktop computers.

Figure 17 Courier Typeface

4.6      Techno and Pixel 

Techno font has a modern square sans-serif typography of geometric characters, and Pixel fonts use tiny blocks (pixels) inside the letters.  Pixel fonts were popular during the 90s before the rise of high-resolution displays.

4.6.1   Lo-Res

I have chosen Lo-Res typeface as a techno and pixel font for my Typeface Sample Book.  Lo-Res was designed by Zuzuna Licko in 1985 and 2001.  Oakland faces were originally designed as bitmap fonts for use of the 72 DPI computer screen and dot matrix printer before high-resolution fonts were available. (Font in Use, 2023)

Figure 18 Lo Res Typeface

5     A short story in a woman’s magazine

I will identify which fonts to use for a short story of 1300 words in a woman’s magazine entitled “I thought I loved him; now I’m not so sure”.  Many possibilities influence the typeface, so I narrowed it down using a spider diagram.

Figure 19 Woman’s Magazine spider diagram

5.1      Writing a brief

The audience for this magazine is young adult women (aged 28 – 35) who want to settle down, get married and possibly have children.  These women are established in their careers and want more out of life.  As their needs change, they also view their partners in a different light.  Is he marriage material?  Does he want children?  Things that haven’t been important to this woman before have become vital as she matures.  She has made her own money and is used to having nice things. Taking this into consideration, the magazine will be upmarket and high-end.  The magazine will have a more serious tone with articles focused on everyday issues in a woman’s life.  The article will launch in January during summer (South African seasons) and is most likely when people want to make changes to better themselves.  The competition for the magazine is; Tatler, Vogue, Elle and Marie Claire

5.2      Visual Reference

I collected visual references to get a feel of the tone and feel of the magazine article. 

Figure 20 Visual Reference for Magazine Short Story

5.3      Choosing font options

I have chosen three font options for the short story.  The first two options are a sans-serif for the heading and a serif for the body text.  The third option is a serif for the heading and a sans-serif for the body text.

Figure 21 Three font paring options for the short story

5.4      Creating the editorial

Adobe InDesign is a desktop publishing and layout application and the ideal software for creating magazines, books, brochures, as well as print and digital publications. It is industry-standard editing software for laying out long-form multipage documents but can also be used for smaller projects.

I am using a four-page layout of two spreads containing 1300 words and two pictures.   It will probably be a good idea to draw the layout on paper before working in the software, but in this instance, I had no idea how many pages I would need to contain 1300 words.  I copied 1300 words of text from Lorem Ipsum, pasted it into a blank Word document at 12pt to get an idea, and used the Elle magazine article in figures 22 and 23 as a layout guide. 

It was a matter of trial and error at first, but once I learned more about using InDesign, I had an easily editable document.  I changed the typeface to see how it changes the feel of the magazine and exported the files as jpegs to make mock-ups in Photoshop.

Figure 22 Elle UK, February 2016 (Layout Guide)
Figure 23 Elle UK, February 2016 (Layout Guide)

5.5      Comparing the different typeface pairings

The three typeface pairings were carefully chosen to enhance the feel and mood of the article, resulting in a subtle visual change.  I haven’t concerned myself with sub-text, which would give the layout a more polished look, but focused more on the heading and body text of the article. 

5.5.1   Museo heading and Garamond body text (Figure 24)

I constructed the heading in broken segments to convey the meaning of feeling divided in oneself.  Museo Sans is a low-contrast type and worked well in this instance by keeping the type low contrast and rather have contrast in the size and placement of the text.

Garamond pairs well with Museo, but I think I will use a lighter weight for the body text next time as it displays quite a dark body text in medium for such a sensitive subject.  Using Museo Sans for the heading and body text could also work well and look “soft” and “open”.

Figure 24 Finished Design using Museo Heading and Garamond Body Text

5.5.2   Classico URW heading and Coranto 2 body text (Figure 25)

This is my favourite layout.  The Classico heading has a subtle contrast, making it softer and more feminine than Museo but doesn’t seem overpowering for the segmented effect of the heading.  The body text in Coranto 2 has a more open and softer feel than Garamond medium and seems more cohesive with the feel and mood of the editorial. 

Figure 25 Classico URW heading and Coranto 2 body text

5.5.3   Didot heading and Din body text (Figure 26)

Din for body text type is my absolute favourite for this editorial, and I would like to see it paired with Classico URW, but it might not have enough contrast together.  Didot is too busy for this heading but pairs well with Din body text, and the combination will look good on a more simple heading.

Figure 26 Didot heading and Din body text

The best of the three is the Classico URW and Coranto 2 combination being feminine and sensitive, with enough contrast but still cohesive with the feel and look of the editorial.  Didot and Din will also work well if I keep the heading simple by avoiding different sizes and text placement. 

Comparing my magazine layout with the Elle UK February 2016 layout, it is clear that my photos could have more dark tones to pick up the dark tones in the text.

6     An advertisement in a parish magazine

The advertisement should be A6 landscape, and I will explore the typeface pairings for the header and body text.

Figure 27 Lullabies and Classico URW

6.1      Lullabies Script and Classico URW (Figure 27)

I used the Lullabies Regular text at 30pt, which is the script part of the design.  I worked with a grid and selected the text size using the golden ratio.  The middle-sized sans-serif is Classico URW, one of my favourite fonts, in black style at 11.5pt, and the smaller text at the bottom is also Classico URW, but in a lighter weight at Regular.

I was aiming to keep the design simple at such a small size.  The Lullabies text is artistic and floral-like and contrasts with the bright, happy yellow background.

Figure 28 Wreath Script and Museo Round

6.2      Wreath Script and Museo Sans Rounded (Figure 28)

The wreath script text gives the design a softer touch and contrasts with the Museo Sans but is still cohesive enough to work well. 

Figure 29 Neue Haas Grotesk Display Pro and Adobe Handwriting

6.3      Neue Haas Grotesk Display Pro and Adobe Handwriting (Figure 29)

This combination is not ideal as it seems as if the handwriting font is out of place.  This might be because the two fonts have a similar line weight.  A heavier and more flowing script font might work better for this advertisement.  

7     A poster to advertise an after-school club

I will explore the typeface pairing for the header and body text for an A3 poster to advertise an after-school club for boys aged 13 to 14.

Figure 30 Clarendon Wide Sketch and Verdana

7.1      Clarendon Wide Sketch and Verdana (Figure 30)

Clarendon Wide Sketch has a chalkboard or sketchy feel.  This creates an informal and fun tone.  The venue is at the Old Gym, and the activities are all recreational, so I have decided to keep with the gym theme.  Verdana works with Clarendon Wide Sketch, but it feels as if a more traditional slab serif would work even better. 

Figure 31 Glodok and Ofelia Text

7.2      Glodok Display and Ofelia Text (Figure 31)

I am delighted with this combination.  Glodok is a bold and heavy font and is very eye-catching.  It is retro-inspired and has made a big comeback among the younger crowd.  Ofelia Text pairs beautifully with Glodok and strikes a balance between formal and playful.  Ideal for an after-school recreational environment. 

Figure 32 Chaloops and Le Havre

7.3      Chaloops and Le Havre (Figure 32)

The feel and mood of this combination are spot-on for the visual language of this poster.  Chaloops reminds me of The Wimpy Kid books, and the Le Havre sans-serif looks very polished alongside this happy and playful type.  This font works the best out of the three because it is most likely to evoke a sense of excitement in its school children audience.

I have chosen my fonts by referring to my sketchbook of fonts I have created while working on the exercise Playing with words.  It is most helpful to print and paste all these font exercises and explorations into my sketchbook so that I can refer to them when working on a project.

8     Your friends’ engagement party

They want a flyer A5 size to send to their friends as if advertising a club night.  

Figure 33 Ohm and Ofelia text

8.1      Ohm and Ofelia text (Figure 33)

The Ohm type has a tube lighting feel, similar to nightclubs.  The background carries the mood of a disco ball or coloured lights, and as dance clubs are the most popular, I have centred my design around the feel and tone of a dance nightclub.  Ohm typeface works well with Ofelia text, and I am pleased with this combination.

Figure 34 Bookmania and Como

8.2      Bookmania and Como (Figure 34)

I have tried something new in this design.  As Bookmania is an open type, I played around with the glyphs to create an ornate heading that complements the background.  I experimented with having the text column on the right to see if it would still look balanced if I used an extra light text weight; however, I do feel that an image such as a disco ball could balance the composition.

Bookmania and Como is a lovely font pair, and I have made a special note in my typography sketchbook.

Figure 35 Giddyup Std and Le Harve

8.3      Giddyup Std and Le Harve (Figure 35)

While exploring fonts earlier in this exercise, I wanted to try this font combination, and this invite is the ideal opportunity.  The Giddyup Std type reminds me of streamers and confetti and is spot-on for a nightclub feel.  Le Harve pairs very well with Giddyup, and I will remember this for future projects.

Overall it was an intense exercise to learn more about typefaces and how to pair them.  I can summarise my experience as follows:

  • Making a typeface sample book was an excellent way of organising my thoughts and comparing typefaces and a visual diary when choosing typefaces.
  • I have learned the importance of using grids and columns.
  • Serif typefaces can be categorised under Old Style, Traditional, Modern and Slab Serif.
  • Sans Serif can be categorised under Humanist, Transitional and Geometric. 
  • When combining type, strive for contrast rather than harmony, looking for emphatic differences rather than mushy transitions.
  • Decorative and Script fonts are the most effective for headings and short phrases and are not ideal for body text.
  • In Woman’s magazine short story, I have learned the importance of viewing the body text as part of the design and remembering it gives a darker tone to the overall design.
  • When comparing typefaces, there should be contrast, but the text should still be from the same genre, e.g. Neue Haas Grotesk and Adobe handwriting are too far apart and don’t seem to be from the same genre. 

Works Cited

Lupton, E. (2010). Thinking with Type. New York: Princeton Architectural Press.

Wikipedia. (2023, April 11). Wikipedia. Retrieved from Garamond: https://en.m.wikipedia.org/wiki/Garamond

Fontspring. (2023, April 21). Fontspring. Retrieved from URW Baskerville: https://www.fontspring.com/fonts/urw-type-foundry/urw-baskerville

Wikipedia. (2023, April 21). Wikipedia. Retrieved from Baskerville: https://en.m.wikipedia.org/wiki/Baskerville

Wikipedia. (2023, April 21). Wikipedia. Retrieved from Didot (typeface): https://en.m.wikipedia.org/wiki/Didot_(typeface)

Fontke. (2023, April 21). Didot LT Pro. Retrieved from Fontke.com: https://eng.m.fontke.com/font/26760042/detail/

Adobe Fonts. (2023, April 21). AW Conqueror Didot. Retrieved from Adobe Fonts: https://fonts.adobe.com/fonts/aw-conqueror-didot

Wikipedia. (2023, April 21). Rockwell (typeface). Retrieved from Wikipedia: https://en.m.wikipedia.org/wiki/Rockwell_(typeface)

Wikipedia. (2023, April 21). Humanist sans-serifs typefaces. Retrieved from Wikipedia: https://en.m.wikipedia.org/wiki/Category:Humanist_sans-serif_typefaces

Carson, N. (2017, May 25). Creative Bloq. Retrieved from 4 Modern bands flying the flag for script fonts: https://www.creativebloq.com/features/4-modern-brands-flying-the-flag-for-script-fonts

Adobe Fonts. (2023, Aprill 23). Giddyup. Retrieved from Adobe Fonts: https://fonts.adobe.com/fonts/giddyup

Wikipedia. (2023, April 21). Wikipedia. Retrieved from Monospaced font: https://en.m.wikipedia.org/wiki/Monospaced_font

Font in Use. (2023, April 22). Fonts in Use. Retrieved from Lo-Res: https://fontsinuse.com/typefaces/2026/lo-res

Leave a Reply