Implementing:
<html>
<head>
<style>
p {
font-size: 16px;
}
.font-size-16 {
font-size: 16px !important;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in sapien quam. Nulla et justo a lectus vehicula mollis id eu tellus.</p>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/contact/support/" style="font-family: Arial, Helvetica, sans-serif; height: 54px !important; width: 125px !important; padding-top: 10px; text-decoration: none; background-color: #2747d7!important; color: #fff !important; v-text-anchor:middle;" arcsize="20%" strokecolor="white" fillcolor="#2747d7">
<w:anchorlock/>
<center class="font-size-16" style="color:#ffffff; font-size:16px;">Contact us</center>
</v:roundrect>
<![endif]-->
</body>
</html>
The paragraph's font size consistently appears as 16px while the
<v:roundrect><center>
displays with varying font sizes, usually slightly smaller, across different versions of Outlook.
How can we ensure a uniform font size in Outlook overall, especially for the
<v:roundrect><center>
style shown above?
Despite following guidance from this answer, the problem persists even after removing !important;
from the inline style and introducing a style to the <head>
.
Any assistance is welcome.
Solution
Nathan's suggestion led to the following solution:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
</style>
<!--[if mso]>
<style>
.font-size-override-button {
font-size: 12pt !important;
text-decoration: none;
}
</style>
<![endif]-->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com/contact/support/" style="height:39px;v-text-anchor:middle;width:125px;" arcsize="30%" stroke="f" fillcolor="#2747d7">
<w:anchorlock/>
<center>
<![endif]-->
<a href="https://www.example.com/contact/support/" class="font-size-override-button" style="background-image: linear-gradient(90deg, #2747D7 0%, #6127E7 51%, #2747D7 100%) !important; background-position-x: 0 !important; background-position-y: 0 !important; background-repeat: no-repeat !important; background-size: 200% auto !important; background-color: #2747d7 !important; border-radius:8px;color:#ffffff;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:bold;line-height:39px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;">Contact us</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->