Let’s work with another pair of HTML Buddies! This week’s combo is <sub> and <sup>.

The sub in <sub> is short for Subscript and the sup in <sup> is short for Superscript. They both alter the size and baseline position of the text they contain. User agent stylesheets set up this styling, but of course you can take control!

Your challenge this week: get crafty with these little typographic buddies!

How To participate

Create a Pen and tag it codepenchallenge and cpc-sub-sup. 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).

Thanks to Our Sponsor

The HTML Buddies challenge is sponsored by An Event Apart!

Learn from the best: An Event Apart’s speakers aren’t merely industry leaders with years of experience and deep insight. They’re also engaging, inspiring thinkers who are passionate about sharing what they’ve learned and helping you level up your skills.


  • The spec tells us these elements aren’t for moving text around for presentation-only reasons. Say you completely ignore that. How weird could you get with these elements alone?
  • These elements are notorious for screwing up the vertical rhythm of paragraphs. Add one, and the space above or below the line is wider than lines that don’t have one. What would you do to prevent that?
  • A big use case for sub is representing chemical formulas like H2O. Try having some fun with styling those!