⌂ ◅ Classes + teaching

GDES-315 fall 2022 / David Ramos, American University Design

A new kind of design

Exactly one hundred years ago, on August 29, 1922, the Boston Evening Transcript ran a special section on graphic arts—what we would today recognize as graphic design, illustration, and printing. One article from this section, William Addison Dwiggins’s “New Kind of Printing Calls for New Design,” has become a keystone piece in the history of design—in it, Dwiggins proposes that emerging practices and technologies demand a modern form of creative work, which he refers to as “graphic design.”

Your task is to work with Dwiggins’s original text, and typeset it for reading in HTML/CSS. This assignment serves as an introduction to the rest of the course. It asks you to delve into screen typography, grasp the structure of information, and express voice and mood.

Background

In 1922, technological innovations meant that marketers, artists, and publishers could reproduce materials that would have been unaffordable or impractical in earlier years, and the printing industry was shifting.

The writer, W.A. Dwiggins, worked as a type designer, book designer, and calligrapher. He is probably best known for creating Electra and Caledonia. AIGA Eye on Design ran a bio sketch of Dwiggins, and the Letterform Archive has images of the designer’s work from W. A. Dwiggins: A Life in Design.

In truth, in his 1922 piece, Dwiggins uses the words “graphic design” only once, and only then in passing. Design historians like to point to this article as the first time that the term “graphic design” appeared in print, but they are incorrect. The phrase “graphic design” goes back at least to a 1917 catalog of classes at the California College of Arts and Crafts. Still, this is a key piece of writing, which lays out the concept of graphic design as a discipline.

Sources

The text comes from Paul Shaw’s “The Definitive Dwiggins no. 56—New Kind of Printing Calls for New Design”, an essay about the circumstances and significance of Dwiggins’s article that also includes the whole of the original piece. Dwiggins’s piece is also reprinted in Looking Closer 3: Classic Writings on Graphic Design, a collection of some of the field’s most significant texts. Since this piece was originally published in 1922, it is out of copyright and in the public domain, so we can lawfully reproduce it.

Your design task

  1. Download the HTML/CSS files (ZIP) for this project. Change the folder name so that it includes your own name, and add your name to the readme file.
  2. Read Dwiggins’s essay, in index.html and reflect on it. Write down notes about what you want to accomplish and convey in your design.
  3. Read about and look closely at the typefaces that you may use (see “Font options,” below).
  4. Sketch out 3–4 design solutions, on paper.
  5. Edit the CSS in order to implement an early version of your design. For this project, you may edit css/typography.css and index.html, but you may not alter any other HTML/CSS files.
  6. Review your design and seek critique.

One concept, built in live HTML/CSS, supported by thumbnail sketches, is the minimum requirement for this assignment. You are welcome to produce additional concepts. Duplicate the entire folder for a concept.

To turn your project in, ZIP-compress your project folder (which has your name on it) and upload that folder to Canvas.

Tips

Remember, this is a design assignment. Go into your coding with a concept, mood, or effect in mind. This is a typographic design problem and for reading in a browser—solve it using one column of text. For this project, you only need to design for readers on desktop/laptop computers.

Font options

For this project, work with fonts from the IBM Plex superfamily. Plex was drawn by Mike Abbink and Bold Monday. IBM commissioned Plex for corporate identity work, and released the fonts under a free/open source license. The design includes a sans (inspired by turn-of-the-century American jobbing gothics) a serif (influenced by Bodoni and Janson, but drawn with a large x-height), and a monospace font (modeled after an IBM typewriter’s lettering). See the design’s thorough and imaginative launch site for more.

You may not use any additional fonts. Please think twice before using fonts from across the whole of this large superfamily.

Your HTML file loads font files from Google Fonts:

Here are CSS property/value pairs to specify these fonts:

font-family: 'IBM Plex Mono', monospace;
font-family: 'IBM Plex Sans', sans-serif;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-family: 'IBM Plex Serif', serif;

Vocabulary: CSS properties

You can fulfill this assignment well by working with no more than a dozen CSS properties:

line-height, font-size, font-family, font-weight, font-style, letter-spacing, text-transform, color, margin, padding, and border

This is the first assignment of the semester, and it focuses on type hierarchy. If you find yourself using other properties, you are probably going wrong.

Evaluation

You will be graded on:

References

You should have learned to work with HTML and CSS in GDES–220, the intro web/interaction course, which is a prerequisite for this class. Most of this course relies on design using pen/pencil/paper (for thinking) and Figma (as a visual prototyping tool), but you must still have a grasp of how semantic HTML and CSS typography operate.

If you need a refresher, look at MDN Web Docs:

Please don’t pop random search terms into Google. You’ll probably get bad advice back.

You can also refer to one of our textbooks, which covers not only performance and aesthetic decisions, but HTML/CSS techniques:

Santa Maria, Jason. On Web Typography. New York, N.Y.: A Book Apart, 2011. (Issued in print and as an ebook. On reserve at Bender Library, and available through the library as an ebook.)