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.
Typekit Practice is a collection of resources and a place to try things, hone your skills, and stay sharp. Everyone can practice typography.
One of their first lessons is called Using Shades.
The lessons provide actual code that you can use to make the typographical effects. And what better place to play with with that than CodePen! So the lessons have “Try on CodePen” buttons that link over to Tim’s Pens.
From there, of course you can play with the code directly, fork a copy for yourself, export it to play with locally, whatever you want!
What are other ways to do this?
Linking to a Pen is a perfectly legit way (and a good default) way to send someone off to play with your code. But there are other ways to do it depending on your circumstances.
If you want to programmatically generated a new Pen, you can use our POST API for prefilling Pens.
If you have a Pen pre-prepared and want users to automatically create their own Fork of it, you can link to it with a special format.
If you want people to snag chunks of code of their choice from you site to play with, you could direct them toward the CodePen Bookmarklet, which is built just for that.
How ’bout some buttons?
Because Mr. Dodson asked:
@chriscoyier does CodePen have a styled, embeddable “Try it on CodePen” type button?
— Rob Dodson (@rob_dodson) April 11, 2014
We might as well offer up some official graphics you can use for these purposes if you’d like: