Phase 1 — Collecting perceptual data

Icons deserve optical centering, not geometric.

A research study and CSS property proposal to bring true perceptual centering to the web. Built on human perception data, not bounding-box math.

Take the Study Paper — Coming Soon
Geometric center
→
Optical center

Community

Add your voice.

Think optical centering should be in CSS? Leave a comment and your email to get notified when the open dataset is published.

Thanks! Your comment is submitted and will appear after review.

The Problem

Geometric centering looks off.

When you place an asymmetric icon inside a button using align-items: center, it looks wrong. The visual weight of the shape doesn't match its bounding box. Designers nudge pixels manually. Every time.

Manual pixel nudging

Designers adjust centering by eye on every icon, every button, every component. There is no standard.

Bounding box lies

CSS centers the bounding box, not the visual mass. For a play icon, the geometric center is left of where your eyes expect it.

No CSS primitive

Font metrics have ascender, descender, baseline. Icons have nothing. There is no built-in way to describe where an icon "looks" centered.

The Research

Measuring where people actually look.

We are running a perceptual centering study with real participants. Each person adjusts the position of a shape until it "looks centered" inside a container.

Live Phase 1 — Perceptual Data

Method of Adjustment study. Participants position shapes until they "look centered."

21
Participants
840
Total trials
90%
Quality pass rate
5
Test shapes
6 / 15
Desktop / Mobile
14.5s
Avg trial duration
Take the Study
Planned Phase 2 — Icon Validation

2AFC (two-alternative forced choice) tests on real-world icons from major icon libraries. Model training and validation against human judgments.

Working hypothesis

The perceived center of a shape follows a compressive centroid model:

/* Compressive centroid hypothesis */
perceived_center ≈ centroid(density_map ^ p),  where p < 1

/* Supported by V1 compressive nonlinearity (Moreland & Boynton, 2017) */
/* and contour dominance (Proffitt et al., 1983) */

The study data and raw trial recordings will be published as an open dataset once collection is complete. As far as we know, this will be the first public dataset specifically focused on perceptual centering judgments.

The Proposal

A CSS property for optical centering.

Like font metrics (ascender, descender, baseline), icons should carry intrinsic centering metadata. Computed at build time, applied at runtime.

/* Future CSS */
.icon-button {
  optical-center: auto;
}

/* What the browser would do */
.icon-button {
  optical-center: 2.4px 0.1px; /* x y offset from geometric center */
}

Build-time pipeline

SVG source → Feature extraction → Perceptual model → ocx, ocy metadata → CSS runtime

Stay Updated

Get notified when the dataset drops.

We will email you once when the open dataset and Phase 1 results are published. Nothing else.

No spam. One email when results are out. Unsubscribe anytime.

You are on the list. We will let you know.