Hairlines carry more than they look like they do

One hex, two jobs

A border at one pixel is an elevation step, not an ink line. Where the two get confused, a page starts to look wired together instead of built: every element outlined, nothing grouped.

Reach for a surface change before a line, and for a line before a shadow. A page built that way stays quiet at small sizes, which is where most reading happens.

Inside a band

A border at one pixel is an elevation step, not an ink line. Where the two get confused, a page starts to look wired together instead of built: every element outlined, nothing grouped.

Reach for a surface change before a line, and for a line before a shadow. A page built that way stays quiet at small sizes, which is where most reading happens.

Where it goes wrong

A border at one pixel is an elevation step, not an ink line. Where the two get confused, a page starts to look wired together instead of built: every element outlined, nothing grouped.

Reach for a surface change before a line, and for a line before a shadow. A page built that way stays quiet at small sizes, which is where most reading happens.

The pacing rule

A border at one pixel is an elevation step, not an ink line. Where the two get confused, a page starts to look wired together instead of built: every element outlined, nothing grouped.

Reach for a surface change before a line, and for a line before a shadow. A page built that way stays quiet at small sizes, which is where most reading happens.

What to do instead

A border at one pixel is an elevation step, not an ink line. Where the two get confused, a page starts to look wired together instead of built: every element outlined, nothing grouped.

Reach for a surface change before a line, and for a line before a shadow. A page built that way stays quiet at small sizes, which is where most reading happens.