The Grain of the Screen: Why Digital Surfaces Should Remember Paper

There’s a particular quality to printed matter that screens abandoned early. Not the smell of ink or the weight of a page — those are sensory, irreproducible. What’s reproducible is the texture: the way light scatters off an uncoated stock, the micro-variations in ink density that make every letter slightly, imperceptibly different from the last.

We lost this when we moved to screens. The first web browsers rendered text as system bitmaps — which, ironically, had more texture than today’s subpixel-hinted vector rendering. We traded warmth for precision. The pixel grid is mercilessly uniform. Every instance of the letter ‘e’ is identical — not approximately identical, but memcpy-identical, bit-for-bit. This is, in one sense, a triumph of engineering. In another sense, it’s the visual equivalent of a room with no air currents.

What I want to argue here is that the flatness of screens is not a constraint we must accept. It’s a default we can override — and that the tools for doing so already exist in the CSS specification, waiting to be used. The personal web has always been a place for experiments in texture and form. When websites converged on the same templates and frameworks, something essential was lost: the feeling that a site was made by a person, not generated by a process.

The Riso Metaphor #

Risograph printing is having a moment, and not just because of its economics. A riso print layers single-color ink passes on top of each other, with slight misregistration between layers. The result has a warmth that offset printing smooths away — you can see the process in the output.

The soy-based inks absorb into uncoated paper differently than petroleum inks on coated stock. Riso Kagaku Corporation developed these inks in the 1980s primarily for environmental properties. The aesthetic qualities were a happy accident that artists have since exploited deliberately. Each layer bleeds slightly. Colors mix on the page rather than in a press. The slight misregistration means that two-color prints have a visible margin of error — and that error is beautiful.

Every print is slightly different. The beauty of Risograph printing is in its texture, irregularity, and the overprints created when two inks overlap one another.

The zine as a form has always embraced these accidents. A photocopied zine is a document that wears its production process visibly — the toner streaks, the slightly crooked alignment, the way dark areas crush to black and light areas blow out to white. These are not defects. They are the voice of the medium.

Implementing Grain in CSS #

The CSS analog of riso texture is remarkably straightforward. An SVG feTurbulence filter generates procedural Perlin noise, which you layer as a pseudo-element over your background. The technique was popularized by Jimmy Chion on CSS-Tricks and refined by Ana Tudor:

/* Paper grain overlay — zero image payload */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,...");
  background-size: 180px;
}

The critical parameters in the SVG filter are baseFrequency (controls grain coarseness — 0.65–0.8 for paper-like texture) and numOctaves (detail layers — 3–4 is sufficient). Higher values burn CPU cycles without visible improvement. The blend mode matters: multiply for light backgrounds darkens the grain into the paper; overlay for dark backgrounds creates a subtle light-noise effect.

The dot grid background #

Layering a CSS dot-grid underneath the grain creates the graph-paper feel of a technical manual. A single radial-gradient declaration handles this:

body {
  background-image: radial-gradient(
    circle,
    var(--border) 0.5px,
    transparent 0.5px
  );
  background-size: 18px 18px;
}

The dot-grid fades naturally under the grain overlay, producing a composite texture that reads as “paper” rather than “CSS trick.” On dark mode, the dots take on the border color of the dark theme — visible but not distracting.

Type as Texture #

The other half of the equation is typography — not just font choice, but font behavior. The NASA Graphics Standards Manual of 1975 specified Helvetica for virtually everything. The manual, designed by Danne & Blackburn, was reissued via Kickstarter in 2015 by Jesse Reed and Hamish Smyth. It specified Pantone 179 red as the sole accent color — radical restraint that gives the system its power. That radical constraint — one typeface family, one color — forced the hierarchy to emerge from weight, size, and spatial relationships alone.

For a personal website, we have more freedom but should exercise similar discipline. The IBM Plex superfamily provides the same constraint-as-feature: Sans for headings and structural labels, Serif for body reading, Mono for code and metadata. Three voices from one design DNA — the slab-serif influence and right-angle interior counters create visual coherence across all three.

Variable axes and typographic texture #

Consider what happens when you push a variable font across a single page’s hierarchy:

• Weight contrast creates visual texture — thin captions against bold headings generate rhythm
• Optical sizing adjusts stroke contrast for the rendering size, maintaining readability
• The overall impression shifts from “digital font” to something more considered and hand-set
• Monospace used for structural elements (dates, tags, nav) exposes the construction — you can see how the page is built

In a world where AI-generated text proliferates, the physical qualities of the letters themselves become a signal of authorship. A site set in system-ui says “generated.” A site with considered typographic choices says “made.”

The Design Token Layer #

If you accept the premise — that texture and typographic personality are desirable — then the implementation question becomes: where does this live in the codebase?

In a token-based design system, the answer is surprisingly clean. The grain overlay is a single ::after pseudo-element on body. The font stacks are CSS custom properties that cascade. The color palette uses oklch for perceptual uniformity, which means you can adjust chroma without breaking contrast ratios.

The entire visual overhaul — grain, type axes, palette shift — can be expressed as a change to tokens.css and prose.css. The architecture doesn’t need to change. The surface does. This is perhaps the strongest argument for a token-based approach to design systems: when the time comes to evolve, you’re editing values, not structure. The grid stays. The component hierarchy stays. The sidenote mechanism stays.

What changes is the color of the ink, the texture of the paper, and the character of the type — which is to say, everything that matters visually, and nothing that matters architecturally. The design token layer is the boundary between identity and infrastructure.

Cybernetic Systems and Feedback #

Stafford Beer’s Viable System Model describes how any viable organization contains five interacting subsystems — each recursive, each containing smaller copies of itself. Beer’s VSM diagrams use organic, amorphous shapes rather than rigid boxes — ellipses for operations, flowing arrows for information channels. The visual language resists the tyranny of the rectangle. The web has its own viable system: the relationship between content, presentation, and the reader’s attention.

Gregory Bateson wrote that the pattern which connects is a “metapattern” — a pattern of patterns. On the personal web, this metapattern is the relationship between what you write and how it appears. When the presentation carries personality — grain, structure, typographic quirks — the writing is read differently. It arrives in a context that says: a person made this, and they cared about how you’d encounter it.

The personal web at its best is a didactic medium. Not didactic in the lecturing sense, but in the original Greek: didaktikos, “apt at teaching.” A site that teaches not just through its content but through its form — where the design itself is an argument about care, attention, and the value of imperfection in a world converging on smoothness.