Coding HTML for email clients: Font sizes always larger in Apple Mail than Microsoft Outlook

Question

I've been following various guides online such as the ones on Campaign Monitor to build an HTML page for viewing in email clients. To those unfamiliar, this essentially means building pages out of HTML tables and inline CSS to create the look and formatting of a normal web page. Such divergent coding behavior is due to the fact that most email clients restrict a great deal of CSS styling rules. For testing, I've been using Email on Acid to preview how my page would render across various email clients.

The problem I'm having is that text in Microsoft Outlook appears smaller than the true font size (as viewed in Chrome, Firefox, or Safari) and that the text in Apple Mail appears larger than the true font size. Since I wish to have my page look presentable across both platforms, I will need to find a remedy to this problem.

Here is an image showing how each platform compares. Note how the text is so large on Apple Mail that it breaks the height of the table. Not surprisingly, simply reducing the text size for Apple Mail is not an option since it will shrink the text in Outlook into oblivion.

If you are familiar with coding emails you can know that it is a messy business, and requires you to break a great deal of common sense practices in coding -- including readability. To help with perusal of the source code, here is an image clearly marking where each table begins and ends (as viewed in Chrome). All those images named "row_xx.jpg" in the source below are just vertical gray bits that make up the border of the email. Some of these images also have some white space inside them in order to give the illusion of indenting.

Source:

<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="8">
            <img style="display:block;border:none;" src='images/row_11.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="10">
            <img style="display:block;border:none;" src='images/row_12a.jpg' />
        </td>
        <td width="554" height="10" style="font-family:Lucida Grande;font-size: 7px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </td>
        <td width="2" height="10">
            <img style="display:block;border:none;" src='images/row_12c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_13a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_13c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_14a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_14c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="8">
            <img style="display:block;border:none;" src='images/row_15.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="10">
            <img style="display:block;border:none;" src='images/row_16a.jpg' />
        </td>
        <td width="554" height="10" style="font-family:Lucida Grande;font-size: 7px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </td>
        <td width="2" height="10">
            <img style="display:block;border:none;" src='images/row_16c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="14">
            <img style="display:block;border:none;" src='images/row_17a.jpg' />
        </td>
        <td width="554" height="14" style="font-family:Lucida Grande;font-size: 7px;">
            uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        </td>
        <td width="2" height="14">
            <img style="display:block;border:none;" src='images/row_17c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="11">
            <img style="display:block;border:none;" src='images/row_18.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="13">
            <img style="display:block;border:none;" src='images/row_19a.jpg' />
        </td>
        <td width="554" height="13" style="font-family:Lucida Grande;font-size: 7px;">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td width="2" height="13">
            <img style="display:block;border:none;" src='images/row_19c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_20a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            =Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. 
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_20c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="12">
            <img style="display:block;border:none;" src='images/row_21.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_22a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_22c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_23a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, 
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_23c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="11">
            <img style="display:block;border:none;" src='images/row_24a.jpg' />
        </td>
        <td width="554" height="11" style="font-family:Lucida Grande;font-size: 7px;">
            similique sunt in culpa qui officia deserunt mollitia animi, 
        </td>
        <td width="2" height="11">
            <img style="display:block;border:none;" src='images/row_24c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_25a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_25c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_26a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
             Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_26c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="24">
            <img style="display:block;border:none;" src='images/row_27.jpg' />
        </td>
    </tr>
</table>

Answer 1

Text appearing larger in iOS devices seems to be a common issue, but I haven't heard of it happening in Apple Mail. Perhaps the fix for iOS devices for will work for you, too. Just include this in the style of text you do not want to be resized. If you don't want any text to be resized, include it in the style of the body tag.

-webkit-text-size-adjust:none;

Answer 2

Do you have this is your <style> tag?

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */

Obviously only the text-size stuff is relevant in this case.

If that doesn't fix it, then there is not much else you can do, unless you want to start trying to target different clients using combinations of tricks to target clients based on their varying support.