Web design and web development are two entirely different things, although a person may be skilled at both. In my experience, though, web designers tend to think more like traditional artists (more free-flowing and “inspired” thoughts), and web developers tend to think more like traditional engineers (more structured and “logical” thoughts). While I think engineers should be able to design, and designers should be able to engineer, it’s not often that I come across someone who is really great at both.
What got me thinking about this? Well, in my recent search for good Wordpress themes, I found some that I generally liked, but was unhappy with the way lists and blockquotes were formatted: the list bullets and quotation marks hung outside the visual line created by the left edge of the text. This is called hanging punctuation, and creates a strong optical alignment that is pleasing to the eye, but de-emphasizes the quote or bulleted text because your eye flows over it so naturally along with the edge of the rest of the text.
Your eye will be drawn to this text because it’s not flush with the edge of the rest of the article.
At first (not having been trained in typography) I thought this hanging punctuation must be the result of engineers who did not understand good design. But then I came across Kevin Tamura’s article: Thoughts on Hanging Bullets. Hanging bullets and other punctuation is proper design for traditional (print) typography. But the Internet has changed things. Those of us who have grown up using the Internet have learned to scan pages rather than read them. We quickly look for the things that stand out most, citing those as the most important elements on the page, and ignore the body copy unless we are interested enough in the elements that stand out.
- You are much more likely to read this bullet point than the preceding or following paragraphs.
By not hanging your punctuation, you create a more scannable (not readable) page by creating contrast for these bulleted lists and pull quotes. This can pique a reader’s interest faster and encourage them to read the rest of the text.