Search code examples
csshtml-emailfont-size

What are the risks of not specifying font size in an HTML email?

I have been building HTML emails for some time and have always specified font sizes in my code, e.g.

<h1 style="font-size: 24px">Hello Readers!</h1>
<p  style="font-size: 16px">Welcome to 2021!</p>

However browsers and email clients (Gmail, Outlook.com, Mail on iOS etc) all seem to do a good job of applying appropriate styling based on HTML tags. E.g. Content in the h1 and p tags of the following are sized as you would expect, even though font-size information is absent from the code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Font Size Test</title>
</head>
<body>
    <h1>Hello Readers!</h1>
    <p>It's been a long year...</p>
</body>
</html>

Assuming content relevant HTML tags are being used (h1, h2, p etc.), what are the risks of omitting font-size from HTML email code, effectively delegating this to the client / browser?

The most obvious danger seems to be that all your text would be the same size if no default values were applied, but this seems unlikely in the real world?

Edit:

The motivation for this question is whether readability might be improved by allowing the client / browser to dictate font sizing, rather than hard-coding this into the email, e.g. the comment below from @stephen-p.

Solution

  • You will likely get surprising results.

    I tried the following code:

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Font Size Test</title>
</head>
<body>
    <h1>Hello Readers!</h1>
    <p>It's been a long year...</p>
    <h2>In other news</h2>
    <p><span>This is done with a p and span</span></p>
    <h3>Now we're h3</h3>
    <strong>and let's try strong text</strong>
    <h4>But wait, there's more</h4>
    <table>
        <tr>
            <td>This is <u>in a</u> table with a <a href="https://www.google.com">link</a> too</td>
        </tr>
    </table>
    <hr>
    This is without any tag
</body>
</html>

    And got no font-size from the header tags in Samsung:

    Samsung screenshot

    Of course, not specifying font-family also turns up some pretty strange results--Times New Roman is the default for Outlook desktops (& freenet.de):

    Outlook screenshot

    And different font-families have different font sizes. Not specifying line-height also will change heights of paragraphs, which can impact your design.

    But otherwise pretty typical response--this from Apple Mail:

    Apple Mail screenshot

    This (below) from Mail.ru I thought had quite a lot of margin, because we did not specify that either.

    Mail.ru screenshot

    The link was sometimes underlined in the tests, sometimes not.

    All-in-all if you are not specifying font-size (although Samsung at the very least needs it), you'll find yourself needing to specify everything else anyway, so why not font-size too?

    Update

    I got Samsung to work when inserting just a standard wrapper. So leaving out font-size works well for everything.

    However, if you want to specify the font-size once in a <style> tag, that will work for everything except Gmail IMAP/POP users. (There are different Gmail versions: check https://www.hteumeuleu.com/2019/trying-to-make-sense-of-gmail-css-support-2019-edition/)

    Here's the code I used that worked in Samsung, and with specifying font-size once. Notice also you have to be careful to capture all tags you use - text not within the tag obviously won't get picked up (e.g. just in a td if you haven't specified a font-size for td too).

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Font Size Test</title>
    <style>p {font-size: 24px}</style>
</head>
<body>
    <center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
                <tbody><tr>
                    <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
    <h1>Hello Readers!</h1>
    <p>It's been a long year...</p>
    <h2>In other news</h2>
    <p><span>This is done with a p and span</span></p>
    <h3>Now we're h3</h3>
    <strong>and let's try strong text</strong>
    <h4>But wait, there's more</h4>
    <table>
        <tr>
            <td>This is <u>in a</u> table with a <a href="https://www.google.com">link</a> too</td>
        </tr>
    </table>
    <hr>
    This is without any tag
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </center>
</body>
</html>