Field Notes: The National’s basics

1. Cutline: Line or block of type providing descriptive information about a photo.

For their cutlines, The National uses bold sans serif type slightly smaller than the story’s text. The typeface matches the one used for headlines and other information that is not part of the story. This works because the description of the photo doesn’t get confused with the story, it is still readable and discrete, and matches the overall style of the newspaper.

2. Sidebar: Small story accompanying a bigger story on the same topic.

Sidebars on The National are designed to fit and blend with the overall style of the newspaper. They use only different shades of the blue and lilac – the colors of their brand – for the news and business section. For the sports they use shades of green and for entertainment shades of teal and blue. This works because the paper looks clean and coherent; each section can be easily identified and the sidebars go along with that (it would be wrong, for instance, if the sidebars where always blue and lilac no matter the section of the paper). The colors are carefully selected to match without too much contrast and to differentiate the sidebar’s head from its story. This makes the sidebar look more dynamic and interesting than having just a box with plain background color with the text in it.

Additionally to the color scheme selected for the sidebars, the typeface is changed to a sans serif, again matching the style of the paper differentiating the story from everything else.

3. Teasers & promos: An eye-catching graphic element, on Page One or section fronts that promotes an item inside.

The National’s teasers are very conservative. They are defined by the six-column grid and labeled with a constant sig: navy rectangle with the word “inside” in white, bold, sans serif typeface. This works because it’s easy to identify this section and learn what can be found inside. However it’s not eye-catching.

Never the less, The National also uses skyboxes to promote other stories from the current issue. They use one, two or three rectangle boxes with a photo. A semi-transparent box where a sentence describes the story and the page/section indication covers half of the photo. This works because the story is highlighted and it really is a teaser; it leaves the readers wanting to know more.

4. Folios: Type at the top of an inside page giving the newspaper’s name, date and page number.

The National’s folios are simple and very clean. They rest on top of the page indicating the page number in a big font followed by the full date and their website. The use of a sans serif type makes it very coherent with the overall style of the newspaper.

Just on page two and three, they use the whole top bar to indicate the page number. They spell “page two” and “page three” with big type and colored background. I think this works just because it gives the newspaper personality; the design is very fresh, clean and well done. Sadly, on the rest of the pages the top bar is used for additional news information and not for the folios.

While it looks great on the first two pages, the fact that they don’t continue this style on the rest of the paper makes it confusing. It seems random or like they didn’t have anything to put on those top bars. For consistency and coherence, it would work best if they decide a specific use for the top bars throughout the whole newspaper.

5. Reverses: A printing technique that creates white type on a dark background.

The National uses this technique quite often, especially for sigs. It works because the rest of the section flags and most of the sidebars use a color background with a darker text on top of it. Using reverses makes the design less color-busy and clean.

6. Pull quotes or liftout quotes: The graphic treatment of a quotation taken from a story.

The National clearly identifies pull quotes throughout its pages by using a blown out single opening quotation mark on top of the block of text that is the quotation. This works because the readers can easily identify a pull quote and differentiate it from a subhead or a sig. This way, the readers can understand the structure of the article.

The text of the quote follows on the next line. It is depicted significantly larger than the story’s text but not larger than the headline, the typeface changes to an italic sans serif and the color to a light blue. These decisions help create a sense of hierarchy throughout the publication. The color selection matches that of the paper’s flag, thus creating consistency and fomenting their brand.

Something particular about The National’s pull-quotes design is that they don’t continue the story underneath the quote. In other words, the pull quote might have part of the story on top but not underneath. I’m not convinced that this works because it creates a whitespace on that column that disrupts the flow of the reading and the overall design of the paper. It’s enough to use a different typeface, font and color to highlight pull quotes, there’s no real need to add whitespace underneath it.

7. Jump lines & continuation lines

a. Continuation line: Type telling the reader that a story continues on another page.

The National’s continuation lines are very smooth. They are separated from the story text by a line and indicate the keyword that the readers must find on the continuing page to follow the story. They use a sans serif type to differentiate this text from the story’s and bold font for the keyword and the page number. After the text, a small black arrow points away indicating that the rest of the story is inside; this makes the design look modern and more dynamic. This works because the readers can easily identify that this sentence is not part of the story and at the same time they can easily understand where the story continues.

b. Jump line: Type telling the reader that a story is continued from another page.

The jump lines in The National follow the same style as the continuation lines; the only thing that changes is the arrow. Now this graphic element is placed before the text indicating that the story comes from a previous page. Again, this works by making the design more dynamic and fresh. The only thing that could be improved would be to add an extra space between the text and the arrow because there’s a little bit of visual tension between the two.

8. Nameplates (flag): The name of a newspaper as it’s displayed on Page One.

The National’s nameplate is very similar to The Guardian’s. They use a sans serif typeface, they put both words together into a single word (thenational), and they use two colors to differentiate the words (The in lilac and National in navy). Even though the layout is similar to that of The Guardian’s, the nameplate works because by using a sans serif type and cool colors, it gives a fresh and modern look to the paper’s style.

9. Wraps/skews: Text that wraps around a photo or artwork.

Looking at several issues of The National, I can tell that they are very loyal to their grid system (which can also be confirmed by their design of pull quotes). In none of the issues I looked at they do any type of wraps. The images fit perfectly into the six-column grid and take a specific geometric rectangle or square shape. This works because it maintains consistency throughout the pages and makes it more coherent. However, they are loosing an opportunity to be more dynamic and visually appealing to their readers.

10. Logos/sigs/bugs: Small standing head that labels a regularly appearing column or feature stylized in a graphic way.

There are a few constant columns on The National; “Letter to the editor” and “Arabic news digest,” for example. For this sigs they use a similar style to the section flags only more discrete. They use different shades of lilac for the background color and a contrasting color that fits their scheme for the type. As usual on The National, they use sans serif type so that there’s a difference between the story texts.

This design works because it’s easy to identify the regular sections in the paper. The sig covers all the top of the columns where the Arabic news digest is, for example, making an invisible box around those columns. This helps the readers understand where the section ends and begins.

– Veronica Magan

All definitions taken from The Newspaper Designer’s Handbook’s glossary: