1 Web Typography

Typography in Web Design

Text is an important element of any website, and it must be handled properly to captivate, inform or involve your visitors. Aside from the need for well-written, engaging copy, the text should appear in a pleasing manner that encourages the reader to travel further into the site and read the offered information. A website with a haphazard design and oddly arranged, hard-to-read blocks of text can overwhelm the reader, causing them to retreat and seek information elsewhere.

Font Choice and Size

Serif vs. San-Serif Fonts

Serifs are those dash-structures added at the end of letters and symbols. When it comes to lengthy books or magazines, using a serif type is the best. Serifs sit better on the baseline and help lead the reader’s eye to the next word. This makes reading more sustainable for longer periods of time.

San-serifs are typefaces without serifs. San-serifs look simpler and are easier to read at lower-resolutions. Web designs often use san-serif fonts such as Verdana, Arial, etc.

Serifs and San-Serifs

Number of typefaces

Pairing different type faces can make your layout dynamic, but using too many can be distracting. When too many fonts are used the viewer becomes unclear of what elements are important.

The general rule is to use three or less fonts per project. For example, two fonts are used for the headline and body text. The fonts could then be bolded, italicized, and sized for subheadings, CAPTIONS, and other design elements.

The longer the design document, the more fonts you can use. However, when it comes to brochures, ads, or any other short documents it is better to use one or two fonts.

Too Many Typefaces

The font choice should not distract from the text's message, and it should always allow for maximum legibility. Choose a font size that is easily seen and read, typically between 12 and 16 points for the main text, and larger variations for headings and subheadings.

Hierarchy

Hierarchy is simply defined as any system of persons or things ranked one above another. To look at more examples or heirarchy click here.Varying type size is one of the best ways to differentiate content. Colors and pretty boxes might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits — and that could mean that they stay longer and read on.

hierarchy can be achieved in many ways — just remember to be consistent

Hierarchy can be achieved in other ways too. We’ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.

Text Alignment

Alignment is an extremely important concept in typography. For some reason, non-designers tend to instinctively center align everything. Somewhere in life we learn that if something is centered then it is balanced and therefore better. In reality, center alignment is the weakest, hardest to read alignment and should be used very selectively. All text should align on the page, typically along the left edge. This helps present order to the reader, and a more pleasing overall design than one with indentations and odd “floating” text. Well-aligned text helps lead the eye in a logical progression down the page, and it allows the reader to skim the text easily for information important to her. Content that seemingly wanders about the screen can offer confusion and the reader may not know what to look at first.

 

screenshot

The first two paragraphs above are left-aligned. This is how we are used to reading because it is generally the format we see in books, magazines, etc. The center-aligned paragraphs are much harder to read due to the lack of a hard edge. There’s no consistent starting or stopping point for each line so your eyes take a moment to adjust to each new line. The difference is subtle in practice, but huge in principle.

This doesn’t mean that you should only use left alignment at all times. Just be sure to constantly ask yourself how important readability is vs. the particular aesthetic you might be trying to achieve. Ideally these principles would always work together, but in reality they are often opposing forces that require compromise one way or the other.

Another thing to be aware of is mixing alignments. No matter which alignment you choose, try to be consistent throughout your design. It’s often (though not always) appropriate to center-align a headline over left-aligned copy, but experimenting with mixed alignments beyond this could result in a visually cluttered and confusing page.

 

White Space

Almost as important as the content on the page is the white space between the information. This refers to the amount of space between the actual lines of text, as well as the open space around the content blocks. Text that looks too constricted on the page, as well as offering no “breaks” between paragraphs or thoughts, gives the reader a suffocated feeling. Large, unbroken blocks of text can also look too intimidating to a reader, who may simply click away from the page instead of working through it. Allow plenty of space between your lines and paragraphs to give the reader some “breathing room,” and encourage them to read through your text.

whitespce

To allow your text easier readability, separate the elements of the page in a set hierarchy. Headings, for example, would stand out as the largest, eye-catching piece on the page if they boasted a 20-point font when compared to your 14-point body font. Subheadings rest between these two -- at 16 or 18 point font. Keep these sizes uniform across your entire site, to allow easy reading and information gathering.

 

Line Length

Reading on the Internet is not the same as reading offline, so your text should reflect this. The mea­sure is the length of a line of type. To a reader’s eye, long or short lines can be tir­ing and dis­tract­ing. A long mea­sure dis­rupts the rhythm because the reader has a hard time locat­ing the next line of type. The only time a nar­row mea­sure is accept­able is with a small amount of text. For opti­mum read­abil­ity you want the mea­sure to be between 40 – 80 char­ac­ters, includ­ing spaces. For a single-column design 65 char­ac­ters is con­sid­ered ideal.

A sim­ple way to cal­cu­late the mea­sure is to use Robert Bringhurst’s method which mul­ti­ples the type size by 30. So if the type size is 10px, mul­ti­ply­ing it by 30 gives you a mea­sure of 300px or around 65 char­ac­ters per line.

Why? Long lines of text require longer periods of attention before the eye moves lines, short lines of text require moving lines too often, which can break rhythm, an optimum measure means creating a comfortable balance.Shorter lines help encourage the reader to read the line and drop to the next.

line measure

 

The same rule can apply to headlines. Although headlines are generally less than 50 characters, shortening the one-line sentence can be beneficial. For example, if you are working with the heading, “Hundreds of Design Opportunities at Your Fingertips,” you can make it easier to read by breaking it apart:

 

Leading

Leading is the space between lines of text and is generally measured from baseline to baseline of each sentence. Leading is important when setting paragraphs because it influences the legibility of the text. If there is no leading then lines will feel cramped. If there is too much leading then the space will create disconnected lines.

There are different ways to change leading depending on the program you use. The rule of thumb is to use a leading that is 2 pts above the font’s height. For example, if you are using a 10pt font then the leading should be 12pts. This can vary depending on the font – different fonts need different linespacing.

Why? Too much leading causes the eye to jump from line to line and can be disruptive to reading, too little leading creates a dense ‘typographic color’ which looks less appealing, and can create the illusion of ‘more’ text.

Measure and leading are related, when increasing your measure, ensure you adjust your leading, longer measure requires greater leading and vice-versa. These rules can change depending on choice of font, for example, a font with a larger x-height (literally the height of the x character) such as Verdana, may require more leading.

 

leading

Tracking and Kerning

Tracking and Kerning are similar in that they both refer to the adjustment of space between type.

So, what’s the difference? Tracking is the adjustment of space between a GROUP of letters. Kerning is the adjustment of space between individual letters. Tracking should be adjusted so letters don’t run into each other during the printing stage. It also helps by improving the readability and density of text.

Tracking

Kerning is effective and improves the overall readability for headlines, ALL CAPS, and logos. Kerning can be helpful, but don’t get carried away. If a company’s name is meant to be one word, don’t make it look like two.

TypeBlogKerning

In most cases letter spacing should remain default, as fonts are designed to work best at this setting, in special cases, such as all uppercase or small caps increase letter-spacing by a small amount (~1px).

Why? Uppercase characters are tighter and will require extra spacing to improve readability.

Contrast

Pale pink text on a pale blue background, might match your t-shirt, but it just doesn’t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. If you’re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You’ll soon see if you have enough contrast. Robert Bringhurst, the consummate typographer writes, typography exists to honor content. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read?

Contrast

 

Make It Scannable

Readers online skim text, especially long or large blocks of it. Offering shorter lines and smaller paragraphs help, but most Internet users scan text for important pieces of information. Use bullet lists and special text commands, such as italics, bold and underlining, for emphasis and to get your message to the reader without requiring them to read each and every word.

scannable