Ask the Expert is a weekly series here on Design Informer. For this week’s theme, we will be talking about typography. Brian Hoff is this week’s expert.
Brian is a graphic designer from the always-sunny Philadelphia. He collaborates mostly on corporate identity and branding, but is also experienced in building all kinds of quality, strategic design, both in print and on the web.
In addition to his design services, he also writes for the popular graphic design and creative business blog, The Design Cubicle1. The blog not only teaches, inspires and helps other designers, but also focuses on client education and design awareness, while showcasing his work, creative processes, and personal practices.
- Out of This World Typography2
- Gorgeous Examples of Floral Typography3
- Beautiful Hand Drawn Typography4
Typography Talk Link
Jad: Hi Brian, it’s good to have you as a guest on the Design Informer. Thanks for agreeing to do the interview. Let’s get started. What is typography?
Typography is about knowing when and how to use type and its many faces and how to articulate it on a blank page to allow for a better visual communication in the form of letters, numbers and characters. It’s an understanding of, for example, when to use certain fonts, how big they should be, how words and blocks of text should be aligned, formed, spaced, ordered, etc.
Jad: How important is typography in graphic and web design?
Typography is extremely important no matter what the medium. In school typography was always one of the last elements of design that students, including myself, learned and understood, but once understood can really set you apart from others. Great design can be lost with bad typography.
Jad: I’m going to give you a few words. What are the fonts that come to your mind when you hear each word?
- Bold: Knockout Sumo6 – This font is a dense beauty.
- Classy: Goudy Old Style7 – I love the super classy ampersand!
- Rough: I had to think about this one for a few, but maybe Interstate with it’s sharp ends. (It might rough someone one up!)
- Playful: Bello8 – It’s a playful, chunky script with fun swashes and ligatures.
- Ugly: Type… ugly? I’ve never seen such a thing! :)
Jad: I saw your video on selecting the right typeface. How do you determine which typeface is right for your project?
I tend to look for similarities when choosing a typeface to match a mark or symbol of a logo. Elements such as the shape of letters, or the ends of how letters are capped-off, weight of the font in comparison to the mark. I do however always look for readability. A good logo should also be flexible and work at various sizes so I make sure that the type reads just as well at small sizes as it does at large.
Here are some great resources on font selection:
Jad: What resources can you recommend to those who are really looking to further their knowledge of typography? Books? Articles?
In addition to the articles above, The Elements of Typographic Style11 is pure genius and a must have for anyone interested in learning about typography, typefaces, type history, font pairing, and more valuable typography-related information.
Other resources include:
- Thinking with Type12 by Ellen Lupton (book)
- Getting It Right With Type13 by Victoria Squire (book)
- The Elements of Typographic Style Applied to the Web14 (website)
- Typedia15: A Shared Encyclopedia of Typefaces (website)
- WeLoveTypography16: great for looking at tons of great typography (website)
Jad: What are the main differences between typography in print and on the web?
I’m actually glad that you asked this question, as per a discussion I had with Jason Santa Maria: Many of the same factors, including em spaces17 are applied to both print and web, and with recent advances in web typography (Typekit) we will begin to see many more similarities and differences arise.
Jad: What is your favorite typeface?
Jad: What is your favorite quote about typography?
“Make it bigger.”
—Paula Scher discussing amateurs making their type too large.
Jad: You mentioned in one of your articles that it is very important for designers to purchase typefaces and build their collection. How many typefaces have you purchased? What do you plan on purchasing next?
Through client projects and personal purchases I’ve probably acquired around 30+ quality fonts (not entire families) in the past 6-7 years. I try to buy around 5 a year and with the holidays among us may be buying some new ones very soon. I have my eyes on you, Tungsten20!
Jad: Can you explain the difference between a typeface and a font?
In short, a typeface is the name, such as Helvetica or Georgia, and a font refers to the style, such as bold or roman.
Jad: Name three of the most common typography mistakes that you see people make on the web.
- Tight line-heights of body copy.
Solution: Try setting line-height to around 1.5em of the body copy font size.
- Not letter-spacing all caps or small caps.
Solution: Try adding 1px of letter-spacing which helps to improve readability.
- Bad layout and flow to text.
Solution: Plan your content in advance.
Jad: Please name some rules that you follow when setting type for the web.
Here’s a link to an article I wrote, Typography is the backbone of good web design, that covers many of the rules I follow in the creation of my information portfolio site, brianhoff.net.
Jad: I’m going out on a limb here. Can you name some ways that I can improve the typography here on Design Informer?
At first glance, readability looks good… breathing room looks good. The only thing I might consider is the width of your body copy blocks. Since you are using a smaller sans serif for the copy the lines tend to run a bit long horizontally, which could inhibit readably a bit. Try possibly increasing the copy size by a single point size (not too much) to have less characters on one line or making the width of your article area smaller — but this is just me being nit-picky!
Note: I will make the changes to the site in a few days. I didn’t want to make the changes yet so you can see what Brian was talking about.
Jad: Thank you very much for the tip! Please give us your final thoughts/advice for those who want to become experts at typography?
In my opinion, as the same as all aspects of design, you have to study and surround yourself with it as much as possible. This is not a field that when you leave school you stop learning. Embrace design.
I just want to thank Brian for doing this interview. I really appreciate the fact that he took time from his busy schedule to give detailed, well thought out answers to the interview questions.
The next topic will be another interesting and helpful one. We have a very talented web designer for the next interview. I don’t want to give out too much details yet, so please stay tuned. You can follow me on Twitter23 and subscribe to the RSS feed here24.
- 1 http://www.thedesigncubicle.com/
- 2 https://www.smashingmagazine.com/2009/12/typography-out-of-this-world/
- 3 https://www.smashingmagazine.com/2009/05/gorgeous-examples-of-floral-typography/
- 4 https://www.smashingmagazine.com/2009/08/beautiful-hand-drawn-typography/
- 5 http://www.behoff.com/
- 6 http://typography.com/fonts/font_overview.php?productLineID=100013
- 7 http://new.myfonts.com/fonts/bitstream/goudy-old-style/
- 8 http://new.myfonts.com/fonts/underware/bello/
- 9 http://www.alistapart.com/articles/on-web-typography
- 10 http://24ways.org/2009/type-inspired-interfaces
- 11 http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
- 12 http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480/ref=sr_1_1?ie=UTF8&s=books&qid=1260232721&sr=1-1
- 13 http://www.amazon.com/Getting-Right-Type-Donts-Typography/dp/1856694747/ref=sr_1_1?ie=UTF8&s=books&qid=1260232759&sr=1-1
- 14 http://webtypography.net/toc/
- 15 http://typedia.com/
- 16 http://welovetypography.com/
- 17 http://en.wikipedia.org/wiki/Em_%28typography%29#Incorrect_and_alternative_definitions
- 18 http://www.behoff.com
- 19 http://www.fontshop.com/fonts/downloads/fontfont/ff_absara/
- 20 http://typography.com/fonts/font_overview.php?productLineID=100035
- 21 http://www.brianhoff.net/
- 22 http://www.thedesigncubicle.com/
- 23 http://twitter.com/designinformer
- 24 http://feeds.feedburner.com/design-informer