css controling font size in HTML EMAILS

css html-email font-size

35,940

Solution 1

Always give inline styling for the emails. Emails not support external styling. Write like this:

<table style="font-size:16px" width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0"></table>

Solution 2

For email put all your font css inline in font tags, span tags or in the <td> containing your text.

<font style="color:#770000;">This will always work</font>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="color:#770000;">
      So will this.  
    </td>
  </tr>
</table>

Solution 3

I am posting the code that worked. I did the "INLINE STYLES" on the table but it didn't work so I put 'INLINE STYLES" on all the paragraphs. It looks good in my email client.

Only ONE small issue and that is the image on the left, the left bar next to white space for text, is like one pixel off in gmail. Can't fix that bugger.

Ok here is the code that works

<html>
<head>
<title>Holy Mary Email copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Holy Mary Email copy.psd) -->
<table width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_01.png" width="546" height="253" alt=""></td>
        <td width="297" rowspan="3" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_02.png" width="297" height="855" alt=""></td>
    </tr>
    <tr>
        <td width="11" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_03.png" width="11" height="565" alt=""></td>
        <td width="535" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" id="box">
          <tr>
            <td valign="top"><p style="font-family: Tahoma, Geneva, sans-serif; font-weight: bold; color: #666; font-size: 17px">PRAISE BE JESUS CHRIST!</p>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">Thank you for taking the time to read this email. We are developing some exciting media to help you and others fall even more in love with JESUS through the power of Mary, the Queen of Heaven (Revelations 12) and through Heaven's blessed gift to us... The Most Holy Rosary. <br>
                <br>
                </span><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">We need your help if you can. We need you to answer some quick questions on the Rosary. Also once on the page can you &quot;like&quot; it on Facebook, Tweet it and finally forward this email to friends who may be interested? Awesome! Thank you so much.</span></p>
              <span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">
                <p align="center"><a href="http://www.EdVizenor.com/?p=questions"><img src="http://www.EdVizenor.com/rosary/email/images/HolyRosary.png" alt="" width="364" height="67"></a></p>
              </span>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">Be assured of my prayers for you and all your intentions in my Rosary.</span></p>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">In The Merciful Heart Of Jesus Christ,</span><br>
                <span style="color: #666">Ed Vizenor </span> </td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_05.png" width="546" height="37" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Solution 4

there! To avoid this problem with spacing between images in Gmail (which occurs in Hotmail as well), you have to put display=block as an inline CSS style in your images. Just like that:

img src="http://webserver.com/image.jpeg" alt="" style="display:block;"

View more solutions

35,940

Author by

Papa De Beau

I am so grateful for the generous souls on here who help others with code. How amazing is that!

Updated on July 19, 2022

Comments

Papa De Beau almost 2 years

Is there a way to keep fonts to a similar size in HTML EMAILS?

On the Website it looks great but in my email the text is very small and close together.

Live Demo

I am including a screen shot of what I see in my email. enter image description here

Any way to fix this?

Here is the html code:

<html>
<head>
<title>The Most Holy Rosary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#Table_01 tr td #box {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Holy Mary Email copy.psd) -->
<table width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_01.png" width="546" height="253" alt=""></td>
        <td width="297" rowspan="3" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_02.png" width="297" height="855" alt=""></td>
    </tr>
    <tr>
        <td width="11" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_03.png" width="11" height="565" alt=""></td>
        <td width="535" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="15" id="box">
          <tr>
            <td valign="top"><p style="font-weight: bold; color: #666;">PRAISE BE JESUS CHRIST!</p>
            <p><br>
              Thank you for taking the time to read this email. We are developing some exciting media to help you and others fall even more in love with JESUS through the power of Mary, the Queen of Heaven (Revelations 12) and through Heaven's blessed gift to us... The Most Holy Rosary. </p>
            <p>We need your help if you can. We need you to answer some quick questions on the Rosary. Also once on the page can you &quot;like&quot; it on Facebook, Tweet it and finally forward this email to friends who may be interested. Awesome! Thank you so much.</p>
            <p align="center"><a href="http://www.EdVizenor.com/?p=questions"><img src="http://www.EdVizenor.com/rosary/email/images/HolyRosary.png" width="364" height="67"></a></p>
            <p>Be assured of my prayers for you and all your intentions in my Rosary.</p>
            <p>In The Merciful Heart Of Jesus Christ,<br>
            <span style="color: #666">Ed Vizenor </span></p></td>
          </tr>
      </table></td>
    </tr>
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_05.png" width="546" height="37" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Lucas Wiman over 11 years

I've found the Premailer library to be very convenient for doing this.
Papa De Beau over 11 years

OK I put it in a table that contains main text. Still didn't work: <table width="95%" border="0" align="center" cellpadding="0" cellspacing="15" id="box" style="line-height: 25px; font-family: Tahoma, Geneva, sans-serif; font-size:16px">
sandeep over 11 years

This code will work may be there something else creating problem on it. For good practice check some email codes in your gmail etc.