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.
Simon Pascal KleinPascal is a standardista graphic, web and front-end designer, and a rampant typophile. Born in Mainz, Germany—the birthplace of Gutenberg—he now works in Canberra as a contract designer and studies at the Australian National University. He's been actively engaged in the Open Source community and local web industry, notably as one of the unorganisers to first bring BarCamp to Canberra. He enjoys drinking in as much good type as he can get and has been happily bending beziers since 2004.
