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.
You’ll be working with text from The Manual, which is freely licensed content. For each of the articles, there are:
- Author name
- Issue number
- Preview text
- Author bio
- Link to the original
You will also 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
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
You’ll need some combination of these typographic elements:
h2, and possibly
- perhaps, lists:
- if need be, emphasis:
You can also use DIVs and sectioning content to group related material together:
- Possibly, sectioning content, elements that work like DIVs, but carry more meaning;
sectionare particularly useful for this project.
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 href="https://developer.mozilla.org/">MDN</a> offers authoritative, well-written reference material for web development.
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.
- Your body copy should almost certainly be 16 px or larger.
- CSS goes in
- 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.
- 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