css - Coding HTML for email clients: Font sizes always larger in Apple Mail than Microsoft Outlook -
i've been following various guides online such ones on campaign monitor build html page viewing in email clients. unfamiliar, means building pages out of html tables , inline css create , formatting of normal web page. such divergent coding behavior due fact email clients restrict great deal of css styling rules. testing, i've been using email on acid preview how page render across various email clients.
the problem i'm having text in microsoft outlook appears smaller true font size (as viewed in chrome, firefox, or safari) , text in apple mail appears larger true font size. since wish have page presentable across both platforms, need find remedy problem.
here image showing how each platform compares. note how text large on apple mail breaks height of table. not surprisingly, reducing text size apple mail not option since shrink text in outlook oblivion.
if familiar coding emails can know messy business, , requires break great deal of common sense practices in coding -- including readability. perusal of source code, here image marking each table begins , ends (as viewed in chrome). images named "row_xx.jpg" in source below vertical gray bits make border of email. of these images have white space inside them in order give 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 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 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 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;"> @ 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>
text appearing larger in ios devices seems common issue, haven't heard of happening in apple mail. perhaps fix ios devices work you, too. include in style of text not want resized. if don't want text resized, include in style of body tag.
-webkit-text-size-adjust:none;
Comments
Post a Comment