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.

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).

Ideas

• 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?

Resources

• Try out a typesetting web tool like Type Nugget or Typecast.
• There are some Google Font choices in the assets Panel, but you might explore more Google Fonts and lovely pairings of them on sites like Beautiful Web Type, Fontjoy, or Font Pair.
• As ever, searching Dribbble for a term like blog post leads to loads of inspiration.

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.