Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Ask the Expert: Typography Talk with Brian Hoff

Advertisement

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.

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.

Brian Hoff Blog2

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 Sumo3 – This font is a dense beauty.
  • Classy: Goudy Old Style4 – I love the super classy ampersand!
  • Rough:  I had to think about this one for a few, but maybe Interstate5 with it’s sharp ends. (It might rough someone one up!)
  • Playful: Bello6 – 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:

Elements of Typographic Style

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 Style9 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:

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 spaces15 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.

I will be posting more about this on an upcoming post on my new personal blog, www.behoff.com16. (Insert shameless self promotion here.)

Jad: What is your favorite typeface?

Wow, difficult question! For the past few months I’ve been fixated on FF Absara17 (even has a complimentary sans version), but I’m sure that will change once I lay my eyes on a new beauty.

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?

Tungsten

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, Tungsten18!

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.

  1. Tight line-heights of body copy.
    Solution: Try setting line-height to around 1.5em of the body copy font size.
  2. Not letter-spacing all caps or small caps.
    Solution: Try adding 1px of letter-spacing which helps to improve readability.
  3. 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.net19.

Brian Hoff Website20

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.

The Design Cubicle21

Conclusion Link

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 Twitter22 and subscribe to the RSS feed here23.

Footnotes Link

  1. 1 http://www.thedesigncubicle.com/
  2. 2 http://www.behoff.com/
  3. 3 http://typography.com/fonts/font_overview.php?productLineID=100013
  4. 4 http://new.myfonts.com/fonts/bitstream/goudy-old-style/
  5. 5 http://new.myfonts.com/fonts/fontbureau/interstate/
  6. 6 http://new.myfonts.com/fonts/underware/bello/
  7. 7 http://www.alistapart.com/articles/on-web-typography
  8. 8 http://24ways.org/2009/type-inspired-interfaces
  9. 9 http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
  10. 10 http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480/ref=sr_1_1?ie=UTF8&s=books&qid=1260232721&sr=1-1
  11. 11 http://www.amazon.com/Getting-Right-Type-Donts-Typography/dp/1856694747/ref=sr_1_1?ie=UTF8&s=books&qid=1260232759&sr=1-1
  12. 12 http://webtypography.net/toc/
  13. 13 http://typedia.com/
  14. 14 http://welovetypography.com/
  15. 15 http://en.wikipedia.org/wiki/Em_%28typography%29#Incorrect_and_alternative_definitions
  16. 16 http://www.behoff.com
  17. 17 http://www.fontshop.com/fonts/downloads/fontfont/ff_absara/
  18. 18 http://typography.com/fonts/font_overview.php?productLineID=100035
  19. 19 http://www.brianhoff.net
  20. 20 http://www.brianhoff.net/
  21. 21 http://www.thedesigncubicle.com/
  22. 22 http://twitter.com/designinformer
  23. 23 http://feeds.feedburner.com/design-informer
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Former editor in chief of Designinformer.

Advertisement
  1. 1

    An excellent read! Mastering typography is indeed an art in itself. I’ve often found it one of the most challenging aspects of design- knowing when and how to use type. I just purchased Lupton’s book on type a few days ago! It’s an excellent introductory guide to typography.

    0
  2. 2

    @Josh – Definitely! I also constantly struggle with typography but I am trying my best to learn as much as I can about it. BTW, those resources that Brian mentioned are all great. I’m probably going to purchase all those books for Christmas. :)

    0
  3. 3

    @Petrus – You’re very welcome!

    0
  4. 4

    Nice article!! I have “Elements of Typographic Style” and its truly an awesome book. I think it’s a must read for every web/graphic designers.

    0
  5. 5

    Wonderful interview. Typography is something that I’m still struggling with and have been reading everything I can get my hands on lately on the subject. This interview was very helpful, thanks!!

    0
  6. 6

    You guys are all welcome! Thank you for reading the interview. Brian is really an expert at typography and I learned during this interview. :)

    0
  7. 7

    Excellent read, w/ important aspects to remember as typography can often be the neglected and forgotten orphan – especially on the web.

    0
  8. 8

    Great interview. I’ve found myself more passionate about typography more so in the last 2 years. I think Mr. Hoff is extremely insightful and resourceful. Thank you Design Informer for the interview, and Hoff for taking the time to share your info.

    Oh, my fave:

    Classy: Goudy Old Style – I love the super classy ampersand! <~~ I couldn't agree more! <3

    0
  9. 9

    Love typography; the suggestion for your blog is spot on; there are some rules of thumb for font size vs line length. Its nice that we’re reaching a point where we don’t have to split talking about print and on-line typography.

    Good work, look forward to your next article! – Bob

    0
  10. 10

    Great interview ! The advices of Brian Hoff are helpful.

    Looking forward to read the next interview ! Thanks !

    0
  11. 11

    @Lori – Yeah, the ampersand is beautiful.

    @Lam – You’re welcome!

    @Bob, @Francois – Definitely, you don’t want to miss the next interview. It’s going to be great. Actually, I already have the next 6 six interviews scheduled. :)

    0
  12. 12

    very interesting and many essential information … mehr davon :D

    0
  13. 13

    Great interview. Typography is not my strong point and I think this helps me a lot! keep up the good work!

    0
  14. 14

    @Matt – Thanks man. That was the idea behind “Ask the Expert.” I was tired of seeing the same old interview where everyone asks the same old questions. I thought that it was time to change it up a bit.

    0
  15. 15

    Typography is a wonderful world to get into. I love doing research and posts on the subject.

    0
  16. 16

    Thanks for clicking, clicking, clicking! :)

    0
  17. 17

    “…with it’s sharp ends…”
    Should be “its” sharp ends.

    No ugly font? Surely you’ve seen Hobo and Mistral.

    0

↑ Back to top