Analysis of The Atlantic Magazine

Fundamental principles of typography

Jessica Lai
7 min readAug 31, 2021

C mini|2021

Project Brief–

Consider how the Atlantic uses design strategies such as grid structure, typography, pacing, and hierarchy to achieve an identity that appeals to its audience’s personas. After understanding the visual system, develop a succinct presentation about our team’s discoveries.

Initial Background Research–

Flipping through the physical copy of The Atlantic, our first observation was the extensive use of serif fonts that contributed the the classy and elegant style. After reading a few articles, I also noticed that they tend to be politically involved with a progressive pov and also touches on topics on race, culture, tech, and education. Looking back at their literary history, I was surprised to learn that they have published many works of Mark Twain, Ernest Hemingway, as well as Dr. Martin Luther King Jr’s defense of civil disobedience, “Letter from Birmingham Jail”.

I also Looked into the drastic changes in their logo, though all of them are in serif, each version aligns with the popular designs style from that era, for example, maximalism in the 1800s. Since the logo both represents the Atlantic and is the first thing the reader sees, it needs to incorporate the publication’s brand. The serif typesetting implies credibility and refinement, reminding us of the Atlantic’s long literary history. The fact that the logo is constantly changing implies The Atlantic is progressive because it is responsive to new information and opinions in the world.

Demographics –

That target audience of the Atlantic has been consistay college-educated liberal readers over the years. As of 2021, the Atlantic has about seven hundred fifty thousand active subscribers across all platforms, while the majority of subscribers and non-subscribers use the website. The average demographics between print and online are similar, with audiences being very close to 50/50 in both formats, and average readers being about the same age, about 45 online and 50 in print.

Analyzing Print–

sticky note and white boarding

When we first started putting sticky notes on the white board, I started to quickly jot down the physical attributes and structural design choices of the Atlantic.

  • Matted gray thin paper with a newspaper like quality.
  • Thin and justified gutters in between columns.
  • Small leading and kerning in the body text.
  • small type size (around 10 pt)
  • Portrait Photography for narrative stories.
  • 4/3 columns in each article.
  • text based with minimal ads.
  • majority of text in serif.

Compared to Web–

Overall, the Atlantic kept web and print designs very consistent with many similar qualities such as the refinement and credibility. However, since the target audience is slightly different, the web version tends to grab reader’s attention by creating more simplistic layouts with more graphical elements.

Grid–

With the help of figma frames and ruler guides, I was able to find the grid structure through simple but tedious work. The hardest part was figuring out gutter size — adding the grids one by one, I ended up with a 27 grid and realized I had gone too far.

After this long process, I concluded that the Atlantic uses a 12, 10, or 11 grid system based on the story and what category it belongs to. Odd number grids creates variation and visual intrigue, but also groups sections of the magazine together based by story.

Their willingness to break predictable format implies thinking outside convention, which progressive media often requires.

Graphics –

Mostly in service to pacing , The Atlantic uses graphics as an aid to the content, which always has top priority. In text-based articles, graphics/photos are used sparingly and thoughtfully, with narrative photos that help support the narrative. Majority of graphics and illustrations are framed so that they didn’t go off the edge of the page. Even with large and bold placements, the graphics would still have a frame around it, which allows you to focus more on the image itself. The primary job of the graphics is to ensure that the reading experience was vibrant, interesting, and less interrupted. The measured placement of these negative and positive spaces makes the publications feel very refined.

Typography–

On a macro level, The Atlantic features a high ratio of text to images, with body copy always set in serif font, no matter the format of the media.

Typeface

  • Titles area commissioned type called the Atlantic Condensed, it allows you to fit more type onto the page and is generally used in its capitalized form — which means that you can easily signal that something’s important. It is a serif typeface, also known as a “Scotch” face, which is an extremely legible, classical kind of typography, but also transmits a certain kind of urgency that works nicely for contemporary purposes.
  • Body text is always set in serif font in both print and web, which shows Credibility because serif texts are reminiscent of when serif font was the only available style in old magazines. Serif typefaces are also Elegant as they are associated with longstanding and highly-regarded newspapers and magazines, and the Atlantic is one of those publications

Type Placement

  • In print, the small kerning and leading helps the reader to read at a faster pace.
  • Print also uses justification for to create order and a refined look. But web abstains from justification to be current — justification is hard to read on a screen, so ensuring digital readability assures readers the publication is up to date with modern needs

Pacing–

Since the Atlantic is dense, pacing is balenced with strategic image placement and splash title pages with lots of white space or photographic/illustrative elements, ensuring that the type is interrupted as little as possible, and that when it is interrupted by imagery, the imagery is contained within its own space.

Thesis–

As a long-standing and highly regarded publication, The Atlantic primartly delivers content though a visual design that communicates:

  • Relevance — attentive to modern culture and society
  • Credibility — a trustworthy source to consult about the state of the world
  • Elegance — refined and understated style

Draft Presentation 1–

progress

With a rushed presentation and almost no rehearsal opportunities, our group went over time by a margin (13 min).

Feedback 1–

In conclusion, a couple things we need to change in the future are…

  • To condense information — consider what’s important and what’s not.
  • To clarify what it is you’re talking about and tie points to the thesis more.
  • To ask what do we actually need to know to understand the Atlantic? What do we actually need to know to understand how the Atlantic embodies the adjectives we selected?
  • To slow down the delivery of content
  • To raise energy of the body of the presentation
  • To show, don’t tell — use more splash pages, full-page graphics to show a more of a macro view for context.
  • To eliminate graphs/numbers and replace them with pages that encapsulate the data in question.
  • To clarify visuals — the pages are hard to see against the light beige background.

Draft Presentation 2–

  • Reformatted the whole presentation based on the three adjectives and only addressed the strongest and most effective points that supported our thesis.
  • A lot more tweaking that took forever

Feedback 2–

  • minor typography details still need tweaking
  • cut down on grid system section as it tends to drag
  • change the word “typesetting” into “typography”
  • make highlights more clear and coherent
  • adjust the title slides as they tend to be too busy

Presentation–

Conclusions–

For this first c project, I think I really pushed myself to take direction in the visual aspects of the presentation. I’m glad that I learned more Figma shortcuts to be more efficient from my peers as well as asking for more feedback from Yoshi! After staring at The Atlantic’s for so many hours, the publication’s style has definitely influenced me, as I tried to create an aesthetic that fitted their brand but not entirely copied. I also really appreciate my team– Chelsea and Sam– for their work ethic and intelligence. We all out our best effort and grew our friendship with each other as I made sandwiches, sam talked about fanatical creatures and Chelsea provided cat videos.

Not So Successful:

  • Being a not so natural presenter, I do think that my body language, tone, and expressions need more work for the future.
  • More organization and planning at first would definitely have saved more time for us
  • could have updated medium more frequently

Now that I know there are many more presentations waiting for me in the future, I would like to work on my public speaking and be able to mock up presentation slides at a faster pace (more efficiency).

Figma File–

--

--

Jessica Lai

Design + HCI Student at Carnegie Mellon University