Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Typesetting, the act of selecting and setting type, can be a challenging job on the web. But also a fun one!

The web is a typographic medium. That is to say: the web is absolutely covered in type and there is opportunity abound to do it well. Perhaps one of the most fun typographic challenges is the setting of a blog post. Headers, paragraphs, quotes, lists… there is a lot there to balance, make readable, and explore aesthetics.

Your challenge: take this blog post and typeset it.

This definitely needs a little typographic attention

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag: cpc-typeset. We’ll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).


  • There are no real rules to CodePen Challenges, but this challenge might be fun if you give yourself the boundary of not touching the Markdown of the blog post at all. CSS only!
  • How might JavaScript get involved with typsetting? Well, their are straight up typesetting libraries like Typography.js. Then there are libs like Typeset.js that preprocess HTML to correct typographic details. Or FlowType.js for sizing type responsively.
  • How could you turn this challenge on it’s head? Can you make the blog post barely readable somehow? Or have a reading experience that is completely unexpected?


Thanks to our Sponsor!

This month’s challenge is sponsored by Jetpack — the ideal way to experience WordPress.

JetPack is a WordPress plugin that combines all sorts of powerful functionality into a single plugin. Here’s a handful of things it can do:

  • Secure and back up your site.
  • Connect your social media accounts for easy publishing after posting.
  • Enable Markdown and editing enhancements.
  • Increase performance though CDN-hosted and responsive images and video.