Menu
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.
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 "like" 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>
645
To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
CSS will work in HTML email but it has limitations. In general, very simple CSS is always best when you code for email. These are our recommendations for how to use CSS in HTML email and some information to help you troubleshoot CSS-related issues.
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 "like" 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>
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>
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>
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;"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
