Case study · Interactive lettering archive
The Graphitti Archive letters with legacy.
An interactive study of graffiti lettering — an A–Z of letters and writers, hand-drawn display type, acid-yellow accents and a “Try a letter” tool.
This is the real website. Scroll it, tap it, try it. On a phone it’s best full screen.
- Type
- Interactive lettering archive
- Sector
- Art & culture
- Sections
- 3
- Built with
- Hand-coded · no templates
About the site
The Graphitti Archive is a study of graffiti lettering. “Letters with legacy.” “Learn the letters. Discover the writers. Your A–Z of graffiti starts here.”
The idea
Graffiti is usually shown as photos of walls. This site treats it as a craft you can learn: an A–Z of letterforms and the writers behind them, with “Try a letter” inviting visitors to have a go themselves.
What we built, section by section
- 01
A study of graffiti lettering
The hero — “Letters with legacy.” in hand-drawn lettering.
- 02
Try a letter
The interactive starting point.
- 03
The A–Z
Letters and the writers behind them, with real wall photography.
From the build
Films and pictures from inside the The Graphitti Archive website. Swipe through.
Features
- Hand-drawn graffiti display lettering
- “Try a letter” interaction
- A–Z structure of letters and writers
- Mobile menu
Look and feel
Charcoal black, chalk white and acid yellow, with a hand-drawn marker typeface and a monospaced label style — street culture presented like a museum.
Under the bonnet
- Hand-coded, no framework
- Custom display font
- Phone-first layout
Like everything I build, it’s made from scratch. No page builder, no theme. So it’s quick, it works on phones first, and it’s easy to change later.
