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.”
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.
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.”
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.
*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.
Type 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
» On Web Typography and Font Pairing
» The Elements of Typographic Style Applied to the Web
» Introduction to Typekit
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.
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:)
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.
Great article. Some awesome tips!
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.
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!
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
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.
I have never been a fan of all caps, but I don’t dispute the role that typography plays in design.
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.
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.
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.
great article Brian, liked it !
Almost brings to mind how this can be applied to blagazines
Thanks for the tips! Really helping us out as we design our new website! Thanks, Brian!
Excellent article! I found it via Smashing magazine news. Thanks for explaining it in such detail and even providing example code.
so glad that there are people like you, pushing good typography practices on the internet and also showing how. awesome article.
very good suggestion to create a website that is very interesting and I loved it .. thanks..
perfection. This is a great typography resource .. nice work man!
Great recommendations for clean typography. If used properly, I think text can be more powerful than any image.
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
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!
People who like typography are spiritual. Your work is awesome. I use some of your ideas on my blog. Thanks
Thanks for a non-BS/’trend-watching’/hype-obsessed article. Just some great simple type rules.
Great article! But I thought that using ems is not necessary anymore as browsers are now able to re-size pixels as well?
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.
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).
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.
great articel, thanks
What font are you using at http://www.thedesigncubicle.com/wp-content/uploads/2009/11/caps.png ??
Learned a lot. Thanks
Hey Brian,
Great advice and information here. Typography is the backbone and I’ll get better at it by studying this more.
Tks,
Jeff
That particular screenshot was using Georgia small caps and Georgia italics. It’s currently using Typekit’s Meta Serif.
Very useful article Brian. Thanks for sharing.
thanks for your tips….very useful
I just found your blog, Brian - consider me subscribed
Great insight.
Great article, type is the most important element in a web Indeed!.
Thanks!
Very nice article!
I’m glad to see I’m not the only one who pays attention to line-height and whitespace.
Thanks for this information. There is no end of learning…once again I get this truth again. I have get some good idea.
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.
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!