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).

Lines can lead the eye to objects of interest—intentionally and unintentionally. They can also enclose objects, similarly to the way a frame does with a picture. We can think of colored rectangles as made of many one-pixel lines, positioned next to each other. (In the past we have created our desired background through an image of a one-pixel line that we repeated horizontally or vertically.) When we zoom in on a text field that has a shadow, we'll see one-pixel lines with slightly varying colors. We can think of individual letters also as made of lines. For example, the letters E, H, T, F, I, L, X are built entirely of lines, which could allow us to complement them with normal lines with similar visual weight for harmonious results. Electronic clocks also show us the time with line parts that can be read easily in a variety of circumstances, which is an example for great design. Lines don't always need to be straight—we could seek ways to alter them at places that matter. They can be suddenly interrupted or go in an unexpected direction and then return back to create more dynamism. Lines can be used in cartoons to contour characters and objects that we then perceive as real. One-pixel lines made of gradients can swirl and cross themselves in infographics to arrive at the category they represent, leaving an impressive trace.

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.

bit.ly/1aZ7sTZ