If you want people to read the words you wrote or linger on a piece of art, the design surrounding them cannot distract. A busy background or eccentric fonts will do little more than pull eyes away from where you want them. Still, you want your content to feel unmistakably and uniquely yours, more vivid than 1,000 words of Times New Roman and a square image on a white background. It’s not always easy to find a balance between the two extremes. Newsletter archives at least come with some built-in, helpful constraints.
Email design is mostly stuck in 2005. Email archives tend to not be much better. And so, if you want to find a golden mean, where the web versions of your newsletter issues are more visually interesting than a list of links but more restrained than LingsCars.com, there are really only a handful of settings you need to tweak.
How to spice up the design of your newsletter archives
If design feels overwhelming or like a chore, the approach that I recommend is starting with the settings that have the broadest impacts and working your way down to the changes that will have the smallest impact. For newsletter archives, that usually means tackling page layout first.
Archive themes
In Buttondown, for example, there are four themes at the top of the archives settings page (which you can view without an account, on the demo site). Each theme makes wholesale changes to how your index, post, and profile pages will look. Tweak things like colors and fonts before choosing your theme and you might find yourself needing to redo them after because of unexpected layout issues. So I’d start here.
Liang Chan’s what is formyths doing archives are a good example of why this decision should come first. As an illustrator and risograph artist, making sure that their drawings are front and center, especially on the index page, is more important than any other design decision.
Liang went with the Instagram-inspired Arbus theme and stuck with the default three-column layout. There’s a toggle to go as high as six columns, but that would have criminally shrunk each beautiful drawing and overcrowded the page, which is likely why they also set the Posts per page counter to 20. You don’t have to scroll very far to get a feel for exactly what you get from their newsletter.
Archive-wide fonts, colors, and dark mode
After choosing your theme and page layout, you’ll want to move on to fonts and colors. If you’re migrating from another newsletter platform or blogging platform, that might be as simple as copying over what you were already using. In Buttondown, you can pick a background and an accent color, each with separate color selectors for light and dark mode users, assuming you have enabled the toggle that allows dark mode in your archives. Just make sure your color contrast ratios (and every other design choice, for that matter) meet newsletter accessibility requirements.
For fonts, you have 24+ options to choose from, with one dropdown for body text and another for accent text like headings and buttons. If your previous newsletter platform had fonts that your new home doesn’t, sites like whatfontis.com have font-matching tools for finding the closest approximation (or you could go the custom CSS route to add your own font). Either way, typography nerd (and Buttondown user!) Elliot Jay Stocks put together an incredible checklist for choosing fonts that's worth revisiting whether you're doing a full redesign or a few basic touch-ups.
Whether you’re transferring design choices from another tool or starting from scratch, keep Robert Bringhurst’s advice that “typography exists to honor content” in mind. Fonts should never insist upon themselves or steal attention from the ideas they convey, especially when there are so many other, more subtle ways to add a bit of yourself to the fabric of your archives.
Custom navigation links, archive search, announcement banners, and pinned posts
Layouts, fonts, and colors are the most obvious design settings, but even tiny, low-profile tweaks, like announcements and navigation bars, can make a page feel tailored to your content and your voice.
If you go to your Emails tab in Buttondown (or, again, the demo site), you can hoist an older email from the bottom of your archives to the top by clicking the three horizontal dots next to it and selecting Pin, like Brandon Lucas Green does for his newsletter, lightbulbs on. Pinned emails only show up on the index page, though. Another option, one that puts a message along the top of all your pages including your signup, index, and post pages, is adding an announcement bar with a custom color and visibility (everyone, free subscribers only, logged out visitors only, or paid subscribers only).
Instead of an announcement bar, Brandon went with something a little more permanent and understated, adding customized navigation links along the top of the screen. Sitting to the left of his archive’s search bar (a design option in its own right) are links that point to his website and a tool for supporting musicians more directly. For authors sending a newsletter that might be a Bookshop.org embed or a link to their Goodreads page. For a nonprofit use case, it might be linking to a donation or event page.
But enough about the choices that are visible everywhere, there are plenty of page-specific flourishes to consider.
Design settings for posts and signup pages
Another step down the design funnel are customizations that only apply to a few specific elements of your archives. The Content header and Content footer fields in the archives settings, for example, let you bookend the top and bottom of every newsletter issue with text or, as in Sarah Becan’s I Think You’re Sauceome newsletter, a hand-drawn image.
Not only did she illustrate a custom banner image that sits at the top of every issue’s introduction, Sarah went a step further by creating gorgeous divider images that separate the end of the issue from the Related emails she hand-picked in that email’s Details pane. Just below the related emails, she has enabled auto-generated Post navigation links for readers to hop to either the previous or the next issue. And, in a similar vein, you might toggle the Latest issue link option in your design settings to add a dynamic link to your signup page, making sure it always shows the title of the last email you sent.
Now, it would take a whole other, much longer, article to cover design ideas and suggestions for individual issues of your newsletter. But it is worth mentioning that you can add a bit of visual variety to your archives with custom buttons along with embeds for social media. And almost any formatting you paste from an editor like Google Docs or Microsoft Word comes along with it, overriding your theme’s colors and sometimes its font. So make sure to double-check your design settings before hitting send!
Customizing your archives with CSS
So far, I’ve only covered the design options that have settings and toggles in your account backend. But if you’re on a paid plan, you can get into the weeds with custom CSS, even if you’ve never written any before.
You might add some heading text and a blurb between your navigation bar and your first issue. Or you could change the dimensions of images in the Arbus theme. For people who aren’t familiar with CSS, however, I’d recommend keeping things simple and progressing from there. Familiarize yourself with some of the basics CSS text and font styling, then try changing your archives font with this custom CSS:
Then, try one step up from that and import a font by grabbing a link from fonts.google.com and updating this block:
CSS is extremely flexible and you could change everything from how rounded your button corners are to the font applied to only the first letter of each issue title (also known as a drop cap), for a bit of flair that is only mildly distracting. Just remember that each new style settings adds to the complexity and potential readability issues (like the problem of font reflow when applying multiple fonts to a single paragraph). What might start out as a fun idea can quickly become more headache than it's worth.
Your words and your art are what matter most
When I think of design in the context of my own newsletter archives I usually think of it as “the less important stuff that surrounds the most important stuff.” I appreciate that Buttondown’s themes keep things simple while still being flexible enough to let me add (probably too much, admittedly) ornamentation and decoration.
With so many samey AI webpages, layouts, colors, animations, and widgets, “bad design” at least looks human. So get out there and experiment, pick a visual page layout and share your ugly sketches when you have nothing else to show off, pick a weird (but still accessible!) font, invite feedback with an announcement bar, use silly doodles in your footer as page dividers.
Make stuff, put it on the page, and talk to people about it. That’s how you design better archives.
| Image | Credit |
|---|---|
| Header photo | Sarah Becan's I Think You're Sauceome archives screenshot |