Score code, devs, and debt fast.

Start free trial

Rip it up: Worn Type using CSS

Alex Walker
Alex Walker
Published in
Web·
·Updated:

Share this article

SitePoint Premium
Stay Relevant and Grow Your Career in Tech
  • Premium Results
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools

7 Day Free Trial. Cancel Anytime.

With so much recent experimental focus on DOM scripting, it feels like years since I’ve seen anything genuinely new in plain, old CSS. That was until today at least.


Khmerangs Worn Type CSS TrickKhmerang.com
has published a great little article explaining how they achieved the grungy, weathered look on their headings. No, it’s not sIFR and it’s not even traditional Image Replacement. It is, in fact, a clever variation on Tom Gilder and Levin Alexander‘s ‘old skool’ IR technique, which advocated floating an opaque image layer over your text, rather than the much more common method of just shunting the original text right out of the viewport (i.e. ‘text-indent:-1000em‘).

Khmerang’s new take on the idea is to swap the image layer with a mostly transparent, distressed pattern, leaving the underlying heading text with a scratched and worn finish.

The really nice bit is the pattern repeats, but will rarely ever align itself identically with the same letter, so every character should appear to be a one-off original.

As you may have already figured, there are a few caveats to consider.

  1. The text is still selectable, but it’s more difficult than usual. Selecting within the heading is next to impossible. Still, most other IR methods have no prospect of ever allowing text selection, so this technique is already a step up on those.
  2. You would need to choose a big, beefy font with a large surface area to get a worthwhile effect. Judging from a few quick tests, lighter weight fonts mostly came out looking a bit  grubby.
  3. The method requires some slightly mucky markup — <h2><span></span>Worn Text</h2> — so if you’re a stickler for semantics, you best avoid this method.

Nevertheless, it certainly provides a very distinctive result, and while it’s not likely to be the sort of trick you would use on project after project, looks like a useful addition to the armoury.

Nice Work.

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

Share this article

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.