Email Design Gmail App Font
Is the font size actually increasing or is it zoomed in? Might be an issue with Gmail zooming into random parts of your email. Solution is to add min-width: 999px to a full-width cell of your email. Make the value equal to the full width of your email.
MR
This is what I was thinking too.
I've not been seeing any issues with font-size just zooming.
Project Management | OpenMoves replied
you just solved what i've been trying to do for weeks. Thank you!!
TT
Troy Thibodeaux replied
Hey Jenny, I have not found a specific fix the font size, but I have found that if you add "min-width" to your tables, it will help keep your layout in tact, and also keeps the font size proportionate. The downside is that if you have a 600px wide layout with let's say with a font size of 14px, it will reduce the font size the same proportions that it reduces the 600 px wide layout. It will fit the 600px wide layout to fit the screen, thus reducing the font size. This can make the font size pretty small.
Also, if you are using a 100% wide container table you do not have to add the min-width to that table, just the other nested tables.
Also also, I don't think the Gmail App (Android) uses the webkit engine. "-webkit-text-size-adjust" never seems to work in the Gmail App, not to be confused with the native Android Email App, which renders thinks very differently.
I hope this helps. It really helped me.
TT
As an addendum, In some cases I have to add min-width to my table cells as well as the table itself. It looks like you can add it to the first row of TDs and that seems to take care of the whole table.
JS
I use the webkit rule: -webkit-text-size-adjust: none;
and our font is above 14 px and it still happens.
Jonathan Ankiewicz replied
<tr> <td valign="top" align="left" class="textStyleDarkGrey" style="font-size: 16px; line-height: 22px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'avenir', Helvetica, sans-serif; font-weight: normal; color: #666666;"> This text will show up the same size in all clients; from outlook, apple, gmail and yahoo. *The attached class is only for mobile adustments(media queries)* </td> </tr> JS
wow this post is still active after two years. This is no longer an issue for me since we started coding our emails as hybrids (if someone is looking for another solution :)
- I did find that Brad Sapkota's solution with the '--------------' did work but our client didn't like the idea of it.
- Also, font size !important and line-height !important also worked but was a clunky solution.
try this mate
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div> Jasdeep Singh replied
Where should this line of html code be added..?
Can I add this to the top most table ...? Or where else .. ? Please guide me..
What resolved the issue for my case, was setting the font-size to a percentage.
That normalized the displayed font size across all of the devices that we support.
From there it was simply a matter of increasing the percentage to achieve the desired font size.
set attribute font-size to % not px
That's what worked for me.
Jonathan Ankiewicz replied
I've never come across this problem. I always assign every single element a font-size and line height no matter what.
Grzegorz Jurczak replied
Ok I have found some sort of solution for that, if you don't use resize text by responsive design, you can just simply add:
style="font-size: 12px; font-size: 12px !important"
This will stop GMaill app on iOS for text resize, but it's not enough, he will not resize text, but will resize line-height property, so need to add:
style="font-size: 12px; font-size: 12px !important; line-height: 16px; line-height: 16px !important"
This will stop GMail app on iOS from resizing anything, and it will look as you want.
Important note is that there is no possibility to change this font size/line height using media queries, but for me it's cool sometimes to use it.
Thank You Grzegorz you saved my life:)
DB
I think if you do:
<p style="font-size:12px; font-size:12px !important;" id="resize_me" class="resizable"><span>hello resize!</span></p>
and either:
@media { p#resize_me { font-size: 15px !important; }
or
@media { p.resizable span { font-size:15px !important; }
you should achieve nearer specificity with those. Gmail seems to be up-in-the air right now... so who knows.
Matthew Stein replied
Adding a min-width declaration worked for me as well. Interestingly enough, it also modified all the text in the email. Not only the <td> to which I added the style.
Email clients using webkit (iPhone & Android) adjust font sizes to increase readability.
You can disable this by using this CSS Rule: -webkit-text-size-adjust: none;
Or you can make your fonts at least 14px or above.
Voilà!
I don't know why were you downvoted but you're right.
That property helps fix the issue where the email client zooms the font. It fixed it for me on the Gmail App and iOS email client.
Since the Gmail App (Android) isn't a webkit client this won't work.
JS
Thanks for all the feedback, Yes it is zooming in, seems like 110%-120% across the board. Unfortunately none of the suggestions seem to be working for me.
I see a similar discussion on campaign monitor (https://www.campaignmonitor.com/forums/post/29155/#p29155) and the same min-with solution offered here which I wish worked for me.
LB
Hi Jenny,
If you can send your code I can do some testing.
Otherwise try this, it should stop the text from changing in size:
body { margin:0; padding:0; mso-line-height-rule: exactly; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } You could also try targeting your text specifically, if it is Heading 1 and 2 for example:
h1, h2 { margin:0; padding:0; mso-line-height-rule: exactly; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } Otherwise, inline it like this:
<h1 style="margin:0;padding:0;mso-line-height-rule: exactly;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">Heading 1</h1> Thanks,
Lee.
Hi Lee, I tried it but still not working, any other idea? I'm driving mad about it..
LB
Hi,
When I test using my own coded template it seems to look fine.
Can you please paste in your email code and I can take a look at it.
Thanks,
Lee.
Thank you for your reply Lee! Pasted below:
<table cellspacing="0" cellpadding="0" border="0" style="color:#38383d;" class="new_products fontcolors" id="new_products_25">
<tbody><tr class="item_299 item" style="background:#fff !important;float: left;width:193px;height:273px;margin:10px;display:flex;flex-wrap:wrap;display:grid;">
<td width="193px" valign="top" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;height:150px;float:left;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/299/implante-dental" style="display: block; color: rgb(157, 163, 169);">
<span style="background-image:url(https://d3fl5gs8u3b5cy.cloudfront.net/public/store_photo/2f/1e/1e11_40f2.jpg?c=7214);background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:193px;display:block"></span>
</a>
</td>
<td valign="top" style="font-size:16px;line-height:1.2;letter-spacing:1.2px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;word-break:break-all;float:left;">
<div style="color:#9da3a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:173px;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/299/implante-dental" style="font-weight: 500;text-decoration:none; color:#9da3a9">
IMPLANTE DENTAL </a>
</div>
<div>
<b>
<span>OGV 1.388,00</span>
</b>
</div>
<div style="margin-top:5px;height:58px;max-height:58px;overflow:hidden;">
¿Qué es?
Es una prótesis hecha de titanio que se inserta en el hueso de la m... </div>
</td>
</tr>
<tr class="item_298 item" style="background:#fff !important;float: left;width:193px;height:273px;margin:10px;display:flex;flex-wrap:wrap;display:grid;">
<td width="193px" valign="top" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;height:150px;float:left;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/298/consultoria-symphony" style="display: block; color: rgb(157, 163, 169);">
<span style="background-image:url(https://d3fl5gs8u3b5cy.cloudfront.net/public/store_photo/a8/1d/1d8b_d4d4.jpg?c=7961);background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:193px;display:block"></span>
</a>
</td>
<td valign="top" style="font-size:16px;line-height:1.2;letter-spacing:1.2px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;word-break:break-all;float:left;">
<div style="color:#9da3a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:173px;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/298/consultoria-symphony" style="font-weight: 500;text-decoration:none; color:#9da3a9">
Consultoria Symphony </a>
</div>
<div>
<b>
<span>OGV 1,00</span>
</b>
</div>
<div style="margin-top:5px;height:58px;max-height:58px;overflow:hidden;">
Consultoría Robotics Process Automation• Proyectos de Visión&bu... </div>
</td>
</tr>
<tr class="item_297 item" style="background:#fff !important;float: left;width:193px;height:273px;margin:10px;display:flex;flex-wrap:wrap;display:grid;">
<td width="193px" valign="top" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;height:150px;float:left;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/297/fin-del-mundo-con-expedicion-crucero-australis" style="display: block; color: rgb(157, 163, 169);">
<span style="background-image:url(https://d3fl5gs8u3b5cy.cloudfront.net/public/store_photo/87/1d/1d6a_6f8a.jpg?c=0ae6);background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:193px;display:block"></span>
</a>
</td>
<td valign="top" style="font-size:16px;line-height:1.2;letter-spacing:1.2px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;word-break:break-all;float:left;">
<div style="color:#9da3a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:173px;">
<a target="_blank" class="msgLink" href="http://www.ownergroup.net/store/product/297/fin-del-mundo-con-expedicion-crucero-australis" style="font-weight: 500;text-decoration:none; color:#9da3a9">
FIN DEL MUNDO CON EXPEDICIÓN CRUCERO AUSTRALIS </a>
</div>
<div>
<b>
<span>OGV 3.816,00</span>
</b>
</div>
<div style="margin-top:5px;height:58px;max-height:58px;overflow:hidden;">
Ranking 15
11 NOCHES/SALIDAS OCT-MAR
Buenos Aires - Ushuaia - Crucero de Expedición Aus... </div>
</td>
</tr>
</tbody></table>
LB
Hi,
Thanks for the code, can you please copy/paste the full html email including the header with the css. Basically the whole email template.
Also, when you paste it here, make sure you wrap the code with the code tag so it appears in coding format.
See here example of how it should look:
https://minimalco.de/code.txt
Thanks,
Lee.
Hi Lee, thank you!
Yes, I tried using "code" tags but no luck, maybe I passed something over. The code is quite long and I don't wish to bother this thread with bunch of code, have any email for this purpose?
LB
Hi,
As well as the html, I would also need to see the header and css to work on this.
Thanks,
Lee.
I tried the code on my site, but there are compatibility problems with mobile phones, especially when adding numbers and commas like "192.168.l.l", also with the use of mediascreen tags.
Is there a solution??
felipe victoria replied
Deso anyone has a fix on this?
I've tried using em, !important, and the "------" fix, but none of those seem to work :(
Hi @felipe victoria, have you found anything yet? Need to find a fix urgently
Jenny - I am having the same issue and have not found a solution either... :-/
Email Design Gmail App Font
Source: https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing
Posted by: stoneclinking.blogspot.com
GMAIL iOS APP FONT SIZING FIX:
http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails
The Gmail iOS app increases font sizes to make them more legible on mobile. It can however have very unpredictable results and break email templates or make them look worse. Using either of the two methods below leverages a email width check to prevent the font sizing behaviour occurring.
Method #1
Method #2
I tried to format this but I can't get it to look pretty.
Removed the comments, they sometimes screw up rendering code.