The one-pixel line

The line is a very common web design element—one that is also very often underutilized. Lines can serve many purposes, one of which is to divide unrelated content. We see them divide code from explanation, tweets and wall posts, vertical columns of the layout. They underline links to suggest that the text is clickable. Such one-pixel lines can be very subtle, so that they don't contribute to more cognitive burden, but work on a subconscious level instead, which is often exactly what we want from our designs. They satisfy the designer's sense for pixel perfection and maybe even stimulate it. No matter how small this geometric shape is, it has impressive flexibility—it can be solid, dashed, dotted, double etc. It has its own semantic HTML element, which can't be said about other basic geometric shapes (unless we use SVG).

The one-pixel line can also help us align our elements on the page. The guides in Photoshop serve this purpose and can be useful for creating grids. By snapping a layer to a line we are sure of being precise.

Instead of using lines, which seems to require additional elements on the page, designers often prefer using blocks of contrasting colors positioned next to each other, which practically leads to a perception of a dividing line, but one that is achieved with much more eye strain. The subtlety of a one-pixel line will always disappear in the context of large solid-color surrounding blocks. By using lines we leave ourselves room for much more flexibility in how to organize spots that should draw interest. The precise positioning and the subtle shades in our design will then become even more apparent.