Key takeaways
- A publication’s homepage has to show many stories and make one of them irresistible. The best ones choose a clear lead and keep everything else quieter.
- Typography is the brand. Several magazines in the gallery are recognisable from their typeface alone.
- Reading pages matter more than the homepage. Most readers arrive on an article, not the front page.
- Keep body text in a comfortable column. Baymard Institute recommends 50 to 75 characters per line.
- Decide how much you are a newspaper and how much a cover. Both work; mixing them halfway does not.
Magazine and blog websites have the oldest design tradition of any site type. They inherited centuries of print typography, and the best of them still use it. They also face a problem print never had: the reader can leave in one click, and most of them arrive through a single article rather than the front cover.
The magazine gallery on HTML Inspiration collects ten publications, from The New Yorker to small independent titles. This article looks at what they do well and what you can borrow for your own publication or blog. It belongs to the guide to website design inspiration by type.
Two kinds of homepage: the index and the cover
Publication homepages fall into two families. The index shows as many stories as it can, organised so that the reader can scan. The cover shows one story or one idea, as a printed cover does, and invites the reader in.
WIRED is a clear index. It uses a dense, multi-column layout with a strong lead story in the centre and narrow columns of headlines on each side, each labelled with a small kicker in capitals. There is a lot on the screen, but the hierarchy holds because the lead is clearly larger than everything else.
Exhibition Magazine is a clear cover. Its masthead runs edge to edge in tall condensed capitals over a full-bleed fashion photograph, closer to a lookbook than a news site. Assemble Papers, an Australian title on cities and culture, does the same with words: one series name in huge white type over an earthy texture, with a single line of context.
Most publications sit somewhere between. Hunger puts a large cover star on the left and smaller stories on the right, like a print magazine opened flat on a table. Vessel Magazine, from Norway, uses a large lead image and a tidy column of smaller stories, with the issue number in the header as it would appear on a printed cover.
The lesson is to decide which you are. A news site that publishes many times a day needs an index. A title that publishes a few strong pieces a month can be a cover. Halfway designs, with a huge hero image and then a cramped list of twenty headlines, usually serve neither purpose.
Typography is the identity
No other site type depends so much on type. The New Yorker is recognisable from typography alone: its Caslon typeface, plenty of white space and a lead story built around a photograph and a pull quote. Scandinavian MIND uses serif type to give a design and lifestyle publication a quiet, considered tone. Discover pairs condensed headings with a plain sans for body text, which keeps a science news site readable.
When you choose type for a publication, choose for the article page first. The headline face can carry personality, but the body face has to be comfortable over two thousand words on a phone. Then decide how the two relate: a dramatic headline face with a quiet text face is a classic, safe pairing.
Make the lead story obvious
Every homepage needs a lead, and the reader should be able to find it in a fraction of a second. The tools are the usual ones: size, position and contrast. On WIRED, the lead sits in the middle column and is bigger than anything else. On Hunger, it takes the whole left half. On Discover, the lead is a single strong image, followed by “Today’s top stories” grouped by subject.
A useful exercise is to ask what happens when the lead story is weak, which it will be some days. A layout that depends on a spectacular photograph every day will look empty on a quiet news day. Layouts like Vessel’s, where the lead is larger but the system around it is calm, cope better.
Design the article page first
Most readers never see your homepage. They arrive from search, a newsletter or a link, directly on an article. That page has to do three jobs: make the text comfortable to read, show who wrote it and when, and offer a next article.
The most important decision is the measure, the length of a line of text. Baymard Institute’s research recommends 50 to 75 characters per line for body text. Lines much longer than that make it hard to find the start of the next line; much shorter, and the eye jumps too often. On a wide screen this means a column well narrower than the window, with images allowed to break out of it.
Other details that separate good reading pages from average ones:
- Generous line spacing for body text, usually around one and a half times the font size.
- A clear byline and date, close to the headline, because readers use them to judge trust.
- Headings that summarise, so a scanning reader can follow the argument.
- Pull quotes and images used as pauses, not as decoration every three paragraphs.
- One clear next step at the end: a related article, the newsletter or the section the article belongs to.
Dark mode for reading
Long-form reading is the one area where dark mode has a clear place. Nielsen Norman Group’s review of the research found that most people read better with dark text on a light background, but it specifically recommends offering dark mode in reading-heavy products such as magazines and news sites, because some readers have visual impairments and many prefer it at night. The practical answer is to design in light, offer dark as an option, and respect the reader’s system setting.
Give the brand room to be itself
Thrasher is the counterexample in the gallery, and it is there on purpose. The skateboarding magazine does the opposite of tasteful minimalism: a flame logo, bright ads, video thumbnails and shop links all fighting for attention on a black background. It looks chaotic because skateboarding culture looks like that, and a calm, white, serif layout would feel wrong to its readers.
Food & Wine shows a gentler version of the same principle. For a lifestyle title, the photography is the product, so big food images take most of the space and the type stays simple.
The rule behind both is that a publication’s design should sound like its writing. Good taste is relative to the audience.
What to borrow
If you are designing a magazine or a blog, these are the patterns from the gallery I would start with:
- Choose between index and cover, based on how often you publish.
- Give the lead story a clear position and size, and keep the rest calm.
- Pick the body typeface for long reading on a phone, then the headline face for character.
- Set the article column to a comfortable measure and let images break out of it.
- Put the byline and date near the headline, and a next step at the end.
- Let colour or type carry the brand. Vessel’s peach background does more for its identity than any logo.
Frequently asked questions
What makes a good magazine website design?
A clear lead story, a calm system for everything else, and reading pages that are comfortable on a phone. Strong typography usually does more for the brand than images or effects.
Should a blog look like a magazine?
Only if it publishes like one. A blog with one article a week works better with a simple, cover-like homepage or a clean list than with a dense magazine grid that looks empty between posts.
How wide should the text column be on an article page?
Wide enough for 50 to 75 characters per line at your body size. On a desktop that is far narrower than the screen. Let images, quotes and tables extend beyond the text column if you want more width.
Do magazine sites still need a homepage at all?
Yes, but its job has changed. Few readers arrive there; those who do are usually regulars checking what is new or new readers deciding whether the publication is worth following. Design it for those two visits.
How many fonts should a publication use?
Usually two: one for headlines and one for body text, sometimes with a third for small labels or captions. More than that tends to look like a collage rather than a magazine.
Sources
- Baymard Institute, research on line length and readability, 10 May 2022. baymard.com
- Raluca Budiu, “Dark Mode vs. Light Mode: Which Is Better?,” Nielsen Norman Group, 2 February 2020. nngroup.com
