Typography is the backbone of good web design

Ever since launching my Information Portfolio, BrianHoff.net, I’ve received many emails with similar variations to the question “How do I become better with typography on the web?” or “Why does your type look nice on your site?”

Below are a few techniques I generally go with when styling my type and aspects I considered and incorporated while designing BrianHoff.net.

Line height

First off if you are not specifying your type size in ems you should be. “The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers.”

line-height css

Another reason I set my type in ems is because it’s easy to find a good line height, which I usually set as 1.5em. No matter what size type you use, generally a good, readable line height is 1.5em of the font size for body copy.

Your CSS should look something like this:

.bodytext p {
font-size:1em; /* 1em=16px */
line-height: 1.5em; /*1.5em of a 1em (or 16px font) = 24px
}

All caps and small caps

Whether you are dealing with print or web, a string of capital or small capped letters should have some additional letterspacing.

caps

I’ve always used a 1px letterspacing for most all caps and small cap type — it’s a nice balance on the web.

Your CSS should look something like this:

.bodytext p {
font-size:1em; /* 1em=16px */
letter-spacing: 1px;
}

Comfortable reading measures

Having a comfortable reading measure (or width) not only allows your web page to have better structure, but allows text to be easily read.

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”

line_height

Your CSS should look something like this:

DIV#col1 {width:400px; }

DIV#col2 {width:50%; }

DIV#col3 {width:33em; }

[code example courtesy of: http://j.mp/DLgE]

Hierarchy and contrast

Establishing a distinguishable and relevant hierarchy allows readers to easily scan your website and allows them to pull out which information is most important or secondary. A good hierarchy allows information to be digested in chunks, thus allowing your reader to retain more information and stay longer on your site.

Although my about page has a lot information on it, one can still easily scan the various sections and pull out only or all the information they want.

Also, contrast is very important as well, especially when pair typefaces:

"When pairing typefaces, it’s important to be able to tell that there are two distinct typefaces in play, but contrast has other uses as well. Very different typefaces can play off of each other in complementary ways or resist each other to create a bit of tension, while typefaces that appear too similar can weaken the message and confuse a design’s visual language."

Layout

When designing brianhoff.net I established my layout around the 960 grid system, which helped to keep things aligned and orderly, which works out well for content heavy sites.

Having good layout helps to improve readability and scalability for your readers.

web layout grid

*Website has since been lightly revised from the above design.

Readability

For something that you "read" having good readability is key. For example, Times is easily readable set in 14px font, it is very hard to read at 8px on the web. Instead, try a typeface with a larger x-height, like Georgia or Verdana.

Remember, typefaces are not just about looking good. They are many beautiful typefaces out there, but so often they are misused. Typefaces were created to serve purpose and were originally designed to work in a specific setting, medium or time period.

Embrace differences

A common question I get asked about my site is "how did you achieve those fancy ampersands (& symbol)?"Below you will find the CSS:

span.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
font-style: italic;
}

Once they receive the above response, the next question is "well, not all computers have that font." With that being true because we all use different computers, with older and new operating systems, and different web browsers, a website will never look exactly the same, but that doesn't mean it's a bad thing; embrace the differences.

Just because PC users that use IE (possibly) are not seeing the same ampersands as someone on a new Mac running Firefox, that doesn't mean they are seeing something that doesn't look good or doesn't work. For the people that don't see what you intended, 90 percent of the times don't even know what they are missing.

Typography is the backbone of good web design

As web designers surrounded by trends and other design/graphic elements, we often forget the main reason people visit websites — to read and find information (quickly and easily).

Take away all the extra design elements and all we are left with is the type. Unlike glassy reflections, wood grain textures, and shiny buttons, communication with type is timeless.

So why not pay more attention to the backbone of a good web site design? The next time you start designing your website start first and focus on the type — the strength of a design lies within the type.

Further reading on web typography

SPONSORED LINK:

Learn typography tutorials with psd-tutorial.com



Discussion and Comments

+ Add to the discussion
  1. Doug C. says:

    This is the main reason I was excited about TypeKit. With the possibility of using commercial typefaces that I love on my own site I was like a kid in a candy store. I haven’t implemented it yet, but I’m working on it.

  2. Samoo says:

    Is Typography the backbone of good web design? Yes, it truly is! And by the way I love so much Baskerville’s ampersand that I’ve build my website’s logo on it:)

  3. What about websites that use images instead of type? Isn’t it possible to create a strong message with little but photos? :)

    Great advice Brian, your portfolio is definitely one of a kind.

  4. Vin Thomas says:

    Great article. Some awesome tips!

  5. I loved this post, typography is turning into one of my favorite things about design and I try to reflect this in my online work.

  6. Abadeu says:

    Great post, it was able to give a good refresher on approaching type on the web. The good thing is that more font’s are becoming standard to further shift styles over from print to web!!

    Keep it Up!

  7. Oli Gardner says:

    Inspiring post Brian. I have a rule that I try to garner one solid memorable takeaway from every post I read (unless it’s lousy) – the standout for me here is simple but effective:

    The letter-spacing for all caps. Brilliant.

    The example image presented for this is beautifully constructed, my only wish is that you’d included an HTML representation of it with complete CSS to show a web-type version.

    Delicious’d, Tweeted and remembered.

    Thanks

  8. Its very true. Typography really plays a crucial role in web designing. With out taking that part into consideration web page will all be messy.

  9. Logo Design says:

    I have never been a fan of all caps, but I don’t dispute the role that typography plays in design.

  10. if you set your base font-size to 0.625em it will allow you to use a 1:1 with pixel font sizes i.e. 1.2em = 12px font . this will greatly improve upon accuracy when transferring the design into HTML views.

  11. Jake says:

    Good post man. I think your point is also supported by the number of web font solutions coming out (Typekit, Typotheque, etc.) It is becoming more and more important to get good type on the web.

  12. This is some great advice! Thank you. The developers I work with are hard struck against using @font-face at this point. So these tips remind of the techniques that can be achieved with the fonts I can use today.

  13. v-render says:

    great article Brian, liked it !

  14. Almost brings to mind how this can be applied to blagazines

  15. Thanks for the tips! Really helping us out as we design our new website! Thanks, Brian!

  16. Linda says:

    Excellent article! I found it via Smashing magazine news. Thanks for explaining it in such detail and even providing example code.

  17. hoshimo says:

    so glad that there are people like you, pushing good typography practices on the internet and also showing how. awesome article.

  18. very good suggestion to create a website that is very interesting and I loved it .. thanks..

  19. chris says:

    perfection. This is a great typography resource .. nice work man!

  20. Ame says:

    Great recommendations for clean typography. If used properly, I think text can be more powerful than any image.

  21. [...] Typografie, Webdesign Typografie ist das halbe Webdesign Typography is the backbone of good web designBrian Hoff [...]

  22. Totally agree with this post and it is nice to see typography coming into fashion giving way to more clean usable web sites. On the net a thousand words speaks a thousands words, not a picture ;)

  23. designium says:

    Really enjoyed read this article, most of the things you wrote i agree entirely. And you got a few more ideas in what typo should be used that i really appreciate you´ve shared that… thanks!

  24. Alex Neagu says:

    People who like typography are spiritual. Your work is awesome. I use some of your ideas on my blog. Thanks

  25. Ian says:

    Thanks for a non-BS/’trend-watching’/hype-obsessed article. Just some great simple type rules.

  26. Great article! But I thought that using ems is not necessary anymore as browsers are now able to re-size pixels as well?

  27. NVM, I just checked out the CSS code on your site and you still use pixels as the font-size, but for line height, you use 1.5em. Very nice typography on your website.

  28. Danielle says:

    Wonderful article. Another aid to great type design for the web is the advent of the @font-face feature from Mozilla. It allows you to display things the way you truly intended (most of the time). :-)

  29. [...] Jabbar: Typography is the Backbone of Good Web Design. Typography adds an extra touch of feeling to ones content. With the information from Brian’s [...]

  30. Michelle says:

    really cool blog post Brian, thanks for sharing :)

    Now about using photos instead of text on websites…yea this may look nice but doesn’t always do your SEO efforts any help.

  31. [...] Type is the backbone of good web design [...]

  32. [...] Type is the backbone of good web design (tags: typography design webdesign) [...]

  33. [...] Type is the backbone of good web design (tags: webdesign webdev tutorial css typography) [...]

  34. wien says:

    great articel, thanks

  35. [...] Type is the backbone of the good web design — Check out this post and you will learn the great concept how to layout the types in a website. It will literary change the feel and look of a website! [...]

  36. Ed says:

    Learned a lot. Thanks

  37. Hey Brian,
    Great advice and information here. Typography is the backbone and I’ll get better at it by studying this more.

    Tks,
    Jeff

  38. Brian says:

    That particular screenshot was using Georgia small caps and Georgia italics. It’s currently using Typekit’s Meta Serif.

  39. Alex Flueras says:

    Very useful article Brian. Thanks for sharing.

  40. Selvam says:

    thanks for your tips….very useful

  41. [...] Typography is the backbone of good web design Take away all the extra design elements and all we are left with is the type. Unlike glassy reflections, wood grain textures, and shiny buttons, communication with type is timeless. [...]

  42. Olaf says:

    I just found your blog, Brian – consider me subscribed

  43. Great article, type is the most important element in a web Indeed!.

    Thanks!

  44. [...] Typography is the backbone of good web design [...]

  45. Very nice article!

    I’m glad to see I’m not the only one who pays attention to line-height and whitespace.

  46. [...] article that I discovered off of Twitter from [...]

  47. Thanks for this information. There is no end of learning…once again I get this truth again. I have get some good idea.

Brian Hoff
About Brian Hoff: Designer, Writer and Speaker

I’m a graphic designer living in Brooklyn, New York who loves creating compelling and useful websites and memorable interactions across the web. When I’m not designing I can be found writing, speaking and occasionally part-time teaching at colleges — all on the subject of design. I started this blog to share my passion and experiences with designers and clients. I'm most active on Twitter; say hello:


POWERED by FUSION