Why Your Email Looks Broken in Outlook (and How to Fix It)

An Outlook-proof email is one that looks the same in Outlook as it does in Gmail, Apple Mail, and everywhere else. That sounds like it should be the default, but it often is not. The reason comes down to a single odd fact: the classic Outlook app on Windows builds your email using Microsoft Word, not a web browser like every other email app.

Word was made for documents, not for web pages, so it quietly mangles designs that look fine everywhere else. That is why an email can look flawless on your screen and arrive at a colleague's desk with broken columns and the wrong font.

Most email apps display your email roughly the way a web browser would, which is why a design built once tends to look consistent across Gmail, Apple Mail, and the rest. The classic Outlook app on Windows is the exception: it builds emails with the same engine that powers Microsoft Word. Word is brilliant at laying out a printed document and clumsy at laying out a web page, so the moment your design relies on anything modern, Outlook reinterprets it and the layout drifts.

It helps to be precise about which Outlook causes this, because not all of them do. The problem is specific to classic Outlook for Windows, the long-standing desktop app most companies still run (versions 2007 through the 2021 and 365 classic releases). The new Outlook for Windows and Outlook.com were rebuilt on modern technology (the same kind that runs web browsers) and behave like every other email app.

Another thing worth clarifying, because people get it wrong: classic Outlook is not disappearing any time soon. Microsoft has committed to supporting it until at least 2029, so this is not a problem that quietly resolves itself if you wait. Therefore, it is worth handling now.

Here is what classic Outlook tends to get wrong, in everyday terms:

• Spacing and positioning. Modern ways of arranging and spacing elements on a page are ignored or applied unpredictably, so neat layouts can end up cramped, misaligned, or stretched too wide.

• Background images. A background color shows up fine, but a background image often vanishes entirely, leaving an empty block where your visual was meant to be.

• Animated GIFs. Older Outlook versions freeze a GIF on its first frame; newer ones play it a few times and then stop. Either way, you cannot count on the animation actually running.

• Border radius. Classic Outlook often ignores it, so every button, image, or block of text always ends up looking like a box.

• Custom fonts. This is the big one. Classic Outlook does not load the web fonts that give an email its brand look, and instead of falling back to something sensible, it often drops all the way to Times New Roman.

The symptoms are always some mix of the same few things: columns that are too wide or out of line, a missing background image, uneven spacing, images that will not resize, and a brand font swapped for Times New Roman.

The good news is that designers and developers have been solving this for years, and the fixes are well established. Each rule below comes with its reason, so the logic is clear even if you never touch the underlying code.

• Lay out the email as a grid of boxes, not as free-floating elements. Modern web design uses flexible layouts that reflow to fit any screen, but classic Outlook ignores them entirely, leaving elements to collapse or overlap. What Outlook reliably reads is the old table layout: the page is split into fixed rows and cells, the same way a spreadsheet is divided up. Each block of the email (a header, a two-column section, a footer) sits inside its own cell with a set width, so Outlook has no room to rearrange anything.

• Keep the styling in two places, not one. Every email carries its styling (colors, fonts, spacing), and there are two ways to attach it: directly to each element or in a single shared style block at the top of the email. The durable approach is to do both. Apply essential styling inline to each element as a safe baseline, because some apps strip out the shared block, and keep that block for elements that cannot live inline, like the rules that resize an email for phone screens.

• Pick a fixed width between 600 and 640 pixels. Outlook ignores instructions to make an email flexible and stretches the layout to whatever width it likes, so the main container must be locked to an exact pixel value. 600 pixels is the long-standing safe choice; 640 is also popular because it splits cleanly into two 320-pixel columns that stack neatly on a phone.

• Build buttons and backgrounds with an Outlook-only fallback. Rounded buttons and image backgrounds are exactly the kind of thing classic Outlook struggles with. The standard fix is conditional comments: a block of instructions wrapped so that only Outlook reads it. Inside, Outlook is given a version drawn with Microsoft's own graphics language, which renders the button as a solid, properly sized shape and places a flat color or simple graphic behind a section. Every other email app skips the block and shows your normal design.

• Always provide a backup font. Classic Outlook does not load custom web fonts, and if it does not recognize a font, it defaults to Times New Roman rather than the next font you listed. So every font choice needs a full fallback list that ends in a safe, widely available family like Arial. Set up properly, an Outlook reader still sees a clean, on-brand-adjacent font instead of jarring Times New Roman.

• Avoid relying on background images. Background images frequently fail to render in classic Outlook, and forcing them to appear requires the same Outlook-only workaround used for buttons. The safest habit is to avoid relying on them for anything important, or at least to set a solid background color underneath so the section still looks intentional when the image fails to load.

• Use Outlook's own spacing controls. Classic Outlook honors a small set of Microsoft-specific spacing settings that are far more reliable than the standard ones for margins and padding. A developer building the template uses those for spacing inside cells and between lines of text; the result is even, predictable spacing instead of the squashed look Outlook otherwise produces.

Every rule above can be done by hand, and skilled email developers do exactly that. The catch is that it is slow, finicky work that is never quite finished, because every new Outlook release can reopen problems that were already solved. Topol removes that work entirely.

Topol is a drag-and-drop email editor that produces Outlook-safe code by default. You design visually by moving blocks around, while Topol writes the carefully structured, table-based code, the hidden Outlook fallbacks, the font backups, and the fixed widths for you. Every rule in this guide is baked in, so a finished email holds together in classic Outlook without anyone touching a line of code.

That reliability comes from MJML, the free, open-source framework on which Topol is built. MJML is the email world's answer to the Outlook problem: it automatically generates the table-based structure, conditional comments, and inline styling, the exact elements that keep a design intact in classic Outlook.

Topol goes a step further than the framework alone. On top of MJML, it adds its own fixes for the things even newer Outlook versions still get wrong, so your emails stay sharp across the whole Outlook range, not just the old desktop app. And this is not a future promise or a developer-only feature: it is how the standard Topol editor works today, for every email you build.

Building it right gets you most of the way, but a final check before a big send is always worth it. No editor, Topol included, replaces actually looking at the email in a real inbox. The trick is checking the right inboxes rather than all of them.

• Send a test to both an Outlook.com account and a classic Outlook desktop account on Windows. They display emails differently, so one can look perfect while the other breaks.

• Focus on the worst case, which is the classic desktop Outlook. If the email survives there, it will survive everywhere; Outlook.com, the new Outlook, and Outlook on a Mac are all far more forgiving.

• For thorough coverage, a service like Litmus shows your email across dozens of apps and devices at once, which beats collecting a drawer full of test accounts.

Making an email Outlook-proof is a solved problem. It is simply a lot of careful, unglamorous detail: the right layout, a locked width, hidden Outlook fallbacks, font backups, all checked against the one app that breaks things. Doing all of that by hand is worth it only if building emails is your actual product. For everyone else, it is endless effort that never makes your emails any better, only less broken.

So the honest question is whether wrestling with Outlook by hand is the best use of anyone's time. If it is not, an editor like Topol produces Outlook-safe emails that already follow all the rules here, freeing up that time for the work that actually moves the needle. And for teams that want this inside their own product, the Topol Plugin drops the same Outlook-safe editor into an existing app, fully branded as your own, in 21 languages, in under five minutes.