⌂ ◅ Classes + teaching ◅ Digital and Emerging Media Design I ◅ Projects

Typography exercise

GDES-220 fall 2020 (David Ramos, American University Design)
ramos@american.edu · office hours

This project examines HTML/CSS typography in more depth. You’ll design the front page of a (imagined) larger website, presenting previews of selected articles from The Manual. The first project offered an adequate but limited vocabulary—in this project, you’ll add DIVs and classes for greater expressiveness and control.

Think of this page like an expanded table of contents that includes short passages of text for the quoted articles. For examples of the kind of page I’m talking about, look at the homepages of Yale Environment 360 (designed by Upstatement), A List Apart, and Anil Dash’s site.

This project focuses on writing semantic HTML, and using CSS to articulate meaning. It’s more about web development than design. Aim to set effective type—but we’ll do more about the more conceptual, visual sides of web typography, later in the course. You can add images if you insist, but you probably shouldn’t, and type and layout need to carry most of the weight.

Content

You’ll be working with text from The Manual, which is freely licensed content. For each of the articles, there are:

You will also need a title for the whole page. One option: “Selections from The Manual.”

Phases of work

Getting started

Download the project starter kit (ZIP). The text you’ll be working with is in the example_content folder, and your HTML and CSS will go in the public_html folder.

1. Read and sketch

Start by reading your content (that is, the previews, although you might also read the full articles that you will be linking to). The excerpts are in a markdown file (text.md), which you can open with a text editor.

Make thumbnail sketches on paper, each no more than 3 in. wide. (See Smashing Magazine article about sketching type hierarchy. Explore several options for your design. Scan or photograph these sketches and turn them in with the final project.

2. Create HTML markup

Mark up the example content as HTML. You will need to use typographic elements and also DIVs or other sectioning content. Assign classes to elements as necessary. Remember, any element can have a class attribute.

Write your code in the project starter kit, which is built around web1-basic. Do not create your files from zero. Use the starter and its folder structure. As always, the home page of your site must be index.html—you have only one page, so that one page is index.html.

Elements

You’ll need some combination of these typographic elements:

You can also use DIVs and sectioning content to group related material together:

Look back to the textbook, Duckett, HTML & CSS, chapters 2 and 3 for more background on basic typographic elements.

You should include links to the original articles. (Now that the Manual has ceased publication, the original web addresses may not work. Add the links anyway.)

To make a link, enclose the text of the link in an A tag.

The HTML:

<a href="https://developer.mozilla.org/">MDN</a> offers authoritative, well-written reference material for web development.

Becomes:

MDN offers authoritative, well-written reference material for web development.

3. Set type and design layout with CSS

Design a typographic treatment that articulates the structure of the content and promotes legibility. This can be a one-column design, but if you’re excited to try CSS Grid for layout, you can build a multi-column site. Consider negative space (margins and padding), the widths of elements, size contrasts, font weight, and using rules (borders) and backgrounds.

As with every project, choose your fonts from the list of fonts for this class. You may use images, but cite them and make sure that you have permission to use them.

Hints:

4. Turning in work

Make sure that the project folder has your name on it, and turn in the entire folder as a ZIP file. See the instructions on how to submit work.

Learning outcomes