Digital Type Specimen Web Page Design

Project Brief

To get more familiar with typography for the web, each student is asked to showcase a web-based typeface in a flexible, one-page, html + css type specimen page of their own design. The font choice may be from Google Fonts, The League of Movable Type, or they can use @font-face to push out a typeface from other sources.

Focal Points: The type specimen page design must include four main sections that showcase the typeface in four different ways. The four section requirements are to:
1) prominently display the individual characters of the typeface (Aa–Zz, 0–9, and punctuation),
2) showcase display-level capabilities of the font with a selection of words from the word bank,
3) display the typefaces’s body copy versatility with an assortment of paragraph settings; and
4) feature varied experiments with microtypography in informational fragments

In other words, the page design will visually introduce the letters of the font, and demonstrate a variety of ways the type could be imagined to be used in different performance situations (display-level, body copy level, and micro elements). Guidance with this is provided in code templates supplied by the professor. Students are asked to aim for a final visual expression that contains typographically satisfying and balanced elements.

File templates and content theme: Html mark-up and css starter files are provided to start the students off. For content, we follow the lead of many type specimens (both traditional and digital), and use snippets of thematic words as a vehicle for testing the typeface(s) and its design potential. Text snippets are supplied to the students to pull out of a word bank (.doc file). The words are centered around the theme of ‘public parks,’ which is versatile and has wide appeal. The students can mine the word bank for content to plug into the html source code starter as they choose. Students are asked to shape the content in the html file via a corresponding css file.

Learning Objectives

Learning objectives for this project include:

1) To bring form to web-based typography in an artfully considered way.

2) To expand experience with understanding the structural necessities and possibilities of html.

3) To gain fluency with typography and typesetting within the medium of css.

4) To explore different possibilities for design system typesetting, as can be found in design pattern libraries.

Deliverables

For critique, students share a preview of their web page in the browser (via Zoom meeting for an online class, or via projection in a physical classroom). For turn in, students submit a project folder of files with the following requirements:

Projects must contain the following:
• Correct file management: Creation and use of an appropriate directory structure
• HTML: Use the html provided for the primary “chunkification” of content. Work with meaningful levels of hierarchical text (h1–h3 for relevant heading types, p for body copy, ids and classes as necessary, etc.). Students are allowed to deviate from the html structure provided as long as the required content is included.
• CSS: Visual styling of the html must be through the external css file supplied, including any aesthetic imagery, patterns, line elements, etc. Note: content-based images go in the html.
• Written components: Basic categories of information as supplied in the html file are to be included; additional samples can be pulled in the from the word bank file, and marked up / styled accordingly.
• Content images: These are allowed, but the artistry of the typography must be the main priority.
• Links: Include and style nav-based anchor links to be able to jump to sections that are not visible from above the fold.

Readings/Resources

Above the Fold, 2nd ed. by Brian Miller

Type on Screen by Ellen Lupton

Rachel Andrew’s gridbyexample.com

Jen Simmons' video talks on css grid

Chris Coyier’s css-tricks.com

Reflections

Our students come into this project with two semesters of typography already under their belt, so they are already familiar with the basics and have type-focused design experience through the intermediate level. This means we can talk about how to apply what we know about typography to the conditions and medium of the web. They also have a project before this one that orients them to the basics of html and css syntax. Those projects are not about the visual outcome as much as they are about starting to understand how it works.

Most of the students in this class have no prior experience with html and css. Since the learning curve for it can be steep, I find deeper and more enjoyable learning in this medium can happen for students by providing a framework of files for them to shape (versus code from scratch). Giving them “raw materials” in the form of html and css starter files that I script (including comments within the files that guide them through it) is a bit like supplying clay to ceramics students. It gives them something to play with. From there, they have a chance to see, experience and experiment with the power of html and css for themselves. For students who catch on quickly, or for those with prior experience, they can use the supplied materials as a base and lurch ahead into more intermediate or advanced techniques.

There are definitely some students who this medium clicks for more than others; but, even those whose fluency comes slower can make big gains in their understanding of it.

The next time I give the assignment, I may offer a more specific list of recommended fonts, versus anything available in Google fonts. I will also supply a short list of css properties for them to prioritize: color, background properties (including support imagery such as background textures), sizes, margins + padding. They can/will certainly extend their designs past these settings, but so much can be accomplished through a focus on these choices, that highlighting these properties could help the students to make visually powerful tweaks with minimal effort, and it would also help them to cut through the large number of options that exist.