CLIENT: School Project

TIMELINE: November - December 2017

ROLE: UI, Graphic Design, Visual Design

TOOLS: Illustrator, Photoshop, InDesign, Sketch

Summary

Good typography supports visual hierarchy. Good typography affects consumer behavior positively and enhances engagement. Good typography compliments the app design and aids credibility. That’s why I wanted to take on the project that will allow me to look at various mediums where typography rules are violated in one way or the other. For this project, I fixed the type for the logo design, book layout, headings and cover, and for the mobile app. I heavily used InDesign and Illustrator, and Photoshop helped me make the surfer float through the book cover of the redesigned The Flow.

Logo Fix

Target: Summer Winds Nursery logo

Problem Definition

The logo for Summer Winds Nursery has four main problems. First, the typefaces don’t pair with each other. “Summer Winds” uses a very tall, dense and narrow typeface, while “Nursery” uses a much wider typeface. Secondly, tracking in “Summer Winds” is set too closely together; the words here are indecipherable, and from the distance the whole line looks like a solid block rather than text. Thirdly, the leading between “Summer Winds” and “Nursery” is too tight. Lastly, the flower image breaks into the text very intrusively. It is placed very close to the type and is too large.

Solution

To fix the problem of typeface compatibility, I used a script typeface Milkshake Regular 30/36 for “Summer Winds” because it compliments the nature of business better by mimicking the curves of the trees and flowers. The problem of kerning was fixed here as well. A sans-serif typeface Aktiv Grotesk Light 17/20 was selected for “Nursery”. It simply and elegantly compliments the script typeface and doesn’t compete for attention. The leading problem was fixed by setting more breathing space between the two lines. Finally, the flower image was replaced by the tree image that doesn’t break the type and forms a non-competitive union with the text.

Book Cover Fix

Target: Flow by Mihaly Csikszentmihalyi

Problem Definition

Aa much as I appreciate the ideas in the book, I found its cover design to be weak in terms of typography. There are three problems that I wanted to fix here. First of all, neither the “National Bestseller” nor the publishing companies names are centered which looks a bit off. Secondly, replacing the letter “o” with a white circle doesn’t work well. It is not a good design practice in general, and it also doesn’t reflect neither the message of the book nor the name of the book. Moreover, enclosing the author’s name (especially such a complicated one) inside the circle distracts the viewer. Thirdly, “the psychology of optimal experience” is a subheading of the book and it carries important information. However, it is completely lost here because it has the same hierarchy as the New York Times quote.

Solution

To make the name reflect the message of the book, a ligature typeface Shaded Larch 400/300, ltsp 0 was used. The typeface conveys a flowing mood, where one letter flows into the next. “National bestseller” was ommited and replaced with the author’s name, centered, at the top of the cover. I didn’t want to emphasize on the author’s name (he is not known for any previous books, and his name might be too distracting for the reader), so Avenir Roman 30/36, ltsp 20 was used.

The book subheading is set to Baskerville Semibold 30/33, ltsp 10. It is now located in close proximity to the book name because it explains what we mean by “flow”. The NY Times quote carries additional information but at the same time is important so I decreased the font size and placed it in the spotlight as if the surfer flowing through the page reveals it. The quote is set in Avenir Roman 20/24, ltsp 20, and the NY Times Book Review subheader is set in Times New Roman Bold Italic 20/24, ltsp 20. The design of the publishing companies was preserved but the typeface was changed to Avenir Book and Avenir Heavy 20/23, ltsp 250.

Book Layout Fix

Target: Audition by Michael Shurtleff

Problem Definition

The layout of the book Audition by Michael Shurtleff has multiple problems. To start with, the body text uses bold style and tight tracking making the text hard to read. Folio is very small. Line length is more than 27 picas, which also makes the text harder to read. Page number, book name and chapter name are too bold, and the tracking is tight. This makes them stand out as a block of text that is rather unpleasant to look at, especially taking into account that the upper left corner is the first thing we see when landing on the page. Left, right and bottom margins are too small. Then there are orphans. Last but not least, the text is justified and has been not manually adjusted; it contains rivers.

Solution

To fix readibility problems, top margin was set to 6 pi, outer margin to 6 pi, folio to 8 pi, and the inner margin to 4 pi. Line length is now shorted as well - 20 pi. The bottom of the page contains the page number, the book title, and the author’s name. They are set in Adobe Book, 7/8, All Caps, ltsp 100. The body text is set with Minion Pro Regular, 12/16, and it doesn’t look too dense anymore. The chapter heading was placed on the left and right pages. The book has a soft cover and is easily foldable, therefore, it is important to remember which chapter you are on once you fold it. Done with Minion Pro Semibold, 8/10, All Caps, ltsp 50.

Book Headings Fix

Target: Elizabeth | CEO by Alan Axelrod

Problem Definition

Next I moved on to fixing problems with the headings, for which I used the book Elizabeth | CEO by Alan Axelrod. Chapter heading here is too bold and big. It captures almost all attention without carrying any vital information. Without the word “chapter”, it is also somewhat confusing. Leading for the header is smaller than leading for the body text. All Caps for the subheading doesn’t work well either. In addition, we need to find another typeface that will have a more personal feeling to reflect the style of the book. There is too much space between the end of the first paragraph and the beginning of chapter subheading. The subheading of the chapter is similar weight and size as the heading and, therefore, is lost on the page. It is also not centered and is “hanging” on the page.

Solution

The chapter number after the fix contains the word “chapter”, and is not that distractive. It is set with Adobe Caslon Pro Regular at 12/16, All Caps, ltsp 30. Chapter heading is set with Adobe Caslon Pro Bold at 16/16, All Caps, ltsp 40. Chapter subheading 1 now reflects the tone and historical reference of the book. It is set with the script typeface Lakaside Regular 23/26, ltsp 20. Body text is set with Adobe Caslon Pro Regular at 10/16, ltsp 30. Space between the end of the first paragraph and the beginning of the chapter subheading decreased to 2 pi. Chapter subheading 2 is set with Adobe Calson Pro Semibold at 10/16, ltsp 20. Chapter subheading 3 is set with Adfobe Caslon Pro Semibold Italic at 11/16, ltsp 20. To increase consistency in the type, the same typeface is used for headings and subheadings through the page. Finally, chapter subheadings are now left aligned.

Mobile Typography Fix

Target: IKEA PLACE App

Problem Definition | Category Screen

There are several legibility issues on this screen. Tracking in the header is too tight (-1.3 pt), and the header size is currently set to 20 pt which results in the last letter getting cut off. Section subheaders font size is 15 pt which is a bit too large and they use - 0.9 tracking which is too tight. Section subheaders are in black and look very bold competing with the screen header. Spacing between the subheader and the images is 10 pt making the design too cluttered. There is a lack of proper hierarchy in the item’s description. The text for color is at the very top, while the item furniture line is bold - both of these are not the most important information. What users care about most is the price, and it’s not emphasized in any way. Also, the body text is too small, 10 pt, which impairs legibility.

Solution

Tracking in the screen header is increased from  -1.3 pt to - 0.6 pt to give letters some breathing space. Font size in the screen header decreased from 20 pt to 18 pt. Now the whole header can fit in. Section subheaders font size decreased from 15 pt and - 0.9 pt tracking to 14 pt and -0.5 pt tracking to aid legibility. The color changed from black to darker grey to avoid competition with the screen header and aid hierarchy. Spacing between the subheader and the images increased from 10 pt to 20 pt to give text some breathing space. Font size for the item’s color increased from 10 pt to 12 pt. The color has been moved to the bottom of the hierarchy because it doesn’t carry additional information since we see the item’s color on the picture. Font size for the item’s furniture line increased from 10 pt to 12 pt and also moved lower in the hierarchy yielding to the price since people care about the price more that about the items furniture line. Price font size is now bigger, at 13 pt. Leading between these elements increased to 17 pt to aid legibility.

Problem Definition | Item Description Screen

The header uses 4 levels of hierarchy and doesn’t look very clean. The color of the color field is greyed out which is low in contrast and makes it look too different from the rest of the text. The color and the item category use 11 pt font size which is hard to read. The item’s furniture line is bolded and placed above the price despite the fact that it is not the most important field for the user here - the price is. Spacing between the header and body text is 65 pt which breaks the screen apart. The body text is set with 12 pt which is too small and hard to read. The current leading is set to 14 pt which makes the text looks too tight. There is not enough spacing between the subheaders and the body text. The CTA button text size is too small, 14 pt, and the text is not centered, which prevents legibility.

Solution

To avoid 4 different levels of hierarchy stand out so much in the header, I made all of the elements black, and used only two font sizes instead of three. Now the item category and the furniture line are 14 pt, and the color is 12 pt. The price moved at the top of the furniture line and is the only element in bold weight because it’s more important for the user that anything else here. The body text and the subheader increased to 14 pt to aid legibility. The leading increased to 17 pt. Spacing between the separate modules are 33 pt and 20 pt if within the same module adding consistency. The CTA button text size increased to 16 pt and the text is now centered.

Final Notes

Solving typography problems is a job of high precision and detail orientation. Whether it comes to fixing type in logos, or printed book, or mobile apps, the following things are important: not overcrowding letters and lines by using proper tracking and leading, avoiding orphans and widows, matching fonts, using proper hierarchy, increasing legibility by using font size that is appropriate, and many more. The most challenging part of this project was perhaps working on the book cover because people tend to judge things by the cover, and failing to create a compelling typography system here can result in the book never discovered and read.