Have you ever been waiting for that overpriced latte and found yourself inexplicably drawn to the newspaper rack, skimming the front page of the New York Times or the Wall Street Journal?
It’s Not Salacious Headlines That Grab Our Attention—It’s the Layout and Type
Newspapers use a modular design—series of rectangles—bold fonts and visuals to keep readers’ eyes moving. It’s been so successful that almost all modern websites have adopted similar tactics, including the blog you’re reading. To illustrate the trend, I have chosen to dissect my hometown paper, the Hartford Courant, a run of the mill paper if there ever was one, despite its claim to fame as being the country’s oldest continuously published paper.
We’ll take a look at the Courant’s front page and website. You may be surprised how your designs can be improved by adopting newspaper strategies as guidelines for your projects.
The first thing that struck me when looking at the front page of the Courant is the weight of the headlines—the boldest font doesn’t belong to the main story. It belongs to the top right and bottom left stories, making them stand out and acting as an entry point for the eyes.
In an interesting contrast, the Courant doesn’t use bold font for its lead story headline or the headline of the bottom right story, which creates an aesthetically interesting contrast with the bold headlines in the image above. Newspapers use these asymmetrical imbalanced features and layouts to separate stories and help create a visual hierarchy.
In another interesting contrast, the Courant also uses an all-caps headline for its primary visual. So, above the fold, the newspaper is using three different headline fonts, each headline is different. This is a textbook tactic, according to Rebecca Hagen and Kim Golombisky in White Space is Not Your Enemy, “Varying the size of headlines gives a sense of visual hierarchy to even the most text-heavy layouts.”
Newspapers also use columns to make reading the stories a more appealing task. This combined with short paragraphs—never more than three sentences, usually one—makes reading the body copy digestible.
Visuals are necessary. People are obsessed with pictures—look no further than the popularity of Instagram and other social media platforms—a rule of thumb for newspapers is a third of the page should be visuals. Our example, the Courant, does this and also has the direction of the image directing the eye toward the page. This is ideal because an image that guides the eye off the page becomes a layout obstacle.
Visuals combined with columns of text and varying headlines make newspapers inviting to read and should be considered for any text-heavy layout.
Newspapers’ layout uses grids, usually a large grid for the spread and smaller grids within blocks—this is the modular design in practice. Our sample uses four columns above the fold. The main story occupies three of the columns, and the secondary story takes the last column. The visual and accompanying text span three columns but uses only a single column of text. This exemplifies the versatility of grid layouts: there are numerous different visually interesting ways a designer can display his or her blocks.
The modular, asymmetrical layout and varying headlines make the Courant front page pleasing to look at. All of this is accomplished with little color, not including images. It uses only three colors and two of the colors, red and yellow, are only used once at the very top of the paper. The pleasing look only requires a blue accent color, a little red in the logo and yellow for the weather icon.
Let’s Compare the Courant’s Homepage
Not surprisingly, the homepage for the same date has different stories, a product of the twenty-four-hour news cycle. The homepage uses a grid layout as well—remember most modern website frameworks use grids because they can easily be made responsive (look good on mobile devices). The grid used is simpler and less visually interesting, but the trend of websites is uniformity and a single stream of content to encourage scrolling – mimicking social media platforms.
Pardon my digression, the homepage has a large headline story on the left and sidebar on the right with links to other breaking news stories.
One of the first things that I noticed looking at the website was the main story headline uses a serif font, which is usually a no-no for screens. It is easier to read serif fonts or fonts with ‘feet’ and ‘hats’ as it was once described to me.
I was taught as a general rule to use sans serif fonts or fonts without serifs (or ‘feet’ if you will) for headlines and to pair it with a serif font for the body because it is easy for eyes to read.
As you scroll the homepage, it is very similar to the look under the fold of the print front page, where there’s a section of additional stories and the pages where they can be found.
The Courant is a good example of how newspapers have adopted similar layouts for their websites, using tactics to present information in a way that is not going to scare off readers. It’s clean and professional looking if unexciting.
Do yourself a favor the next time you’re working on an information-dense design project and consult your local paper for layout ideas. You’ll be pleasantly surprised because they have lots to teach us.
References
Hagen, R., & Golombisky, K. (2017). Layout: Where to put visuals & type for impact. White space is not your enemy: A beginner’s guide to communicating visually through graphic, web & multimedia design
(Third ed., pp. 65-86). Boca Raton, FL: CRC Press.
MW-Comm Blog 