Can you imagine reading an article with no margins? On a scale of 1 to 10, how uncomfortable would your experience be?
It’s pretty painful (maybe a 7 or 8, for me) without that cushion of space around the text. But good editorial design goes beyond adequate whitespace to let the content be the star of the show. That’s why the most readable editorial sites are very precise with their presentation. We’ve all seen how editorial sites like to cram a lot onto each page, but designs that pay attention to detail rise above the rest.
Today I’ll show you 25 editorial sites that I think are winners. As we go along, I’ll comment on what specifics really work for them, regardless of the featured content.
Let’s get started!
25 Extremely Readable Editorial Site Designs
Flat UI? Easy to read? Plenty of whitespace? Adequate line spacing? You’ve got it all on this site. You even get to know the estimated reading time in minutes.
Article photos provide the slider backdrop for the homepage, and the photos are featured behind individual articles. The innovative photo placement, ample margins, flat UI, and a simple color scheme make it extraordinarily readable.
3. Vanity Fair (France)
Enough whitespace, yet bursting with content. Flat UI, eclectic fonts, and a classic color scheme make reading (and browsing) a breeze. And your momentum keeps you moving down this one pager.
High-contrast red on grayscale lends itself well to this site with Flat UI and enough room on the edges of the articles and background to let your eyes breathe. Plus Pitchfork has some killer parallax feature articles that are engaging reads.
Let’s take a detour from grayscale-and-red for a moment (but not flat UI) and enjoy touches of aqua, pink and green. Generous margins and efficient lists in the sidebar make reading a pleasure.
Nothing too fancy as far as font and layout goes, but this plain site is readable while making use of space to promote its blogs, additional articles and social sharing.
Making use of the arrow buttons of your usual slider, Newsweek lets you navigate through articles in a novel way. And your reading experience is incredibly undisturbed; as you scroll down your article, only “opinions” and “share” intrude.
In order to not derail your reading experience, the simple layout for the article page features a softer-hued background than the corresponding rollover color on the homepage.
9. Tusk Journal
Delightfully minimal web design with neat organization. Though centered text is rare in online journals, Tusk makes it work with their design and terse content interspersed with images.
10. Fast Company
With eye-catching fonts, bright accents on grayscale (particularly the yellow highlighter) and grayscale promotions in the sidebar, this site grabs your attention and has an appealing design (that makes you not want to leave).
For a site with tons of content on each page, Inc. pulls off an intense juggling act. Most viewed headlines are listed on the side without thumbnails to clutter your vision.
Clean design makes the article text really stand out. Plus the lead paragraph is set in a different font to draw you in from the get-go.
13. Global News
Featuring a sans serif font in the body text that’s very similar to Smashing’s, this site sports plenty of negative space and subdued social sharing buttons.
14. The New Republic
By using 1.5-spacing, this site’s articles leave plenty of room for the reader. The New Republic is similar to Smashing in its complementary orange-blue color scheme, understated flat UI buttons, and abundant margins.
15. USA Today
Like Newsweek, USA Today harnesses our desire to click slider arrows to navigate to new pages and additional articles. While ads in the article are prominent, the popup overlay for the articles is a nice touch for easily going back to the boxy homepage.
16. The Brander
A simple layout with soft pastel background makes for a relaxing read. The articles are especially readable and linear since images are neatly aligned to the right.
Bold and intense like FastCo, Wired’s site keeps you, well, wired. While the homepage has a unique layout, the article layouts are in a fairly predictable pattern. One nice touch is the thin lines to partition the section (which elegantly rounds off if you scroll to the bottom of the page).
18. Time Magazine
Part of this site’s readability comes from its responsive design, but its attention to font sizing is a huge benefit for the headlines and section headings.
19. The Onion
Here we have another responsive site, which also features subtle grey borders in its homepage layout, 1.5-spacing in the article text and plenty of space all around.
Animated ads aside, this newspaper fits tons of useful information in a small space, while also leaving margins (which is a challenge for many newspapers on the internet I visited). Like the Onion, wispy grey lines frame the text nicely.
To showcase the drool-worthy food photos on this site, the layout keeps the text a pleasant size with comfortable line spacing. Plus the content rather linear — especially when listing articles in a given category.
22. Rolling Stone
Once again we see the classic black, white and red color combo, and the design has its own flair. Besides the pleasant ratio of headline-to-article text sizes, the site’s choice of when to use gray or red — rather than standard black text — really anchors your attention.
23. First We Feast
Not only does this site nail a unique style and attitude, but it also offers the most negative space of any site on this list. Reading the articles is fun — above all when a quote is pulled out and showcased.
24. The Next Web
Sleek and efficient, this site allows the left sidebar to be scrolled independently of the main content, which helped my reading and browsing focus. The stuff you came for — the headlines, text, images — takes center stage (and that orange “next” button just begs to be clicked).
Thanks to its striking black background and red accents, Salon’s site is crisp and provides a good design for its content. Despite many images in the right sidebar, the design’s clear navigation and straightforward sticky bar make the overall design neat.
Improving Editorial Sites
For me, the most frustrating part of any editorial site is the advertising (which I mentioned only a couple times in my list, but are distracting in more in the list and around the web). I’d like to see a better way to incorporate ads, and I think we can brainstorm many creative solutions.
What do you want to see changed in editorial sites? Does reading gray text on a white background drive you crazy? Can you stand thumbnail overload?
Share your ideas, and together we can be a voice for better, more readable design in our editorial outlets 😀