The Anatomy of Web Typography

Every conceivable feature of typography can be referred to by its name. Whether you’re talking about the typeface itself, or the arrangement of type within a layout, there’s a huge glossary of terms which can help you describe things properly. Let’s take a look at the elements of typography which are important to you, as a web designer.

There are two essential aspects of typography which directly concern web designers:

• those which influence your choice of typeface
• and those which you can manipulate (often through CSS).

It’s therefore pretty darn important that you’re able to articulate (to clients, or team members) your typographic opinions and decisions. We’re not going to worry ourselves with the minutiae of ball terminals and tittles, but instead let’s discuss the anatomy of typography as it matters to web designers.

The Power is in Your Hands

Certain fundamental typographic properties can be manipulated with CSS. For example, perhaps most importantly, the font-family.

You’ll often hear discussion about the definition of font versus typeface, so it’s important that you know the difference. A font is the packaged up collection of letterforms; traditionally physical blocks used in printing, nowadays also including digital files. It’s the delivery mechanism.

(You hovered over that, didn’t you?)

A typeface is what the designer creates; the design. I always liked the comparison with music; you buy a CD (alright, we’re going back a couple of years here) as the delivery mechanism to listen to the music. You’re not actually listening to the CD. It’s a similar situation as with selecting fonts to make use of the typefaces they deliver.

Through CSS we can determine our preferred font families, in ranking order. This is what we call the font stack.

We can also manipulate font-weight through stylesheets. Weight is the way we describe the relative thickness of a character’s stroke.

Many fonts are produced with a variety of weights, most simply described as light, regular, book, extra-bold, with a range of variants besides. More specifically, we can determine the weight of a typeface using the TrueType scale, which runs from 100 through to 900 (400 being what we commonly refer to as regular).

Fonts should ideally be produced with actual weight variants, numeric or named, in order to be controlled through CSS: {font-weight: 300;}, {font-weight: bold;}. When a font variant isn’t available, browsers will often have a go at rendering the weight themselves, but the results can be less than optimal.

Uppercase and lowercase refer to the majuscule and minuscule letters. The term case originates from the drawers used in letterpress printing (the upper case holding the capital letters, the lower case holding.. you get the picture).

We can override the case (should we want to) via CSS using {text-transform: uppercase;} for example.

Whilst we’re on the topic of character case, when using uppercase it’s sometimes (especially at smaller sizes) advisable to increase the spacing between the characters in order to improve readability. In terms of CSS we refer to this as letter-spacing and it can be expressed as a positive or negative value, usually measured in hundredths of an em.

In traditional terms, we refer to letter-spacing as tracking. Tracking affects the overal character density within a given line or block of text. The term originates (as with many typographic terms) in the bygone age of typesetting, specifically phototypesetting, in which characters were projected onto film through a lens. The space around each character would be altered by moving a prism along a track, hence tracking.

The CSS property word-spacing can also help you out here. Predictably, altering the word-spacing value will see the space between words grow and shrink, also having a significant impact on readability.

Play with the letter and word-spacing values applied to the following block of text and see for yourself how readability is influenced.

Often confused with tracking is kerning. Kerning refers to the adjustment of spacing between specific letterforms (not a whole group of characters), again, to improve readability.

A proportional font (as opposed to a monospaced font, whose character spacing is uniform) will make allowances for specific pairs of characters which need extra help to visually sit next to one another.

For example, uppercase V and A, when placed together will usually need their kerning reduced to combat the extra visual space between them.

Once again, we have old-school typesetting to thank for the term, back when type was cast as metal blocks. Kern refers to the notch made in a character block, which would allow it to slot into a corresponding block. The positioning of these male/female notches would prevent mismatched characters being placed next to one another.

That said, kerning is a process associated with typesetting for print and isn’t easily embraced by web typography. There are JavaScript tools, such as kerning.js which can help designers manipulate their type on a per-character basis, but CSS hasn’t caught up yet.

In terms of CSS, there is a proposal for the property font-kerning in the works, but even this is limited in what it can do for a typographic designer.

Setting the (non-standard) property text-rendering: optimizeLegibility; will improve things in some modern browsers, by enhancing kerning on recognized character pairs. As with font-kerning, this doesn’t so much offer control as a helping hand. It will also trigger the use of ligatures where available in a font, which leads me nicely on to…

Ligatures take kerning to the next level, offering replacement glyphs for certain character pairs. In some cases, characters won’t match up very nicely, irrespective of how delicately they’re arranged, in which case a ligature can be designed. A classic example is the lowercase f and i.

Here’s one you’ll be familiar with; recognise this?

The ampersand is actually a ligature in origin, which we’ve become accustomed to using instead of Et (meaning “and” in Latin/French).

In other cases, ligatures can be necessary for certain linguistic rarities (the German ß being possibly the most familiar of these) and sometimes also purely for decoration. The latter we refer to as Discretionary ligatures, such as where a c and a t join together.

Where you have greater control over the content of a web page, you might use Unicode, or HTML entities to display ligatures. For example fi will sort you out with the “fi” we spoke about. If you’d rather have JavaScript help you out ligature.js might do the trick, though it’s not bomb-proof.

When using CSS to help you, you might lean on the text-rendering: optimizeLegibility which we mentioned, or you could use the proposed font-variant-ligatures which has a number of values such as common-ligatures, making sure ligatures are displayed wherever possible. Browser support is incomplete at the moment, but is certainly worth keeping an eye on.

Layout Decisions

As we’ll discuss in a minute, the proportions of a typeface can influence the amount of vertical space between each line. It’s therefore advisable to consider the line-height specific to the font used and adjust accordingly. Too little vertical space causes a body of text to be cramped and makes it difficult for the eye to track back to the beginning of the next line.

Too much space and reading becomes equally awkward.

Using relative measurements is always advisable in web design, especially where typography is concerned. Line height should always be a function of the font-size! Using ems to define line-height will mean that it’s always relative to the font-size. Take a look at this example and see how readability is influenced by the changing values:

In traditional terms we refer to the spacing between lines (not to be confused with the line-height itself) as leading, so-called because of the physical strips of lead metal which were used in printing presses to increase and decrease vertical spacing.

Nowadays, when line-height is calculated, half-leading is added both top and bottom of the characters. For example, a font-size of 36px, with a line-height of 54px (1.5em) would result in 9px of space added underneath the characters and 9px above. In effect, this vertically centers text within its line.

Moving along with our CSS-controled typographic anatomy, we come to justification; the alignment of text. In our diagram the text is aligned to the left, but it could be equally aligned to the right, centered or (when dealing with blocks of text greater than one line) justified. Styling via CSS is done with the text-align property, for example {text-align: center;}.

Fully justified text removes what’s known as the ragged edge..

..but can cause a nasty after-taste in the form of rivers or channels appearing in the body of your text.

In the world of fluid layouts, where the width of a body of text can be difficult to pin-point, justified text should be used with caution.

Selecting a Typeface

Selecting typefaces can be tough. Whether you’re looking specifically at headings, body text, block quotes etc. there are many factors at play. Let’s look at a few fundamental aspects of typographic anatomy which are worth paying attention to.

First up, are we dealing with a serif typeface, or a sans-serif? Serifs are those additional strokes which terminate a main stroke. Fonts such as Arial don’t have these strokes, they are sans-serif (another French lesson for you there..)

Serifs are said to help the flow of letterforms, binding cohesive words together, aiding the eye across the text and making reading easier. Sometimes, however, they can complicate a typeface, causing the reader fatigue and therefore actually hindering readability. The argument has been topical for decades and no concrete evidence has ever been succesfully presented for either of the two being more readable.

In any case, fonts sometimes come in serif and sans-serif flavors (like ParaType’s PT so you have the luxury of choosing which you find preferable.

Having mentioned readability, it’s only fair I quickly distinguish it from legibility. We use legibility when talking about the finer details of typography; the ability to recognize individual letters and words. Readability takes on a more functional role, relating to the practicality of a reader being able to absorb a body of text.

Readability is obviously very important. For this reason, it’s wise to take x-height into account. The x-height of type describes the height (take a look at the x of a particular face), from the baseline to the top of lowercase characters. Typefaces with a relatively large x-height tend to be more readable, especially at smaller sizes.

Larger x-height comes at the expense of the descenders and ascenders, which become logically shorter in relation. This can lead to visually less space between lines, which we spoke about a moment ago.

I’m not sure how I’ve reached this far without specifically defining a letterform’s stroke. If there’s one term which is useful in describing the personality of a typeface, it’s that. The stroke of any given letterform can be horizontal, vertical, diagonal, even curved – and depending on the stroke in question it may have a more specific name too.

The main stroke (usually upright and heavy) within a letterform is referred to as the stem, leaving the term stroke to then mean one of secondary prominence. The horizontal stroke on top of an uppercase T is called an arm, that which you’ll find bridging the gap in an uppercase A or H is a bar, the list goes on..

Strokes within one letterform, particularly in serif typefaces, can vary in style and weight too; a hairline being the thinnest one present.

Then some strokes, especially curves, will have varying weight along their own length. This is referred to as modulation. This variation balances the overall weight of a character and avoids particularly heavy areas where two strokes join.

Poor stroke modulation will often result in a clumsy, heavy letterform relative to others in the set. David Kadavy refers to this balance as evenness of texture and is often a measure of quality in a well executed typeface. Take a look at a body of text, then blur your eyes to get an impression of the overal texture.

That’s All for Now

There are thousands of glossary terms and adjectives to get a handle of if you want to properly describe typographic matters. We’ve covered some of the basics here and I hope at least a few of them are new additions to your vocabulary! Try randomly throwing one into the conversation next time you’re introduced to someone new – they’ll be very impressed..