Advanced Typography and Layout Challenge

While many of my student’s final sites last semester were excellent, I did note a little weakness in typography and layout. Like everything in a two-year, two-lessons-per-week curriculum, there are some subjects I can’t address deeply in class, although I do provide extensive reading lists.

To address this gap, I’ve made the exercise you can see above: a cover for a fictional scientific journal featuring a wonderful illustration of a Sea Nettle jellyfish by Laurent M. Bourgeault. The goal of the exercise is to replicate the cover using HTML & CSS.

Challenges

This exercise is deliberately designed to challenge your skills, so there is no upper time limit: you should feel free to work on the exercise a little bit at a time. I’ve provided a CodePen of the completed cover; you can switch to Editor view on CodePen for clues and assistance if you wish. I’ll also write a blog post explaining the code in the near future.

A few important points to note:

• Accessibility and reading order are paramount: that is, you should keep the text in your page in the logical order it would be read on the cover.

Resources

You will need the following to complete the work:

• The “Journal of Jellyfish Studies” and “May 2014” text is in Aspira by Durotype, a demo of which you can download from myFonts as an OTF or webfonts package. (You will need to create a free myFonts account first)

Suggested Stretch Goals

If you can, make the cover responsive, as is the version above.