Advertisement
Typography

Eight Important Factors of Good Web Typography

by

Good typography can be a cornerstone to a successful web design. Because so much of web design comprises of text, hitting the right mark for your typography is a key factor in the overall success of your site. The subtleties of fine typography can be a difficult thing for beginners to grasp... but today we have 8 tips that should help you to improve your overall designs.


Why Does Good Typography Matter?

As I said before, good typography can play a vital role in the success of a web design. It can help generate a visual hierarchy. It can make text easier to read. As the quote from Steve Jobs' Stanford commencement address below notes, typography is not some random spur of the moment decision, there's many factors and values that should be considered to generate well-tailored typography that not only looks good, but provides the functional advantage of being easier to read and take value away from.

I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can't capture. And I found it fascinating. None of this had any hope of any practical application in my life. But 10 years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would never have multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it's likely that no personal computer would have them.


Make Your Type Selections Mean Something

We'll get into classifying fonts and how to pick them in just a minute... but I want you to consider what typefaces really mean to you (or the project you're working on at the moment). Sure, you can use just about any typeface to make a word - but what does that typeface actually say about the word? More than any other design decision that you make, the type selections that you make give your site character and context. Choose them carefully, and they'll either help you communicate with viewers, or distract them.

As a quick example, examine the following two variations of the word "might" (below). Nothing changes significantly in terms of color or size, but the implied meaning that you might (har har) take away changes dramatically simply with the typeface and case setting.

There's several main classes of fonts, but only two that are mainly referred to on the web (serif and sans-serif). The former is a font that has serifs, small additional detail on the edges of each letter, whereas the latter is sans serif (translated to without the serif, for those of us who don't understand latin).

More than any other design decision that you make, the type selections that you make give your site character and context.

Both fonts can work well, either within a scheme of primarily those or as a combination in some circumstances. However, getting it wrong can give your web design the completely wrong feeling and impression, or just look plain bad. Consider the following examples and the tone brought to each design by the typefaces used:

You should also consider some other aspects, like whether your text is as readable in a serif font than it is in a sans-serif font. Smaller text will generally be represented better in a sans-serif font, as long as you play nicely with some of the other factors I'll mentioned today.

It's also worth noting that the advent of Google Fonts, Typekit, CSS @font-face services and other font-replacement technologies have ushered in a new wave of typefaces that might not fall into the categories of just serif or sans-serif. Consider the following examples:


Keep The Number of Different Fonts To a Minimum

A site that uses lots of different typefaces haphazardly is like a person that uses a lot of different voices in the same conversation... it might seem like a good idea, but chances are that you'll just end up sounding like a crazy person to someone passing by

Common knowledge once advised web designers to pick a single font and stick with it, but it can often be a lot more visually interesting to pick 2 or 3 fonts and use them (consistently and uniformly!) in carefully crafted combinations. This is where mixing up serif and sans-serif fonts can really become interesting. Consider the following examples and how the diversity of type helps bring life to the designs:

Notice that while there is more than one typeface used in each design, they are used appropriately (the see tip 1) and consistently across each site.

The number of different font faces can cause readability and other general design issues though, so this doesn't mean that just because you can use 100 different fonts, you should. There are some cases where many fonts being used simultaneously works well as an artistic statement, but it's a generally a good rule of thumb that you keep the number of fonts down to a minimum.

Why? A simple answer is that a site that uses lots of different typefaces haphazardly is like a person that uses a lot of different voices in the same conversation... it might seem like a good idea, but chances are that you'll just end up sounding like a crazy person to someone passing by. Limiting the number of typefaces on a site helps establish hierarchy and tone without overdoing it.

Of course, choosing the right fonts in this selection is also important. Certain fonts work well with other specific typefaces, especially those that are in similar categories like serif/sans-serif. A slab typeface might not match the ultra-thin font that you've put it right next to. Try out different combinations until you find the right 2 or 3 that work for you.


Line Spacing

Line spacing can be a major deal breaker for a good scheme of typography. Line spacing is just that, the spacing of the lines of your text. Move them further apart, and it generally becomes a lot more readable and easier on the eye. Your line spacing should, as a rule of thumb, be about 0.3em-0.5em larger than your font size, although it can different depending on your design. Although that's a rule of thumb, recognize that the leading should differ depending on your choice of font as other fonts might require more or less leading.

To realize why generous line spacing is a must in the majority of designs, refer to the graphic below to gain a basic understanding. At this level, they are both pretty readable but the spaced out one is ever more so due to each word having more space to be distinguished and separate from the rest.


Doesn't the example on the right look so much more easy to read?

The Hierarchy

The concept of a visual hierarchy is where the elements you want your reader to see and percept first are the most prominent, whether that is made through colour, size, font type or something completely different. Typography can play it's part in the overall hierarchy of your site, but it can actually have it's own. The easiest example to explain this is looking at text on a blog, and notice how the title is generally the bigger example of text.

You can use several different factors to help create your hierarchy. Colour is one example and that plays nicely into contrast, whereby the elements that you want your user to read first are the easiest ones. Size is, perhaps, the biggest example though, as you'll no doubt notice a massive 10em string of text over your standard paragraph sized at 1em.

Macintude uses the Black Sakura theme from ThemeForest. You probably go ahead and read the title before you dive into the content, no?

For more information on visual hierarchy in web design, see Brandon's article on that very subject.


Measure

Measure is an important aspect too. Measure is the width of your text, and a factor that can determine if your text is too wide or too narrow. Measure generally works alongside line spacing to make the text easy to read for the end user, by tailoring content to the range that the human eye comfortably travels on it's journey across the page.

Unless your template is specifically a narrow or wide design, you'd probably want to stick your text to a constant width that abides by this simple maths sum: 30 x text size. Use that as a baseline alongside your padding and your use of the golden ratio (should you decide to use that) to create a width that's easy enough to read. Just don't spoil it all by lowering your line spacing or making your text too small.

It's a little harder to define what good measue is, as it can different very seriously between different designs. Wider text might suit a specific design better.


Alignment

Text alignment is an important factor too. There's generally four types you could potentially use: left, centre, right and justified. The golden rule for typography is to make it readable, and you don't have as much control over that if you opt for a justified text alignment. Justified text is bascially where text is optimised to fill the entire width of your element creating the perfect rectangle of text. That might be good in newspapers and print, but on the web, it just doesn't work that well. One line might be a lot more crammed than another line, but that's not something you can specifically control.


Scaling

Sure, you might have perfected your typography at the 100% scale, but some users could be viewing with their browser window zoomed in or out. Therefore, your typography needs to be able to scale well when the user commands a zoom in or zoom out. This is very simple to test and manipulate, purely by scaling your browser.

Take note of your visitors with accessibility requirements, both in and out of typography. Of course, scaling can be used by anyone and a lot of the time, it can actually be accidental. My brother's netbook regularly has it's Chrome window zoomed in way too far, purely by accident due to the gesture involved on the trackpad.

Of course, the type of staggared zooming that is possible in most browsers is just one type. Mac OS X Lion introduces a beautiful iOS-like pinch-to-zoom that zooms into a page as if it were an image. One should also consider that type of zoom, and just how their text looks when it's being viewed within the same layout, just at a much closer view.


Weight

In a nutshell, a font's weight is how thick it is. A font can come in many weights, ranging from the ultra-light hairline to the ultra-black slab. Changing the weight of some text is generally used to add some subtle definition to determine importance, like highlighting key words or an opening paragraph, when being used in a paragraph.

Font weight can be used in many different scenarios. For example, you can use it within a post to pick out key words or phrases. Distinguishing with font weight means there's less need for multiple fonts or to introduce other factors that might degrade the readability.


Final Thoughts

Typography is a really integral part of design. When you look at a blog, you'll notice just how much text there is on the page and how much of an influence it can have on the design as a whole. These eight factors are the most important when it comes to typography, and can drastically change the aesthetics of it's design.

Choosing whether your typefaces use serifs is a major decision, and how to mix them is even more critical. The number of fonts, the space between the lines of text, the measure, the alignment and the weight are all important charateristics too. In a nutshell, your typography is something that should be well thought out and not just thrown together randomly.

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    CMS
    Styling Our Ghost Theme With LESSGhost less retina
    Welcome to the fourth part of our Ghost theme design tutorial series. In the introductory tutorial, you learned that there are two stages to designing a theme. During the instalments therefater we began and completed what we've referred to as "the first stage" of creating your theme's templates. This fourth part of our series takes us into the next stage of theme design, namely styling.Read More…
  • Design & Illustration
    Articles
    27 Must-Have Typefaces for Graphic Designers27 400x400
    This article explores 27 typefaces that will serve as a solid foundation for your typeface library. Take what you will from my suggestions. More importantly, learn from them and use that knowledge to build a typeface library that works for you!Read More…
  • Web Design
    Design Theory
    Typography Basics for DevelopersDsfd typography retina
    Typography is a fundamental element in any design that you work on. The main reason we have websites in the first place is to display information, and for that information to be consumed by users who come across it. While there may be many other elements to a website, at the core is content. That content needs to be easily read, digested, understood and having a solid typographic base will only help with that.Read More…
  • Design & Illustration
    Articles
    10 Rules for Choosing the Perfect Typeface10 400x400
    The typeface you choose for your next layout or logo design could either make it or break it. No pressure! With so many choices, where does one begin?! There is no right or wrong answer to the question, "Which typeface should I use?" However, there are a few guidelines that will help you make an informed decision.Read More…