Due Dates and Participation Requirements

Learning Objectives Covered

• LO 01.01 – Visually analyze and identify four font features that work best for web vs. print
• LO 01.02 – Identify and select an appropriate font for a specific purpose

Career Relevancy

Choosing a font for a project is one of the most basic tasks of a designer’s job. It is also one of the most important ones, as the right font will impact both the look and the usability of the project, and can quickly make or break the successful delivery of your message. Fonts cannot be chosen just by your personal preference, but need to fulfill certain criteria depending on the function of the design. Being able to choose appropriate fonts for your designs will be one of the main signs that you are ready to work in a professional setting.

Background

Choosing the right font

It’s been said that a font is the clothes letters wear – so when using text a designer always has to ask themselves “What to wear?” If choosing the right font is like choosing the right clothes to wear, you have to be aware of the occasion. Some clothing is completely appropriate in one situation, yet totally inappropriate in another. For example; a nice swimsuit would be completely appropriate at a beach party, but you would never wear a swimsuit to a job interview no matter how cute it was. Sometimes it is less obvious what clothing should be worn. For example, what should you wear to a high school reunion, a birthday party, or a casual business lunch? The same holds true with fonts. Some fonts, like Rosewood or Edwardian Script, have a definite personality and are appropriate for certain types of design. Others, like Helvetica and Baskerville are pretty safe and can be used for many different occasions (like black pants and a simple shirt, or jeans and a white shirt).

It will take some research to select an appropriate font for a specific occasion. Take advantage of font libraries, like Typekit, to test what your text will look like in a few different options to make sure you find the right font for the job.

“When choosing a typeface, graphic designers consider the history of typefaces, their current connotations, as well as their formal qualities. The goal is to find an appropriate match between a style of letters and the specific social situation and body of content that define the project at hand. There is no playbook that assigns a fixed meaning or function to every typeface; each designer must confront the library of possibilities in light of a project’s unique circumstances” (Lupton, 2010).

Web vs. print; serif or sans serif?

As you may have discovered in your readings there are not only differences in how the style of the font looks for a certain project, but also in how it works from a technical standpoint. The rule of thumb used to be that a serif font was easier to read in smaller sizes and big bodies of copy because of the little serifs that leads your eye from one letterform to the next and how the thicks and thins make the shapes more unique so our brain will recognize them quicker. That is all true if you are looking at printed type, but since the digital revolution, more and more people are reading from a screen (whether that is a computer, tablet or a mobile phone). The resolution of a screen is very different from a physical piece of paper and the same rules of legibility no longer apply. Then there is the added influence of zooming into a screen (which with print you can only do with a magnifying glass or glasses). On a screen, a sans serif font is much more manageable, and readable, as the thinner strokes will not disappear in the resolution, and they are much more easily scaled. David Kadavy explains this in his book, Design for Hackers; “…the popular web fonts (Arial, Verdana, Georgia, and Times New Roman) are such not only because of their wide availability but because they are drawn with the screen’s limitations in mind.” (Kadavy, 2016).

This is also the underlying reason for Google’s latest revision of their logo (from serif to sans serif) “Google’s old logo did not shrink well. A serif-y “Google” with all those nubbins is not going to be readable at small sizes…The spindly letterforms start to disappear, and when it’s really tiny, it’s essentially useless. The G almost turns into a C. The l looks like Coogie!” (Walker, 2015).

So, generally, sans serif seem to be the better style for the web, but there are many opinions out there – some even condemning the features of the most classic of all sans serifs, and Apple’s choice, Helvetica (Walker, 2014). The main thing that comes out of this discussion is that for fonts to be fully functional on the web they have to be designed for the web. And, that the medium the font is used in also plays a huge role in choosing the right font for the job!

References:

Lupton, E. (2010). Thinking With Type (2nd Edition ed.). New York, New York: Princeton Architectural Press.

Kadavy, D. (2016, April 28). Why You Don’t Use Garamond on The Web. Retrieved May 05, 2016, from http://designforhackers.com/blog/why-you-dont-use-garamond-on-the-web/ (Links to an external site.)

Walker, A. (2015, September 01). Google’s Logo Killed Serifs Because Serifs Had It Coming. Retrieved May 04, 2016, from http://gizmodo.com/serifs-had-it-coming-1728015048 (Links to an external site.)

Walker, A. (2014, March 06). Designers Explain Why Apple’s New OS X Typeface Is a Strange Choice. Retrieved May 05, 2016, from http://gizmodo.com/designers-explain-why-apples-new-os-x-typeface-is-a-str-1585123982 (Links to an external site.)

Image source: http://www.underconsideration.com/brandnew/archives/new_logo_for_google_done_in_house.php (Links to an external site.)

Prompt

For this discussion, you are given four scenarios of designer’s font choices below. Choose three of the four to comment on in your post. Each scenario has two designer’s choices listed for a project.

Based on your research and what you have learned about suitable fonts, including web vs. print use, evaluate how the different fonts would work. Compare and contrast Designer A and B’s choices, and tell us which designer you believe chose the strongest option and why?

Keep in mind that both options may be viable, but based on your research which one do you see as the strongest?

Scenario 1: A headline for an article on a news website

1. Designer A choice: Mrs Eaves All Caps
2. Designer B choice: Frutiger Bold Compressed

Scenario 2: The word “Courage” as a tattoo design

1. Designer A choice: Amador
2. Designer B choice: Monotype Corsiva

Scenario 3: An invitation to a baby shower

1. Designer A choice: Shelby
2. Designer B choice: Optima

Scenario 4: Body copy for a digital version of a romance novel

1. Designer A choice: Avenir Book
2. Designer B choice: Bookmania light

Here are examples of the fonts that are being used:

Choose three of the four scenarios listed above and cover the following in your main discussion post:

• Which scenarios are you evaluating? (Need to do at least three)
• Which designer’s font did you determine the best choice, Designer A or Designer B? Why?
• What did you find in your research that supports your decision? (Be sure to cite your sources)
• Include at least three (3) qualities of each font that made it suitable for the occasion, including the mode of delivery (web vs. print) and why.

Note: You may take a screenshot for each font example above and embed in your discussion post for an easy visual reference to point out the nuances of the font.

In your replies, be sure to state why you agree or disagree with your fellow classmates choice and reasoning. Here are some things to consider when responding. Did you choose the same designer? Were your reasons similar or did you find another quality in the font as to why you chose it?

For your citation, you might use articles that show examples of what fonts work best for web vs. print. You can also find articles from experts that talk about choosing appropriate fonts for the topic and media you are using.

Your initial and reply posts should work to develop a group understanding of this topic. Challenge each other. Build on each other. Always be respectful but discuss this and figure it out together.

Instructions (if needed) to upload and embed images to the discussion: (make sure you reference all images you use)

• How to embed an image in a discussion reply as a student: https://community.canvaslms.com/docs/DOC-1929 (Links to an external site.)
• How do I upload a file to my user or group files: https://community.canvaslms.com/docs/DOC-3145 (Links to an external site.)

Reply Requirements

Per the Due Dates and Participation Requirements for this course, you must submit 1 main post of 150+ words, 1 citation, and reference, as well as 2 follow-up posts of 50+ words. Responses can be addressed to both your initial thread and other threads but must be your own words (no copy and paste), each reply unique (no repeating something you already said), and substantial in nature. Remember that part of the discussion grade is submitting on time (20%) and using proper grammar, spelling, etc. (20% per post).

Remember that part of the discussion grade is submitting on time and using proper grammar, spelling, etc. You’re training to be a professional—write like it.

First reply:

For scenario 1: “An article for a news website”, I would say Designer B has the best choice. Doing research, I found that Ms. Eaves (designed and published in 1996 by Zuzana Licko) is extremely popular in the print world, but it never quite took off on the web (Typewolf, 2019). The font Frutiger Bold Compressed just looks cleaner, more versatile, and more readable to me than Eaves. Most news websites use bold fonts for headlines, and it is sans serif which is most prevalent for text on computer screens. Designer B gets my vote in this scenario.

As for scenario 2: “Courage as a tattoo design,” I think Designer A is correct. Looking at the history of the two fonts, Amador was designed by Jim Parkinson in 2004, and it was “designed in the spirit of the Arts and Crafts movement” according to myfonts.com. The serif font: Monotype Corsiva was created by typographer, Patricia Saunders in 1995. It’s mostly used for invitations, certificates, and other materials for important or special occasions. The font Amador looks bold and strong; perfect for dressing up the word “courage.” It reminds me of graffiti (which is a form of art) so I say that Amador is the winner in the scenario.

For my last scenario: “Invitation to a baby shower”, I chose to go with Designer A. The font Shelby looks playful, fun, happy, handwritten and welcoming; not as serious as Optima. Shelby was created by Laura Worthington in 2010. Optima was created by Hermann Zapf in 1952, and its used to make things appear modern, yet classic, and this font is used in the cosmetics market. Newborns aren’t classic, so I chose to go with Shelby.

References

Monotype. (2019). Amador. Retrieved from https://www.myfonts.com/fonts/parkinson/amador/.

Monotype. (2019). Monotype Corsiva® Font Family Typeface Story. Retrieved from https://www.fonts.com/font/monotype/monotype-corsiva/story.

TypeWolf. (2013). Mrs Eaves Font Combinations & Free Alternatives · Typewolf. Retrieved from https://www.typewolf.com/site-of-the-day/fonts/mrs-eaves.

Second reply:

Scenario 1: A headline for an article on a news website

I believe that Designer A’s choice of Mrs. Eaves All Caps would be a great choice for a headline for an article on a news website. This font is easily readable with a bold font that is attention grabbing. Frutiger Bold Compressed will be a harder font to read while on the screen due to its compressed lettering.

Scenario 3: An invitation to a baby shower

For an invitation to a baby shower I believe Designer A chose the better font. Shelby is fun and curvy which will look great on print. Since this is not a formal event, a sans serif would be great to use. Optima, also a sans serif, would look great as well but due to its very formal look it could lose appeal for the invitee’s.

Scenario 4: Body copy for a digital version of a romance novel

For the digital version of a romance novel, I believe that Designer B chose the better font. Using Bookmania Light will help the legibility and will create a nostalgia for printed books. Avenir Book is also a good choice, however, for longer on screen reading it may not be the best choice. Serif fonts give a more comfortable reading for long-form works (Chapman, n.d.).

Reference:

Chapman, C. (n.d.). Typeface Styles for Web and Print Design. Retrieved https://www.toptal.com/designers/graphic/typeface-print-web-design