Solution 1 :

Hi Andre and welcome to Stack overflow,

Sorry, you are out of luck. You can’t achieve it in Outlook as the attribute is not supported. Letter spacing will only work if you use full pixel values and even then it will vary a lot from client to client.

As much as I hate it to say: if you want cross client compatibility, you will need to use an image. You can use a big one and scale it down to achieve a good appearance.

Problem :

I’m currently working on an html signature for outlook.
I’m struggeling to get it formated correctly and to get it to look the same on multiple devices.

When i look at the html on my browser it looks exactly how i envisioned it. I want the left row, which is supposed to represent the logo, to be exactly the same width. I do that by using text-justify:distribute. That’s probably not supported by outlooks ancient rendering engine. Does anyone know a supported way to achieve this effect? I’ve tried playing around with letter-spacing:xx but that varies too much between devices.

This is what the signature is supposed to look like:

<html>
<body>
    <table width="380" cellspacing="0" cellpadding="0" style="margin-top:0px; margin-bottom:0px; font-family:arial; color: #231f20; vertical-align:top"">
        <tr>
        <td style="FONT-SIZE: 14pt; border-right:#231f20 1.5px solid">
        <span style="white-space:nowrap; font-weight:bold; display: inline-block; text-justify: distribute; text-align-last:justify; letter-spacing:2.7px;">
        <span style="display:block; margin-bottom:4px;">ABCDEF<br></span>
        <span style="display:block; margin-bottom:4px;">GHJKL<br></span>
        <span style="display:block;                   ">MNOPQR</span>
        </span>
        </td>

        <td
            style="font-size:7.5pt; line-height:6pt; vertical-align:bottom; padding-bottom:3px; padding-left:17px">
            <span style="display:block; white-space:nowrap; margin-bottom:0px;">Lorem ipsum dolor sit amet, consetetur sadipscing</span>
            <br>
            <span style="display:block; white-space:nowrap; margin-bottom:0px;">
                Lorem ipsum dolor sit amet, consetetur</span>
            <br>
            <span style="display:block; white-space:nowrap; margin-bottom:0px;">Tel: <a href=""
                    style="text-decoration:none!important; color:#000000">+01 234 56789</a> ยท <a href="mailto:example.com"
                    style="text-decoration:none!important; color:#000000">www.example.com</a></span>
            <br>
            <span><a href="http://example.com" 
                    style="white-space:nowrap; text-decoration:none !important; color:#000000; font-weight:bold;">www.example.com</a></span>
    </td>
    </tr>
    </table>
</body>
</html>

This is what the signature looks like after importing to outlook:

Comments

Comment posted by Andre Dias

Hi MaZoli. Thank you for the input. Using an image is not an option as i want the signature to look decent when zoomed and when using dark mode. I was afraid of this reply though since i was trying absolutly everything i could think of with no luck. I was hoping that someone knows of a weird workaround.

Comment posted by MaZoli

The problem with zooming can be solved by a high resolution image. The dark mode problem can’t be solved unfortunately.

By