Back to newsletter templates
Editorial Newsletter
Newsletter emails live or die by readability. This template borrows from editorial publication design — strong typography, generous whitespace, and clear section hierarchy — to create an email that respects the reader's attention and showcases content rather than chrome.
Responsive Gmail Outlook Apple Mail
Preview
Production-Ready HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Periphery Weekly — Issue #41</title>
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.mobile-pad { padding: 28px 24px !important; }
}
</style>
</head>
<body width="100%" style="margin:0; padding:0; background-color:#FAFAF8; font-family: Georgia, 'Times New Roman', serif;">
<center style="width:100%; background-color:#FAFAF8;">
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">This week: the attention economy's quiet reckoning, three tools worth your time, and a long read on why we stopped reading long reads.͏</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" class="email-container" style="max-width:600px; margin:auto;">
<!-- Header -->
<tr>
<td style="padding: 36px 48px 20px; border-bottom: 2px solid #1A1A18;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<p style="margin: 0; font-size: 22px; font-weight: 700; color: #1A1A18; letter-spacing: -0.5px; font-family: Georgia, serif;">Periphery</p>
<p style="margin: 2px 0 0; font-size: 12px; color: #7A7870; font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.3px;">Weekly dispatches on technology and culture</p>
</td>
<td style="text-align: right; vertical-align: top;">
<p style="margin: 0; font-size: 11px; color: #9A9888; font-family: 'Helvetica Neue', Arial, sans-serif; padding-top: 4px;">Issue #41 · Aug 2026</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Opening -->
<tr>
<td class="mobile-pad" style="padding: 36px 48px 28px;">
<p style="margin: 0 0 16px; font-size: 15px; color: #3A3830; line-height: 1.85;">Hello,</p>
<p style="margin: 0 0 16px; font-size: 15px; color: #3A3830; line-height: 1.85;">This week I've been thinking about attention — specifically, how the design of our tools shapes not just what we do but how we think. It's a theme that runs through all three of this week's reads, even if they approach it from different directions.</p>
<p style="margin: 0; font-size: 15px; color: #3A3830; line-height: 1.85;">Let's get into it.</p>
</td>
</tr>
<!-- Divider -->
<tr><td style="height: 1px; margin: 0 48px; background-color: #E8E5DF;"><div style="height:1px; background:#E8E5DF; margin: 0 48px;"></div></td></tr>
<!-- Article 1 -->
<tr>
<td class="mobile-pad" style="padding: 32px 48px;">
<p style="margin: 0 0 4px; font-size: 10px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #9A9888; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;">Long read</p>
<h2 style="margin: 0 0 10px; font-size: 20px; font-weight: 700; color: #1A1A18; line-height: 1.3; letter-spacing: -0.3px;">The attention economy's quiet reckoning</h2>
<p style="margin: 0 0 14px; font-size: 14px; color: #5A5850; line-height: 1.8;">A thoughtful long-form examination of how the tools we use to capture attention have begun to erode the capacity for it. What happens when the engagement loops we built run out of runway?</p>
<a href="#" style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #3A3830; text-decoration: none; border-bottom: 1px solid #3A3830; padding-bottom: 1px; font-weight: 500;">Read at The Atlantic →</a>
</td>
</tr>
<!-- Divider -->
<tr><td style="padding: 0 48px;"><div style="height:1px; background:#E8E5DF;"></div></td></tr>
<!-- Article 2 -->
<tr>
<td class="mobile-pad" style="padding: 28px 48px;">
<p style="margin: 0 0 4px; font-size: 10px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #9A9888; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;">Essay</p>
<h2 style="margin: 0 0 10px; font-size: 20px; font-weight: 700; color: #1A1A18; line-height: 1.3; letter-spacing: -0.3px;">Why we stopped reading long reads</h2>
<p style="margin: 0 0 14px; font-size: 14px; color: #5A5850; line-height: 1.8;">The irony is sharp: a piece about our diminishing capacity for sustained reading, written for people who increasingly struggle to finish pieces like this one. Worth the effort.</p>
<a href="#" style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #3A3830; text-decoration: none; border-bottom: 1px solid #3A3830; padding-bottom: 1px; font-weight: 500;">Read on Substack →</a>
</td>
</tr>
<!-- Divider -->
<tr><td style="padding: 0 48px;"><div style="height:1px; background:#E8E5DF;"></div></td></tr>
<!-- Tools section -->
<tr>
<td class="mobile-pad" style="padding: 28px 48px;">
<p style="margin: 0 0 16px; font-size: 10px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #9A9888; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;">Three tools worth your time</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-bottom: 14px; border-bottom: 1px solid #F0EDE8; padding-top: 0;">
<p style="margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #1A1A18;">Granola</p>
<p style="margin: 0; font-size: 13px; color: #6A6858; line-height: 1.6; font-family: 'Helvetica Neue', Arial, sans-serif;">AI meeting notes that feel unusually honest about what they can't do. The right scope.</p>
</td>
</tr>
<tr>
<td style="padding: 14px 0; border-bottom: 1px solid #F0EDE8;">
<p style="margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #1A1A18;">Notion Calendar</p>
<p style="margin: 0; font-size: 13px; color: #6A6858; line-height: 1.6; font-family: 'Helvetica Neue', Arial, sans-serif;">Finally feels like a calendar that's on your side rather than your employer's.</p>
</td>
</tr>
<tr>
<td style="padding-top: 14px;">
<p style="margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #1A1A18;">Readwise Reader</p>
<p style="margin: 0; font-size: 13px; color: #6A6858; line-height: 1.6; font-family: 'Helvetica Neue', Arial, sans-serif;">The best long-read environment on any platform. Now with decent highlight export.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Sign off -->
<tr>
<td class="mobile-pad" style="padding: 0 48px 36px;">
<p style="margin: 0 0 6px; font-size: 15px; color: #3A3830; line-height: 1.85;">Until next week,</p>
<p style="margin: 0; font-size: 15px; font-weight: 600; color: #1A1A18;">— Oliver</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 24px 48px; border-top: 2px solid #1A1A18; background-color: #F2F0EA;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<p style="margin: 0; font-size: 11px; color: #9A9888; line-height: 1.6; font-family: 'Helvetica Neue', Arial, sans-serif;">You're receiving Periphery because you subscribed at periphery.news. To stop receiving these emails, <a href="#" style="color: #5A5850; text-decoration: underline;">unsubscribe here</a>.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>