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. [...] Read more at :  The DesignCubicle.com [...]

  2. [...] Typography is the Backbone of Good Web Design by Brian Hoff “On Web Typography” by Jason Santa Maria 20 Do’s and Dont’s of Effective Web Typography Typography on the Web: Questions for Jeffrey Zeldman “The Elements of Typographic Style” at Amazon.com 2. Minimalism [...]

  3. Raden Beletz says:

    Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which we all need, thanks for all the enthusiasm to offer such helpful information here.

  4. Brian, great article….you have one of the most unique portfolios I’ve ever seen, it’s really quite impressive! I really liked the insight to the layout for brianhoff as well, and will probably implement a similar, clean strategy. Thanks for all the helpful information!

  5. A nice intro. 1px letter spacing is usually good, but larger type may need more. And some people have argued for much longer lengths (100+ char per line), though I agree with you.

  6. This information is very useful to those of us who are struggling with web design. Thank you for this useful article. I plan to use some of the great tips!

  7. Thank you for sharing your knowledge Brian. I like your article, it is very helpful. And you really did help a lot of people like me regarding web designing. Thanks Again!

    Best Regards!

  8. thesis says:

    This is so true typography is really important, since I am all busy looking for proper baby shower cards, I realize that it’s not about the colors but the texture and the fonts on the cards:)

  9. Especially with the @font-face support of the most current browsers, we can make the next step.

  10. very good informations which made me working on my CSS… Thanks !

  11. Brian, great article….Typography really plays a crucial role in web designing. With out taking that part into consideration web page will all be messy.
    Thanks & Regards,
    Kugdou

  12. Taimar says:

    Brian, you can and should use unitless line-heights, so line-height: 1.5 instead of line-height: 1.5em. CSS line-height simply does not need a unit.

    Further reading:
    http://www.456bereastreet.com/archive/200603/css_lineheight_does_not_need_a_unit/
    http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

  13. [...] hate to see typography become just another “trend”, when in my opinion, it is the backbone of good design. It shouldn’t be viewed on the same lines as rounded corner boxes or text-shadows that look [...]

  14. Berita says:

    I try to reflect this in my online work…thanks for share

  15. I am quite impress about this information. And I agree with that people visit the site to fine something and get the information. So thanks for sharing this useful and informative information.

  16. Mark says:

    Where are you supposed to implement the code into the CSS on the stylesheet?

  17. Gerald says:

    Right on. Any recommendations for matching colors? I feel like that’s a very important aspect when it comes to the overall style.

  18. I’ve collected some Delicious tags on color:

    http://delicious.com/chrisburd/color

    Here are my two favourite color-related sites:

    http://colorschemedesigner.com/

    http://patorjk.com/color-palette-generator/

  19. i am self-studying web design coz building websites is my passion-,*

  20. web design is also a good hobby and a great job too. web design jobs pays very well;*`

  21. Kara says:

    First thing I consider on my web site is the color. Once I got the right color that will perfectly fit in on my site, it would be easy to check which font will wirk the best.

  22. Kaskuz News says:

    I think all of the criteria above such as line height and the other play a great role in a website design, But in my opinion i prefer a simple website with fast loading. It’s better than a great design website with a lot of javascript but the loading was so slow..

  23. Wonderful points Brian. This is something that does not naturally comes to many designers. Well explained, thanks.

  24. I justin think all of the criteria above such as line height and the other play a great role in a website design. i like it…..

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