Introduction
Hand-drawn stationery for the web. Paper-makers call the fine grain on a sheet its tooth: it is what grips the pencil and what you feel under your fingers. Papertooth brings that feel to a web page, inspired by Japanese stationery.
Writing that looks like it was done by hand, on paper you can almost feel.
Text sits on the dots. Links get a pen underline, a phrase can be picked out with a highlighter, and a word can be circled in red pencil.
Every element has a playground
What is inside
How it works
The CSS works on its own: paper, tape, notes, stamps, forms and every variant are classes and data attributes. A small optional script adds what CSS cannot do: ink textures as SVG filters, shapes drawn at each element's real size, text snapped to the grid, image effects and diagrams. It draws only what is near the screen and goes fully idle afterwards.
Nothing is rotated unless you ask for it. Give any note, stamp, tape, card or photo a --pt-rot to set it at an angle.
Anything drawn can be drawn with any instrument: fountain pen, ballpoint, brush pen, felt marker, graphite or coloured pencil. Put data-tool on it.