Introduction to Typography

Overview of The Atlantic in print and online

Chelsea, Jessica and I will be analyzing The Atlantic magazine. Since I ended up being the “print and web” person, we decided I could tackle the more macro view of the whole publication (ie the lines between print and online), while Chelsea and Jessica each took a more micro view at the online and print forms of The Atlantic.

I was vaguely familiar with The Atlantic before this project; I’ve seen it around in libraries and on people’s coffee tables, but flipping through the magazine and jotting down some notes in my sketchbook provided a lot more information about what kind of publication it is:

To summarize my notes:

First off, it was far more dense than I expected it to be — in the print magazine, there’s very little white space on most pages, and the typesetting is very small, probably only eleven point. There’s also only a limited presence of graphics (with the exception of a photo essay in the middle of the issue), and it seemed like most of the photos were very narrative-driven, if they served any purpose at all besides presumably spacing, like this strange meat-eyed smiley face on this op-ed.

I’m not particularly knowledgeable in how grid structures function, but we did notice that every column in the grid was used at some point — the column structure varied greatly between certain articles, and sometimes images in articles didn’t snap to the columns, but rather sat butting into columns of text.

I was pretty surprised how much The Atlantic website differed from the print version. From the get-go, the text is far bigger on screen and the layout is far less dense, even with much larger leading. There’s also much more white space, with only one column of text in each article flanked by two large white spaces (I’d assume this is for readability on a screen, since you don’t really have the ability to progress horizontally across a page online like you do in print).

Another significant difference is in how you navigate the website — for print, you just flip through the magazine, or use the table of contents at the beginning to reference specific articles and sections. Online, however, you navigate more by clicking through the “related articles” sidebar that appears somewhere halfway down an article, or at the bottom of the page when you finish reading. It’s almost more like a social media page, exploring content on a more one-off basis than as a curated collection of pieces. All of it combined gives the effect of a much more quickly-paced read online.

To come up with some theories as to why The Atlantic is laid out as such, we took a look into the history of the publication. I listed out some of what seemed were the most prominent graphic features to keep in mind:

Knowing The Atlantic has always been a very journal-like liberal publication was enlightening, and it started helping us form our ideas. With that, and working with the magazine and website open, I started to summarize a list of adjectives that articulated the vibe that all of The Atlantic’s graphic choices were working towards so we could put a thesis or sorts into words, and I ended up coming up with a large list: refined, current, highbrow, elegant, credible, educated, and progressive.

This was about the point when Chelsea and Jessica had finished their in-depth analysis of the website and the magazine, respectively, so we started looking at the gathered evidence in order to get my disparate observations into an evidence-driven thesis.

Thus began the narrowing. Education ended up going because it was the same thing I was trying to articulate with progressive, meaning someone who keeps up with current events (and just about anyone who actually does understand and keep up with current events that I’ve ever met has, sort of by virtue of taking the time to understand the perspective of unfamiliar experiences, leaned politically left). The Atlantic thrives on sharing stories of other people’s perspectives, though, so I knew I wanted to hold onto progressive, or some variation of it.

Highbrow and elegant both went because they fell under the definition of refined I was working with, meaning more thought-provoking than infotainment, and intending to be read and digested slowly rather than how you’d process a quick news update.

Doing this, the list became as such:

• Refined: highly curated with thought-provoking media, not just any old story you’d be able to find online or in a tabloid (can see this in the careful and dense typesetting, thoughtful use of images, etc.)
• Current: focusing the social and cultural implications politics, art, and science have on the modern world (can see this in their constant evolution of their logo and style in order to stay current, adaptation to an online media as early as 1995 as they anticipated the upcoming importance of the internet, willingness to deviate in style between print and online to make the most of both medias, use of big splash pages and illustrations to remind us they’re no longer the text-only journal they once were, etc.)
• Credible: the information they contain is correct and any opinions on it well-considered; it should stand up if you brought it up in a debate (can see pretty much anytime they use graphics/typesetting to remind us of their long history as a credible source, such as the heavy use of serif fonts in the typography, the use of justified columns in the print media, the clean design and lack of ads on their website, etc.)
• Progressive: politically liberal (this primarily appears in the content and titles of the pieces themselves, but also appears in the layout and graphics, as you can see how the creative use of the grid sometimes appears to be literally “outside the box” reflecting the publication’s willingness to consider things outside held convention)

We didn’t explicitly have to use adjectives as our thesis, but as I worked with the information we had, I realized that most of what we were talking about was orbiting the idea that The Atlantic has a very consistent message they want communicated by their visual theme. Defining that message with adjectives seemed the clearest way of articulating it.

So, we set up our initial draft with some contextual information to give people a vibe on what The Atlantic is (and therefore why it might be styled the way it is), along with a loose outline of the thesis and how pretty much every individual piece of evidence supported it. However, that ended up being a lot of information to try to put in one slideshow, and in consequence our draft presentation ended up being long and rambling, a sentiment which was also reflected in the comments we received in feedback. So, we met back up again and realized a) we were giving too much evidence and b) our thesis was not quite clear enough, both of which resulted in the longwinded nature of our draft. So, we started to prune down what evidence would best articulate The Atlantic’s theme, as well as figure out a more succinct way to define it. This is the point where I completely restructured the informational layout of the presentation.

First major change was the thesis; I would have liked to more carefully examined which visual systems were creating the overall theme of The Atlantic to create a more nuanced thesis. But, partially due to time constraints and partially due to the desire to make sure everyone’s research was highlighted (i.e. the tendency to include as much of the research as possible while equally balancing focus on web and print), we ended up sticking to adjectives, albeit a more refined and concise collection. After reviewing all the research we had on print and online, we came up with:

• Relevant: a step up, we felt, from current, since The Atlantic focuses not only on current events but also past ones (our print magazine issue had a feature article on 9/11), so long as they’re politically relevant. The elements of the design that keep The Atlantic looking current, like the use of white space and the constantly-updated logo, speak to this.
• Credible: pretty much the same as last time; The Atlantic takes great pains to ensure they’re the sort of thing you could bring up in a political debate. The careful layout and callbacks to their long history in print, such as their use of serif font and column structure, speaks to this.
• Elegant: we brought back elegant when we realized that our draft 1 presentation was focusing probably a little too much on content and not enough of the actual design and what effect it was achieving. The term “elegant” seemed to encapsulate the refined and understated nature the magazine and website shoots for within the measured placement of images, text, and white space.

The second major change was the structure, which went from containing every single observation grouped into large umbrella categories of “visual systems” and “content”, to three subsections detailing the main visual mechanisms: the pacing, the grid system, and the typography. Within these, we decided to cut down to just what we felt were the most important design elements to creating the thesis, which ended up centering on the use of images and white space to create pacing, the consistency within the grid system and its use, and the use of primarily serif fonts (with some sans serif thrown in online to keep things current) in the typography.

With that, we all cut down and condensed the information we were covering in each section, and after a bit of rehearsal got it down to the final presentation!

TAKEAWAYS

While I feel I learned quite a bit just from the making of our presentation, it was also illuminating to see all the other groups’ presentations to be able to compare and contrast the way the most universal parts of magazine layout, like the grid, typography, and use of images and white space, can create such a different vibe from publication to publication. But, to summarize, I think the most valuable things to me ended up being as follows:

• I learned quite a bit about grids — I must admit I came into this project knowing very little. Case in point, I didn’t know that the columns of text aren’t necessarily the columns of the grid! The more you know. In any case, I feel like I have a better handle on how to identify them as well as a better fundamental understanding as to why they’re important and how they can organize images and text.
• The visual choices that go into making the layout of the magazine are extremely minute, but can cause drastic differences in how the magazine is perceived. (Even image placement can do a lot for how a page feels.)

And, with that, we’re onto the next project!