Setting Type On the Web: An Introduction

My last article in this series provided an exhaustive look at getting type to the Web, covering the ins and outs of the @font-face technology. Now that we can get the fonts we want rendered on the Web, let’s continue with setting that type prettily. Unlike the earlier article, the following ones on finer aesthetics will be broken down into smaller, more digestible posts.

Definition and purpose

At first, typography can seem like an inherently dull field—dealing with fonts and sizes, bolding this, and italicising that could come across as rather arbitrary, or as difficult: where does one start?

Definitions avoid confusion, and purpose gives us a light at the end of the tunnel. Quite simply, typography is the art of creating and setting type with the purpose of honoring the text it sets.

You will have already made a “typographic” decision by selecting an adequate typeface (digitally, a font) for whatever project you have in mind. The next step is dealing with the headings, subheadings, paragraphs, lists, tables, excerpts, quotes, and their many siblings (the micro) by making choices about how they are organised on the page (the macro: grids, columns, and margins). Then we can highlight how they relate to each other (typographic hierarchy).

Typography exists everywhere where there is set type (i.e. movable type): it pertains to financial reports, the local newspaper, cereal cartons, the novels on our bedside tables, religious scriptures, and by extension, “movable type” on the web.

Why? Reap the rewards

Each of us probably has a good grasp of what we think constitutes good typography. Looking at the local newspaper, or cereal carton, or the books on the bookshelf, you’ll probably be able to list a range of properties that make it “good.”

The merits of our typographic choices are immediately apparent, and two of the most important are a text’s legibility and its readability.

Legibility

Legibility refers to the recognizability of individual glyphs (the individual markings that signify the semantic character(s)). A range of factors influence a glyph’s legibility: stroke, width, angle (of the stroke), style (e.g. roman, full-capitals), slant (of the whole style), color (actual color and typographic color, i.e. contrast), background color, and more.

Readability

Legibility is distinct from readability. Readability refers to the recognizability of whole words, sentences, paragraphs, tables, or whatever the text en masse constitutes. A range of macro factors affect readability: the measure (line length), the leading (line height or spacing), justification or alignment, the style of the typeface, the kerning and tracking, the size of the type, and more.

Of course, both are interrelated; changes to the point size will impact the legibility of both the individual glyphs, and the words they compose.

Highlight relationships and provide navigation

Typography can bring aesthetic order to information, helping users read and navigate.

Just like WCAG’s (WCAG 2.0, § 2.4) accessibility guidelines on ensuring that hyperlinks can be understood out of context, typographic hierarchy gives the text a certain skimmability. Good typographic hierarchy allows the text as a whole to be navigated with ease, such that readers can find their places again, or skip superfluous introductory information and get straight to what they are browsing for.

A good typographic hierarchy will provide visual cues to readers: headings are sized and styled in a way that makes them immediately identifiable as headings; paragraphs are uniform in styling, and their beginnings and ends are well marked out; quotations are recognizable, separate from the paragraphs they are enclosed or surround by, and so forth.

Good typographic hierarchies will also illustrate inherent relationships between elements on the page: labels are placed in proximity to graphs, charts, and graphics, and through their proximity, are identifiable as descriptive notations.

In another example, imagine a more complex, two-color design. A table holding quarterly profit figures could feature a light-blue background, whereas the nearby table of detailing the quarterly loss could have a soft red background, and the aggregate of the two, superimposed on top of one another in a line graph, would have the profit line in a strong blue, and the line depicting losses in a hard red. Graph notations should provide a legend, but color can also be used to signify the relationships.

Colour, font style, spacing, position, indentation, and a range of other stylistic variations can be used to signify a relationship between elements on the page or across pages—and over the entire website as a whole.

Earned or unearned qualities

As noted earlier, we consciously (and subconsciously) judge the typography of texts. Look back to the newspaper, or pull out a book from the bookshelf, and describe what the text looks like. The newspaper might be bold and almost cheap looking, whereas a book on social psychology might be clean and organised, complete with footnotes and easily looked-up references.

Typography imbues set text with qualities, or a certain interest. A text can appear inviting, graceful, serene, cartoony, dodgy, unbalanced, and/or boring, and importantly these qualities can be both earned and unearned. A good typographer will humbly honor the text they are setting, in honor of the meaning of that text. Bad typography or a lack of care can discourage readers with a sense of boredom, inaccessibility, or cheapness.

Inducing a state of interest

Finally, good typography can induce interest among potential readers. Simply, grace the text with the respect it deserves; if the text is good, and intended to be read and understood,  give it the typographic respect it is entitled to. In doing so you will induce a state of interest in browsing readers.

In closing

Robert Bringhurst once articulated: “well-chosen words deserve well-chosen letters.” Good web typography should seek to invite readers by revealing the tenor and meaning the text, and highlight relationships through a uniform hierarchy for ease of navigation.

In other words, web experiences that feature good typography are easier and more pleasurable to read and use.

Look out for the next article, which will cover specific rules of thumb to achieving good legibility and readability.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Elliotbirch

    Brilliant. I want more Pascal in the morning!

  • Joe

    The typeface used in this text is a bit rough?

    • http://designfestival.com Simon Pascal Klein

      Rough? The body copy is set to use Lucida Sans (Lucida Grande, Lucida Sans, sans-serif) and the headings are in Times (Times, Times New Roman, serif). It may be the font hinting and rendering on your computer?

      Could you provide a screenshot Joe?

    • Elliot Birch

      If you are using Windows make sure Cleartype is turned on. By default Windows has it turned off which makes type appear aliased.