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 branding1, 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 Cubicle2. 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

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 Blog3

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

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.

I will be posting more about this on an upcoming post on my new personal blog, www.behoff.com18. (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 Absara19 (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, 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.

  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 design21, that covers many of the rules I follow in the creation of my information portfolio site, brianhoff.net22.

Brian Hoff Website23

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 Cubicle24

Conclusion

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 Twitter25 and subscribe to the RSS feed here26.

Footnotes

  1. 1 http://bhoff.squarespace.com/samples/branding-identity/
  2. 2 http://www.thedesigncubicle.com/
  3. 3 http://www.behoff.com/
  4. 4 http://typography.com/fonts/font_overview.php?productLineID=100013
  5. 5 http://new.myfonts.com/fonts/bitstream/goudy-old-style/
  6. 6 http://new.myfonts.com/fonts/fontbureau/interstate/
  7. 7 http://new.myfonts.com/fonts/underware/bello/
  8. 8 http://www.behoff.com/2009/11/choosing-a-typeface-timelapse-video/
  9. 9 http://www.alistapart.com/articles/on-web-typography
  10. 10 http://24ways.org/2009/type-inspired-interfaces
  11. 11 http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
  12. 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. 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. 14 http://webtypography.net/toc/
  15. 15 http://typedia.com/
  16. 16 http://welovetypography.com/
  17. 17 http://en.wikipedia.org/wiki/Em_%28typography%29#Incorrect_and_alternative_definitions
  18. 18 http://www.behoff.com
  19. 19 http://www.fontshop.com/fonts/downloads/fontfont/ff_absara/
  20. 20 http://typography.com/fonts/font_overview.php?productLineID=100035
  21. 21 http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/
  22. 22 http://www.brianhoff.net
  23. 23 http://www.brianhoff.net/
  24. 24 http://www.thedesigncubicle.com/
  25. 25 http://twitter.com/designinformer
  26. 26 http://feeds.feedburner.com/design-informer

↑ Back to topShare on Twitter

Former editor in chief of Designinformer.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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.

  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. :)

  3. 3

    A very interesting interview. Thanks to you Jad for this nice article and to Brian for his advices.

  4. 4

    @Petrus – You’re very welcome!

  5. 5

    Very interesting article. Typography can be one of the most difficult things when designing or coding a website.
    .-= Marcell Purham´s latest Blog Entry – PSD to WordPress Series Part 3: Final Tutorial =-.

  6. 6

    Absolutely great read. Thanks Jad & Brian!

    Keep these awesome interviews coming!
    .-= Catalin Zorzini´s latest Blog Entry – Showcase of Creative Blogs with Totally Original Design =-.

  7. 7

    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.

  8. 8

    Nice interview, Jad! Very interesting tips, and I can definitely see what Brian is talking about with the typography on your site.

    Keep it up!
    .-= James Costa´s latest Blog Entry – “Sunday Special” Round-Up I =-.

  9. 9

    Thanks Jad for the interview and I appreciate everyone’s comments so far — Thanks for all of your kind words.
    .-= Brian Hoff´s latest Blog Entry – Designing with content in mind =-.

  10. 10

    Another great interview on an interesting topic. Can’t wait to see what is in store for next week.
    .-= Bluefaqs´s latest Blog Entry – 5 Easy Tips To Increase User Experience =-.

  11. 11

    I love this article! I love all the questions, really led into some interesting answers by Brian and introduced me to some cool fonts, nice going Jad :)
    .-= loswl´s latest Blog Entry – Mark Lawrence Interview =-.

  12. 12

    Nice article… a lot of information on typography … thanks
    .-= Richie´s latest Blog Entry – 25 beautiful examples of Night Photography =-.

  13. 13

    Useful interview, Brian shared a lot of great resources to learn typography. Jad thanks for proceeding posts on typography and “Ask the Expert” series.
    .-= Tomas´s latest Blog Entry – Invoicera Partners with WebDesignFan for an Exciting Giveaway! =-.

  14. 14

    Great Talk Jad,
    I especially like the word part (bold, classy,…). Really nice.
    And Brian, you are terrific!

    Thanks
    :)
    .-= Nikhil´s latest Blog Entry – Letterpress Effects in Web Design- Trends and Tutorials =-.

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

    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

  19. 19

    That’s useful article I’ve ever read. Honestly, typography is not strange to me, but I have never focus on it in my designs.

    Excellent interview, Jad!
    .-= Lam Nguyen´s latest Blog Entry – MarketCircle Giveaway Contest – Free Licenses For Professional Time Billing App =-.

  20. 20

    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

  21. 21

    Great interview ! The advices of Brian Hoff are helpful.

    Looking forward to read the next interview ! Thanks !

  22. 22

    @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. :)

  23. 23

    Useful information, another great article, I’ll take your advice on that. Thanks.
    .-= Christina´s latest Blog Entry – A Graphics Artist Way to Save on Gifts this Holiday Season =-.

  24. 24

    Jad – Here’s a more comprehensive page on FF Absara that shows the OpenType version and Absara Sans too.
    .-= Stephen Coles´s latest Blog Entry – How We Built Britain… With Arial!? =-.

  25. 25

    very interesting and many essential information … mehr davon :D

  26. 26

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

  27. 27

    Awesome interview! I learned a few things, for sure!

    Really cool idea for doing interviews, Jad. I think this series makes is probably more valuable than just regular interviews, since they each focus on one specific topic. Awesome work! Plus, I always love hear what Brian has to say. Always super interesting.
    .-= Matt Ward´s latest Blog Entry – Echoes – Week 16 (Dec 7, 2009) =-.

  28. 28

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

  29. 29

    typography gurus are always very interesting to me. i am just now discovering this new world and i love it! thanks

  30. 31

    A very informative interview. I clicked all the links =)

  31. 33

    Impressed! Jad you are doing great by posting such valuable posts. Lots of stuff to learn.

    Keep posting.
    .-= Amrinder´s latest Blog Entry – Relpost Launched =-.

  32. 34

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

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

↑ Back to top