The Journal of Jellyfish Studies

Volume No.2

Ink illustration of a Sea Nettle jellyfish (Chrysaora quinquecirrha)
Chrysaora quinquecirrhaPatrice Stephens-Bourgeault

While many of my 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 .

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.


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:

  • There are no bitmaps aside from the Sea Nymph illustration on the cover: all text remains real text.
  • Semantics are important, and should be reflected in the markup you use.
  • 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.


You will need the following to complete the work:

  • The illustration caption text (which reads “Chrysaora quinquecirrha, Patrice Stephens-Bourgeault”) is set in Jane Austen.
  • The illustration of the Sea Nettle Jellyfish.
  • 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)
  • All other text is in Pesaro by Hoftype; again, you can download the Light version of the font from myFonts.

Suggested Stretch Goals

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

Enjoy this piece? I invite you to follow me at to learn more.
Check out the CodePen demo for this article at