Jake Przespo

Typography is a part of design that is often overlooked or misunderstood. I’ll be the first to admit that I was clueless about the science behind typography and how important it can be. It has been a topic on the web forever, but I feel a lot of web designers don’t appreciate it as much as they should. I find the history and the background of this subject very interesting.

Anatomy of Type

For more anatomy information check out the page on Typedia

Serif vs. Sans-serif

If you have used type in design, this should be very familiar to you. Serif typefaces have small structural details towards the ends of its glyphs. They can have a flare, a bracketed, a hairline, or a slab serif. Examples of serif typefaces are Georgia, Times New Roman, or Garamond. Sans-serif typefaces simply lack these small additions. Some sans-serif typefaces are Arial, Helvetica, and Verdana.

Typesetting

Many people have tried to define typesetting, so I’ll give it a whirl too. Typesetting is the composition of words into type ultimately creating a body of language. Sound good? Typesetting has been around for many years but became more relevant in the web world around two decades ago. There are a lot of rules to setting type correctly and effectively.

Spacing

Leading, measure, tracking, and kerning all have to deal with the spacing of type. Leading, a word coming from the days when they used actual lead, is the space between lines of text, measure is the spacing between words, tracking is even space between glyphs and kerning is spacing between specific glyphs. All of these are equally important.

Vertical Rhythm

Another good practice that makes for good alignment, is sticking to a baseline grid creating vertical rhythm. This topic was covered in a workshop I attended lead by Dan Rubin. Keeping a vertical rhythm means exactly how it sounds — it keeps the page’s rhythm the same as the page continues down. Spacing between paragraphs should keep the same vertical rhythm as the leading, or line-height, as the paragraph itself.

Glyphs to get right

Ellipsis

Believe it or not, that isn’t just three periods. An ellipsis can be used to represent a pause or ommited text. The correct HTML entity for an ellipsis is ….

Primes vs. Quotes

These are probably the most commonly interchanged glyphs. Primes are used for measurements, such as my height, which is 5’7″. These characters are the keys that are on most keyboards. Quotation marks are used when citing a quote, such as “My name is Jake.” The HTML entities for left double quotes and right double quotes are “ and ”, respectively. The same goes for single quotes as well — left being ‘ and right being ’.

Dashes

There are three types of dashes that can be used: a hyphen(-), an en dash (–), and an em dash (—). A hyphen — the key on the keyboard — is most commonly used for showing the concatenation two different words to create a new one, like moon-walking. An en dash (HTML entity: –) is usually used when showing a range, such as 1988–2010. Lastly, an em dash (HTML entity: —) is mostly used to show a pause that is emphasized more than a comma could represent. I have used them a few times throughout this post.

A lot to keep in mind

Sometimes it may seem overwhelming with the amount of detail that goes into type. I didn’t cover everthing because I wanted to keep this somewhat short — there is much more to learn. There are, however, a few simple rules to keep in mind.

Measure should always be proportional to leading. The wider the measure, the larger the leading; the narrower the measure the smaller the leading. Never make your leading too large or too small. A good rule for legibility is to keep lines between 52–78 characters (2–3 alphabets) in length, including spaces. I learned this from Mark Boulton, so it is definitely something that should be kept in mind.

Here are some great resources and information on the subject of typography. Be sure to check these out:

• I Love Typography
• Tool to calculate a baseline grid
• Typedia — The encyclopedia on type
• 5 Simple Steps to Better Typography
• Typekit
• Become a Font Embedding Master
• Nice Web Type

If there are any other links that you think should be on here, let me know and I’ll be glad to add them.