DRAFT: This module has unpublished changes.

Typography: Text & Image


"Typography is what language looks like."
Ellen Lupton


Working with online text


One of the contexts to think about when designing your digital portfolio is the difference in expectations for reading in print and reading in digital environments. It's different.


For those of us familiar with composing and presenting our work in word-processing programs — and conventions such as indenting the first sentence of a new paragraph and double-spacing our text — newer and still-emerging strategies for presenting our written work in digital environments offer alternatives. For example, it is not a convention when presenting writing online to indent those sentences or to double space, both of which are print conventions.


Writing for academic and professional audiences requires attention to typography and legibility. According to the Web Style Guide,


Typography is the balance and interplay of letterforms on the page—a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. When readers scan a page they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, and then they parse the language and read.


Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.


Two ways of thinking about audiences and working with images:


Many academic and professional audiences have expectations for text and images that are coherently integrated with obvious organizing principles. These principles help achieve professional outcomes:


  • To make a good impression and establish credibility with readers
  • To help readers understand the structure and hierarchy of your writing
  • To help the readers find the information they need
  • To help readers understand the information
  • To help readers remember the information



The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page.



Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity. Section on repitition from The Non-Designer's Design Book.



Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.  



Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.

— From Robin Williams, The Non-Designer's Design Book, 3rd Edition.


In terms of making meaning, however, there are other ways to think about audiences and working with images


What if, for example, your purpose is not to present hierarchical or informative text-and-image integration, but to:


  • Disrupt the reading?
  • Provide space for readers' reflection, examination, and learning?
  • Promote associative meaning-making?
  • Parody, remix, critique, or remediate conventions?
  • Demonstrate respect for readers' own process of discovery?

Depending on your audience and purpose, multimodal composing practices allow for a wider range of meaning-making strategies. For example, is it possible to make an argument without words?



Additional Resources


Lunsford, Andrea. The St. Martin’s Handbook, Seventh Edition.  


Chapter 23: Document Design

Today, the electronic revolution has dramatically affected the delivery of information. Computers make it easy for us to use color, headings, lists, graphics, and other visuals in print and online texts. Because these visual elements can be fundamental to readability and to helping us get and keep a reader’s attention, they bring a whole new dimension to writing — what some refer to as visual rhetoric.


23a: Visual Structure

Effective writers think of their print and Web-based documents as visual structures to which they can apply basic principles of design. Even the most basic essay — all text, on paper — has a visual structure, with certain margins and spacing, a centered title, paragraphs indented on the first line, and so on. A fairly simple manuscript format incorporates many visual rhetoric principles, and computers offer more complex design choices such as varied fonts and inserted images. However visually rich the document, however, the writer’s goals are to make each page look inviting and to lead readers smoothly from one part of the text to the next.


Ball, Cheryl, and Kristin Arola. visualizing composition 2.0. Bedford St. Martin's, 2011.

Available on reserve, Richardson Library.

visualizing composition covers these key concepts:
    • Alignment
    • Audience
    • Color
    • Context
    • Contrast
    • Element
    • Emphasis
    • Framing
    • Organization
    • Proximity
    • Purpose
    • Sequence
    • Text
DRAFT: This module has unpublished changes.