Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick Rough.js annotation?
When the story is: explainer highlights, ad concept frames, teaching callouts.
When should I avoid Rough.js annotation?
Skip it in cases like: dense quantitative comparison that needs precise lengths.
Who invented or popularised it?
Rough.js brought controllable sketch rendering to the open web
What does it encode?
imperfect strokes and fills as attention cues
Is it OK in ads?
Yes if one claim is visible at a glance in Meta, Google and retail print; otherwise link to a full figure.
Will a teacher accept it?
Yes for lab reports and poster boards if axes, units and a source line are present.
Rough.js annotation encodes values as imperfect strokes and fills as attention cues. Rough.js brought controllable sketch rendering to the open web.
In reports, ads and assignments it fits explainer highlights, ad concept frames, teaching callouts. Skip it when dense quantitative comparison that needs precise lengths.
Rules
- Rules 1 — Use imperfect strokes and fills as attention cues as one channel, not two.
- Rules 2 — Direct labels beat a distant legend.
- Rules 3 — Do not hide zero. If you break the axis, say so.
- Rules 4 — Colour encodes category or magnitude, not both.
- Rules 5 — Put the claim in the title, not just "Rough.js annotation".
- Rules 6 — Source and period, even in small type.
Palette
- Palette 1 — Categories: distinct hues. Sequences: one hue, changing value.
- Palette 2 — Diverging: a neutral centre, emphasis at both ends.
- Palette 3 — One brand colour plus greys beats a rainbow.
- Palette 4 — Check contrast on a projector and in greyscale print.
Type
- Type 1 — Tabular figures for numbers. Do not pour body copy into the chart.
- Type 2 — Titles as sentences; axes as short nouns.
- Type 3 — For CJK, drop weight one step and leave tracking.
Rough.js annotation: honour imperfect strokes and fills as attention cues, and switch when dense quantitative comparison that needs precise lengths.