Typography exercise

This project examines HTML/CSS typography in more depth. You’ll design one page of a (imagined) larger website, presenting previews of one article 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.

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:

• Headline
• Author name
• Issue number
• Topics/tags
• Preview text
• Author bio
• Link to the original

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

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:

• headings: h1, h2, and possibly h3–h6
• paragraphs: p
• perhaps, lists: ul or ol; li
• if need be, emphasis: em and strong
• links: a

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

• div
• Possibly, sectioning content, elements that work like DIVs, but carry more meaning; article and section are particularly useful for this project.

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

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:

• Your body copy should almost certainly be 16 px or larger.
• CSS goes in css/sitewide.css.
• For more about type, controlling DIVs, and CSS, see chapters 12 and 13 of the textbook.
• Don’t worry about putting elements side-by-side yet. It’ll be shockingly difficult with the tools you have. We’ll cover that in the layout unit next week.

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

• Write high-quality HTML and CSS
• Use comments to document your code
• Use HTML elements to describe the structure of information
• Set text with CSS
• Plan a hierarchy of typographic information
• Use classes for greater precision of meaning