10 Typography Tips to Bring your Skills to the Next Level

An often overlooked aspect of web design, by those just starting out, is typography. In fact, web designers that have been around for a couple years even have a tendency to overlook and undervalue the power of typography. Don’t be mistaken though, it’s one of the most powerful tools web designers have.

In this article, we’ll review ten web typography tips that will bring your typographic design skills to the next level.

1. Leading

Leading is the space between lines of text and probably one of the more commonly known elements of typography. Leading will greatly effect the readability of your text content. Leading will need to be changed based on the type face, size, weight and measure (covered next) used.

I generally stick with about 2-5pt’s larger leading than font size depending on the type face, size, etc. and how it feels reading it.

Typography Leading

2. Measure

Measure seems to be overlooked quite often in many of the templates I review. Sometimes I forget about it too though which is why articles like these are always a nice refresher. :-)

Measure is the width of your text. If it’s too wide then it makes it harder for readers to visually travel from one line to the next. If it’s too narrow then it will be too much eye movement from one line to the next.

This will be a little harder to show you at a normal font size so I’ve reduced the font sizes for the example below. I see this issue most commonly with templates that have really wide content columns.

Typography Measure

I’ve heard different ways of approximating the appropriate width for text measure such as multiply the font size by 30 to get pixel width (10px font size X 30 = 300px measure width) or using approximately 80 characters as a max width. I like to read a test paragraph and adjust as necessary until it feels right.

3. Text Alignment

On the web it’s not a good idea to use justified text alignment. It will space out the words awkwardly and make it more difficult to read. Yes, the left and the right sides will be flush but readability is more important.

In the example below you can see it doesn’t look terrible but you’ll notice the first line is much more crammed together than line two and three. The test text and Photoshop didn’t provide an ideal example but when you’re dealing with more real world text in a browser, things can get pretty ugly with justified text alignment.

Typogrpahy Alignment

4. Create a Strong Hierarchy

Creating a strong visual hierarchy is very important for readers to be able to quickly navigate from most important content to least important and gives them a sort of scaffolding to quickly find specific content they’re looking for. It gives a design structure and a logical flow of presented information making it feel more inviting for visitors.

Visual hierarchy using typography largely depends on size, color and spacing. The example below (Pacifica Theme Forest template) uses large, bold headings for primary content (left column) and smaller headings for secondary content (right column). Less important text content uses a lighter color and/or lighter weight.

For more information on visual hierarchy, read “Visual Hierarchy in Web Design“.

Typography Hierarchy

5. Serif and Sans Serif

If you’re less experienced with typography in design, it’s a much safer bet to use serif fonts for headings and sans serif fonts for body text. If you’re not sure what a serif is, see “Serif” via Wikipedia.

Serif fonts at smaller sizes don’t display well and can make body text uncomfortable to read. Using sans serif fonts for headings is fine too, it will just be a little less attention grabbing and will depend on your design. The example below (minimo Theme Forest template) is a great example of custom serif font headings and sans serif font body text.

Serif and Sans Serif Typography

This example (Atlantica Theme Forest template) uses serif fonts for both headings and body text. The body text size is probably a little too small for being a serif font but it still looks nice and can obviously be increased by buyers. This is a great example of using all serif fonts in a template.

Serif Typography

6. Plan For Font Size Increase

Those of us with great vision often forget about those with not-so-great vision. As a result, we forget to ensure our templates will scale properly with font size increases. If you style your typography correctly and create a solid layout, this won’t be an issue.

Example: A List Apart – Default font size.

A List Apart - Default Font Size

Increased font size two levels in Safari.

A List Apart - Increased Font Size

As you can see, it scales nicely without breaking anything and without headings with overlapping line-heights, etc.

7. Start Using Styled Quotation and Apostrophe Marks

Instead of using straight, boring quotation and apostrophe marks like this.

“It’s boring”

Use the prettier, styled quotation marks like this.

“It’s sexy!”

  • Left quotation is “
  • Right quotation is ”
  • Apostrophe is ’

I have to break myself of this habit as well. ;-)

8. Use a Baseline Grid

Grids aren’t just for structural layouts you know. Establishing consistent typographic vertical spacing helps keep the page balanced and proportional throughout your template. (Image via A List Apart)

Typographic Baseline Grid

For more information on this, read “Setting Type on the Web to a Baseline Grid“.

9. Limit Your Font Faces

Don’t use more than three font faces in your design and preferably stick with two. With two font faces you can create plenty of variations to fill your needs. If three are needed, use the third sparingly so you don’t add confusion to your design.

It’s also a good idea to limit font sizes and colors to minimize reader confusion and keep consistency.

Too Many Fonts

Now that I’ve said that, once you’re experienced enough, you can break this rule. It takes skill and practice to do it right though so if you’re not already a font expert, I’d stick with this rule for your production work.

10. Use “Whitespace” Appropriately

“Whitespace” (aka negative space) is the space between elements like bodies of text, columns, etc. This can be broken down to the smaller elements as well.

I’ve placed red in just some of the areas utilizing whitespace in Theme Forest’s blog design. You’ll notice the whitespace is balanced nicely throughout the page.

Whitespace Example

Giving your website elements enough whitespace is important and very helpful in creating a well balanced design. Be careful that you don’t over do it though because too much whitespace use the wrong way can be just as bad as too little.

For more information on whitespace, read “Whitespace” via A List Apart.

Conclusion

There’s a lot that goes into typography and it can make or break a design. If you’re not that familiar with typography or other ways it is used in web design, it would be very beneficial to take some time to dig deeper and learn more of the ins and outs.

Typography is an art and skill that takes time to master, but as I said at the beginning, it’s one of the most powerful (if no the most) tools designers have.


38

Comments
  • Great tips! I only recently started incorporating a lot of these tips into my work…it makes websites look so much nicer.

  • Kevinsturf says:

    great article Jarel, Great pointers too.

  • Dimitar Haralanov says:

    Thumbs up for the article! Great points to remember.

  • Brandon says:

    Yep – good article – lots of useful hints here :)

  • Good story. You can always tell a beginner by the fact the design might generally look good, but the general typography just looks awful. They may be trying to do something different, but 99% of the time it just looks horrible.

  • This is really great stuff Jarel, keep it up!

  • benji says:

    Great post!
    I was wondering if there is a type theory whereby a “formula” I guess, creates a nice contrast between headings, content etc. E.g. h1: 22pt, h2: 18pt, h3: 14pt and so on…is there a proven method of hierarchy?
    Cheers
    Benji

  • Damon says:

    Umm, maybe it’s because I’m a writer not a designer, but I don’t see any difference between your boring and sexy quotation marks except for the text.

  • mojitopl says:

    always good to refresh this knowledge. thx

  • That Web Guy says:

    Nice work. I wish I had more projects that involved typography. I need more experience in that area.

  • Jarel says:

    Thanks for the comments guys, much appreciated! :-)

  • Nice article…I personally find that it’s a lot harder to have too much white space as opposed to too little. I’ve seen designs with minimal white space and look fantastic but I do agree that we can always end up overdoing it. Typography, white space, leading, tracking, kerning, and contrast are definitely elements of design a designer should spend time on. Typography is quite simple in nature but it is communication and meant to be read. Often typography or typographic icons are superior to just images because images aren’t as easily read. I also think type is much more user friendly as opposed to a stack of images.

  • Raspo says:

    Thanks, I really like this article!

    PS I don’t get the quotation stuff (number 7)

  • Yatrik says:

    Very good info. Thanks

  • Mike Gensel says:

    @Raspo:

    The blog probably does a quote replacement from the regular quote to the stylized quote. that way when writing the blog they don’t need to remember to use the code.

  • Jackie says:

    Very helpful. Thankyou.

  • MeToo says:

    Raspo, I do know what they mean, but the examples have the same quotation marks. So you won’t see the difference.

  • Richard says:

    I agree with Raspo, good tips here but the quote thing alludes me. Both examples you show look the same to me in Firefox 3.5, IE7, Opera 9.64 and Chrome 2.0 (those are all I have on this system currently, maybe it’s a Safari thing).

  • Leon says:

    About the quotes, the first example is supposed to be rendered as inch marks (aka dumb quotation marks) which is a completely different thing from smart quotation marks.

    dumb quotes &#148
    smart quotes &#8220 and &#8221

  • Roland says:

    With regards to #7 – I’m guessing Wordpress already took care of those quotes – It’s the only example that tried to demonstrate the principle without a screenshot – it would probably be best to change it to one – that also eliminates any text rendering differences as well.

  • Preston says:

    I loved the article, I would have to somewhat disagree on tip #5 about serif and san serif fonts. It’s generally accepted that serif fonts are better for body copy in order to avoid fatique when reading. (I guess that’s more for print than web but still.)

    I think designs that use a sans- serif in the headline and serif in the copy look better anyway.

    Just some thoughts. Nice article. Thanks.

  • This is excellent. Thanks so much for the refresher course and much more. Hope all my clients will want to follow this.

  • mixey says:

    And again, great article! Thanks!

  • yanakieff says:

    Very nice and helpful article.

  • Snookerman says:

    Thanks to WP, your boring quotation marks are smoking hot!

  • sabithpocker says:

    good one……..even after reading these many times i fail to follow some of these while doin designs…may be typography takes more time to bcme smooth :P

  • Ted Pavlic says:

    In the example that has “Designing User Experiences, One site at a time – with a smile :) ”, shouldn’t you be using an en dash (–) or em dash (—) instead of that hyphen?

  • logicalnot says:

    Ah ah… Sure… Let’s give the Hatch Show Print a lesson!
    http://www.ryman.com/HatchGallery.html
    http://www.youtube.com/watch?v=Pniaea9CsBY

    While most of the post makes sens [ and I wish it would be tattooed on the head of all Word users I know ], I am worried about the good/BAD examples. It give a feeling of a dogme that really bugs me.

    For instance, in 1.Leadind, the first “bad” example is very fine with me. I saw it in numerous magazines and brochures and it works pretty well. Thoses designers are not “bad”.

    Learning Joseph Muller-Brockmann’s principles is great (http://www.flickr.com/photos/98182698@N00/303351214/) but it’s also a thing to forget him a little and get a life.

  • Ramiro Riox - rariox says:

    Very nice and useful post, thank you for sharing with us.

  • Rick says:

    I actually disagree with the serif/sans-serif point… In print media it’s the other way around, and except at very small sizes (when screen pixels come into it) the same applies for on-screen as well.

    The two examples you showed were biased as the serif body text example had the body text a lot smaller than the sans-serif example. At the same sizes, the sans-serif example would be easier to read.

  • Rick says:

    The rest of your points are all good though… I’ve had many ‘professional designers’ send me templates that have no clear visual hierarchy or regard for adjustable font sizes.

  • Jarel says:

    Hey everyone, thanks for the comments! :-)

    Also, sorry about #7, WP does indeed replace the dumb quotes with smart quotes.

  • Jerry says:

    Have to agree with Rick (mostly).

    #5. Serif faces are easier to read than sans-serif faces (at the same point size and leading). The horizontal accent of the serifs act as a visual lead that allows the eye to scan more naturally from left to right. This is why all books use a serif face for body copy. The same holds true with reading screen-based media. Any body of text that is longer than a line or two should be set using a serif face.

    This really is basic design school 101 stuff. As an award winning designer and university lecturer (web and media design) I make a point of teaching my students the absolute basics of graphic and typographic design using pencil and paper (yes I know, positively mediaevel) before they even turn on a computer.

    You can only think outside the box and break the rules if you know and understand what the rules are in the first place.

  • Ray Gulick says:

    Good article with great points. But why, in a web typography post, are you using print terminology? “Leading” is purely print-based terminology, and so is “points,” which you’ve used to measure it.

  • Brix says:

    nice tips! very helpful!

  • Rajen says:

    Very useful post, thank you for sharing with us.

  • Maicon says:

    Very good refreshing tips!

  • You’ve explained the need for good typography not only on the web but in the printed world as well, and you’ve done it so simply and explicitly. Well done!