We have more typefaces available for use in digital projects than ever before. Selecting a typeface can feel like a daunting task, whether limited to our font menus or searching distributors or foundries. When choosing a typeface for a specific project, we want to make sure we are choosing fonts that have a full character set with necessary accents, punctuation and numerals, including extended language support. While it is popular to criticize Comic Sans for its overuse and playful, childish feel, it is a useful example for discussing how to begin talking about the visual tone we are trying to set with our typeface selection. In the workshop, I ask attendees to pick a typeface like they are choosing an outfit: what’s the occasion? How are you feeling? What is the weather like? An appropriate typeface choice is relative to the content. Next, I go over some basic type classifications (including serif, sans, decorative, script, etc.), which can help when searching for typefaces. Body text, display text, UI text, and tabular data are each different kinds of content where certain typefaces may work better than others [Brown 2018]. Typefaces with obvious, visual personality (like Comic Sans) generally only work for very specific situations and are not the best choice when the reader is trying to absorb complex information. I give an example of Source Sans by Paul J. Hunt, Adobe’s first open source typeface. Source Sans is a large type family with many different styles (from very light to very heavy and italic of all of these weights). I use Source Sans in a lively type specimen I created, to show that even a simple, sans-serif typeface can feel playful but still related by using multiple weights from the same type family.

Contrast [in size, weight and style] creates hierarchy. To demonstrate this, I show the attendees a phrase set in one typeface in one weight. In the example, the hierarchy of visual information is even. The same style is used throughout (it’s all italic), the same weight of the typeface and the same size. In some cases, we are striving for an even reading experience (think long paragraphs of text). However, what happens when we take that same phrase and incorporate contrast, in size, weight and style?

In the next example, we can see how a shift in size or weight creates a sense of visual hierarchy, placing emphasis in specific places. I also remind participants that this is still the typeface we looked at previously, Source Sans. In digital projects, levels of visual hierarchy are absolutely crucial to the display of complex information, especially on the web. Hierarchy is already built into our web-based projects (HTML tags <p>, <h1>, <a>) and style sheets allow us to customize these elements through contrast of weight, size and style of type.

Negative space is a term that helps describe the absence of content or “white space” that plays a vital role in readability and visual interest. It is a natural inclination to want to “fill the page” with content but in fact, our eyes and brains appreciate it when there are ample amounts of margins and negative space to give a visual pause when needed.

Here, I show an example of a paragraph of text that is taking up the entire width of the screen. There is negative space between the lines of text, but it is quite monotonous and doesn’t do much to give a needed visual pause as we are reading. I then show the same paragraph, this time presenting the text with a shorter line length and more uneven negative space on the page. There is now less space between the line, so that most of the negative space is relegated to the right side of the screen. Even though it is approximately the same amount of space, it is far more dynamic and easier to read. I also show how I divided the space using a very simple three column grid. A grid is a powerful and fairly simple way to organize information. Establishing grid guidelines helps make decisions that will make your content easier to read.

Typographic details, including the conventions of typesetting punctuation, spacing, and alignment, are important for longer reading experiences. These rules and details are considered by professional designers and create a reading experience that is controlled and comfortable, without much thought or consideration by the reader. Many times, a professional designer makes typographic decisions not only on specific, dictated rules, but on what feels right for the situation. Typography, while dictated by some fundamental rules, is still contextual, subjective and interpretive.

Analyzing a web interface and describing the visual hierarchy can help one gain an understanding of typographic principles. We practiced this with several examples of website home pages for non-profit and public agencies to review some of the discussed principles. I asked the participants to consider the following open-ended questions when looking at the examples:

• In this example, how is hierarchy created?
• In this example, what feeling is the type conveying?
• In this example, how is negative space being utilized?

For example, we reviewed Audubon.org. First, we analyzed the number of type treatments we found on the homepage. Although the page initially looks quite simple (a menu, a large full window image, a caption), we discovered that there are over 10 different typographic treatments on that one screen. We discussed how the size, color, typeface selection, alignment and spacing of each treatment affects one another and how deliberate these decisions are in order to make the page feel “simple”. The more information we add (scrolling down on the site, we discover paragraphs, columns, maps, and other content), the more we begin to identify the relationships between each of these decisions regarding hierarchy, typeface selection, contrast and negative space. The ability to explain not only whether something works but why it works, is a skill that can be cultivated through practice and exposure. These questions help frame a valuable discussion on identifying successful typographic principles in practice.

At the end of the workshop, I present some current resources and digital tools for experimenting with typography on the web. Participants were able to practice basic principles of typographic hierarchy through contrasts of weight and styles, within the browser. TypeCast is a web-based tool that allows the user to test typefaces in the browser. For the purposes of this workshop, it worked as a simple way to experiment with typographic hierarchy in context. As of 2018, TypeCast, while still available online, is no longer being supported. This remains a challenge of teaching with free, online tools: maintenance and long-term availability of the tool can shift overnight. A longer workshop with more time for setting up HTML pages and CSS stylesheets would allow for more experimentation with web fonts in context.