Basic Typography for Ecommerce

The average ecommerce owner doesn’t realize the importance of typography and fonts. Words are all around us every day. In every piece of type you see when you look at the computer screen, somebody has considered how all of the letters and spacing will look. Understanding typography involves paying attention to the tiny details - it’s the little things that make the appearance of letters good or bad.

If you want your website to stand out, you need to understand fonts and the basics of typography.

Here is an overview of typography:

Understanding Typefaces and Fonts

Fonts and typefaces aren’t exactly the same thing. A font is an individual style while a typeface is a family of styles. For example, Helvetica Regular and Helvetica Bold are two fonts, but they are both part of the same typeface.

Classifications of Typeface

There are many classifications of typefaces, with the most common being Serif and Sans Serif. These are distinguished by a finishing stroke at the tops or bottoms of the letters. This finishing stroke is referred to as a “serif”. In contrast, Sans Serif refers to a typeface that doesn’t include the additional line or stroke.

Within any typeface classification, there are sub-classifications. A sub-classification in the Serif family is the Old Style Serif. In the Old Style Serif family, the fonts have a distinguishing feature of diagonal stress. That is, the thinnest parts of the letters are located on the angled strokes rather than the horizontal or vertical ones. Old Style Serifs include Adobe Jenson, Goudy Old Style, and Centaur.

Kerning, Tracking, and Leading

Those new to typography often overlook these concepts. They often confuse kerning with tracking. Kerning involves adjusting the spacing between certain individual characters in order to improve the appearance of the font.

Tracking is similar to kerning, but instead of increasing the space between specific characters, it increases the space between all characters in a given paragraph. Both of these methods are used in order to create a better visual balance in the text.

Leading, on the other hand, is the vertical spacing between lines. There needs to be a fair amount of leading in any text so that the paragraphs don’t look squashed.

Hyphenation

Many online business owners don’t make use of hyphenation these days, even though it’s necessary in order to improve the alignment of the text. If you ever use hyphens, avoid using more than one or two in a block of copy. You definitely don’t want to have one following another.

It’s also important to note the differences between a hyphen, en-dash, and em-dash. The hyphen is a short horizontal line character. The en-dash is slightly longer, and the em-dash is even longer. The en-dash is usually the length of two, small horizontal lines, and the em-dash is the length of three.

Rag

The reason why hyphens are sometimes useful is because they help prevent rag. Rag refers to the uneven edge in a block of text. It commonly occurs on the right-hand edge and it affects readability more than people realize. If the rag is uneven, it can be very distracting on the eye – especially if it’s in a column of text.

Ligature

A ligature is set whenever parts of the characters clash or look jammed together. For example, if two letters clash to the point at which they overlap, they will need a ligature set in order to make them more distinguishable. This is an issue seen primarily with Serif fonts although the occasional Sans Serif fonts will need ligatures as well.

Understanding Contrast

Just ten years ago it was very popular to display colored text on black backgrounds. This was before people knew that displaying text with too much or too little contrast can hurt your eyes. If people have to strain in order to read your text, you should change it immediately. Whether you want to showcase a product or provide readers with informative content, use a font, font color, and background that won’t be hard on the eyes.

Understanding Alignment

Most people can agree that text should be aligned to the left. After all, that’s how we’re used to reading. Only use center or right alignment for headlines, sub-headlines, and/or captions. Also, justifying text so that it has a straight edge on both sides should be used in moderation. Sure, it looks nice and neat, but too much of it will make a layout look boring.

Widows and Orphans: Examples of Bad Typography

A Widow is a single word that is left at the end of a column. An Orphan is a single word left at the top of the following column. It needn’t be said that both of these are examples of bad typography. This is where a rag or a ligature comes in handy. Just make sure that the ligature or rag doesn’t make the text look too cluttered. If it does, use a hyphen.

Now that you understand typography, you can create better looking websites, newsletters, logos, sales letters, and so forth. How the words appear on the screen is just as important as the words themselves!