Why does your email look different in Outlook?

The old Outlook on Windows shows your email with Microsoft Word. Here's what breaks, why it happens, and how I design around it.
The words It's Microsoft Word. on a blue gradient

Short answer: the old Outlook on Windows uses Microsoft Word to show your email. Word was made for documents, not web pages, so a lot of what works in Gmail and Apple Mail doesn't work there. The new Outlook is a lot better. It's the old one that gives you trouble.

I'm a designer, not a coder. I didn't know any of this until I started building Sendra and did a lot of research. So if this is new to you, you're not alone.

What breaks in the old Outlook

When I tested emails in the old Outlook, everything broke. These are the ones I see the most.

Rounded corners. Rounded buttons and rounded boxes don't come out rounded. The old Outlook doesn't support rounded corners. There's an Outlook-only way to draw them, but it causes its own problems, and I'll get to that in dark mode.

Text in buttons. You center the text in a button, and in Outlook it sits at the bottom instead. Line height works differently there, so the text doesn't sit where you put it.

Alignment. Things shift left and right, and sometimes we had trouble centering things. The usual way to center something in code doesn't work in the old Outlook.

Spacing and layout. Different spacing, layout shifting. That was a big issue.

Fonts. The old Outlook doesn't load custom fonts, so it swaps in a standard font. Some versions even jump straight to Times New Roman.

Background images. They don't show up unless the email uses Outlook's own code for them. And those Outlook-only tricks don't like being stacked inside each other, like a rounded button on top of a background image.

Wait, Microsoft Word?

Yes, Word. Since Outlook 2007, the old Outlook on Windows has used Word's engine to show emails.

Think of it like this. Gmail and Apple Mail show your email the way a browser shows a website. The old Outlook shows it the way Word shows a document. Word is limited compared to Gmail or Apple Mail. It's great at pages of text, but it was never built for layouts, so a lot of what we do in email design, it just doesn't understand.

That's why an email can look perfect everywhere else and break only in Outlook.

The old Outlook vs the new Outlook

There are two Outlooks on Windows now. The new Outlook runs on Outlook on the web, so it shows emails a lot more like Gmail and Apple Mail do. Most of what breaks in the old one works nicely there. It's not perfect, though. Custom fonts still don't load, and its dark mode still changes your colors.

So should designers still care about the old one? Yes, definitely. A lot of people, a lot of companies, still use it. Microsoft is moving people to the new Outlook, but they can still switch back, and Microsoft supports the old one until at least 2029. So we should always design for it and make sure our emails render correctly in it.

How many people is that? In Litmus's numbers for July 2026, Outlook's desktop app was about 6% of opens. That's probably low. The old Outlook blocks images by default, and opens are counted with an image, so some Outlook opens never get counted. If you send to people at work, check your own numbers.

Dark mode makes it worse

In July we tested dark mode in Outlook, and we ran into a big issue.

Picture a dark button on a white background. In dark mode, Outlook turns the white background dark. The button should flip too. But the rounded buttons, the ones drawn with Outlook's special code, didn't flip. So you had a dark button on a dark background, and the button disappeared.

So we had to make a tough decision. A rounded corner is nice. A button you can't see is a big problem. The button is much more important, so in the old Outlook, most of Sendra's buttons come out square now. They flip with dark mode like everything else, and they're always visible.

And it goes both ways. The old Outlook flips dark emails too, so a dark design can come out light. You can't turn that off. You can only design so your email still reads when the colors flip.

How I design with Outlook in mind

Knowing the old Outlook has limits, and other email clients too, I try to keep my emails nice and simple. It doesn't have to be simple simple. But not too much overlapping, like an image on top of text, or an image over two backgrounds. That stuff can get complicated. Sendra can handle some of it. An image that sits across two background colors becomes one picture, so keep your text out of that part. But it all depends on how you design it.

When you design an email, you still have to think about how it's going to be coded. Okay, this is going to be a section, this is another section, this is a table, images go here. You don't write the code, but you still have that thinking in the back of your mind, right?

And keeping it nice and simple is good anyway. It's easier to scan and easier to read for the person opening your email.

Where Sendra comes in

We built a lot for the old Outlook. Most of it you'll never see, and that's the point. A few examples:

Text sits where you put it. A one-line button label stays in the middle in Outlook, instead of dropping to the bottom.

Spacing holds. Dividers, spacers and the space between sections stay the way you designed them.

Background images show up. They keep your crop. A button sitting on one comes out square in Outlook.

Buttons stay visible in dark mode. That's the tough call from above.

Hidden on desktop stays hidden. If you hide a layer on desktop, it stays hidden in Outlook too. Outlook is a desktop app, so it follows your desktop settings.

You design it in Figma, and Sendra writes the Outlook code for you.

What it can't fix. The old Outlook won't load your custom fonts, so make sure your design still looks good in a standard one. It will still flip your colors in dark mode. And most buttons will be square there. Those are Outlook's rules.

So, why does your email look different in Outlook?

Because the old Outlook on Windows shows it with Microsoft Word. Keep your design nice and simple, think about how it's going to be coded, and test it in the old Outlook before you send. Here's the whole workflow, from Figma to the inbox.

If you haven't tried Sendra yet, it turns your Figma email designs into HTML that works in every major inbox.