Typography exercise

Design a page that presents previews of selected articles from The Manual, examining HTML/CSS typography in more depth, and applying DIVs and classes for greater expressiveness and control. Think of this page like an expanded table of contents.

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

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

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

Phases of work

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 (any element can have a class attribute).

• headings: h1, h2, and possibly h3–h6
• paragraphs: p
• perhaps, lists: ul or ol; li
• if need be, emphasis: em and strong
• links: a
• DIV
• possibly some kinds of sectioning content: article or section, header, or footer

Start with 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 home.

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.

Your body copy should almost certainly be 16 px or larger.

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.

Links

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.