Search code examples
htmlcssoutlookgmail

Excessive line height on text when displaying on mobile email clients


I'm currently creating a signature design for Outlook desktop client and I've managed to get all looking well across the various platforms apart from some excessive white space between lines on mobile clients such as Outlook and GMail. It looks like the line height has been set to something like 150% despite being set to 100% along with margin and padding all set to zero.

<p style="padding:0;margin:0;line-height:100%;font-size:9pt;">One line</p>
<p style="padding:0;margin:0;line-height:100%;font-size:9pt;">Two line</p>

Does anyone know of anyway round this issue? Decreasing the line height in anyway causing issues on desktop clients.


Solution

  • It looks like GMail and other mobile email clients such as Outlook Mobile don't render correctly when layout properties are set inline and/or set to zero. The below seemed to resolve my issue and for those clients which only render inline styling the spacing was as it should be anyway. I did notice that the last paragraph had some additional white space so hence the line break at the end which seemed to resolve this issue. So all lines look tight together as they do on the desktop. Hope this helps someone.

    <style type="text/css">
       .sigRow { margin: 1px; font-size:9pt; font-family:"Arial",sans-serif;}
    </style>
    <p class="sigRow">One line</p>
    <p class="sigRow">Two line</p>
    <br>