About Markup
What this journal is for, how it is made, and what it borrows from the practice of proofing a page.
Markup is a visual journal about the decisions behind communication, interfaces and customer experience. It is written and designed by Jason Walker, and it is built on one proposition: the design is the example, and the markup reveals the thinking.
Why it is called Markup
The word has two useful lives. In editorial and print production, marking up a page is the act of writing instructions onto it: what to change, where, and why, in a shorthand precise enough that another person can act on it without a conversation. In digital work, markup is the layer that says what a piece of content is — a heading, a list, a figure — as distinct from how it happens to look.
Both meanings describe the same instinct, which is the one this journal runs on: that the reasoning behind a piece of work can be made explicit, written down beside it, and handed to somebody else.
What you will not find here is a museum of proofreading symbols. The annotation language on this site is contemporary and it is ours: a cobalt marker, a numbered note, a caret for an insertion, a rule in proofing red for something cut. Where a specific production mark is used with its real meaning — a crop mark describes a trim, a registration mark describes alignment in reproduction — it is used correctly and only where it belongs.
How the pieces are built
There are three formats, and a piece can honestly be more than one of them.
- Visual essay — an argument carried by original artwork as much as by the text.
- Demonstration — a controlled comparison you can drive yourself, where one variable moves at a time.
- Film — a timed sequence with a poster, playback controls and a written equivalent. Silent by default. Where something is a browser animation rather than an exported video, it is labelled as one.
What the site will not do
No piece here carries an invented publication date, a fabricated outcome, a testimonial, or a reader number.
Where a demonstration illustrates a model, it says that it is a model. Perceptual effects like grouping and contrast are well established as descriptions of what people see, which is a much narrower claim than a rule about what a designer should do. Frameworks that are mine are identified as mine.
Colophon
Markup is a static site: semantic HTML, one stylesheet, one small script, and original SVG for nearly all of the artwork. Every headline, every paragraph and every navigation link is in the served HTML and does not depend on JavaScript. The demonstrations are the only things that need it, and each one carries a written equivalent for when it is unavailable or unwanted.
- Display
- Newsreader, by Production Type. Variable optical size 6–72 and weight 200–800, so the masthead and a twelve-pixel folio are drawn from one file at the size each was designed for. SIL Open Font License 1.1.
- Text
- Public Sans, from the United States Web Design System. Variable weight. SIL Open Font License 1.1.
- Notes
- IBM Plex Mono, by IBM. Used for margin notes, folios and production labels. SIL Open Font License 1.1.
- Ink
- #17171B on a warm #FAF7F2 paper. Contrast 16.7 to 1.
- Annotation
- Cobalt #1B3CE0 for the markup layer. Proofing red #B72B18 for corrections and earlier states. Both are reserved: neither is used for ordinary links or interface chrome.
Licences for all three families ship with the site in assets/fonts/.
Contact
Corrections, disagreements and requests are all welcome at [email protected]. If a demonstration on this site claims something a figure does not actually show, that is a defect and I would like to know about it.