Menu icon Foundation
Font size on gmail with Zurb Ink

Hello,

I've tried the basic Ink template (http://zurb.com/ink/downloads/templates/basic.html), inlined with Zurb inliner (no other style added). The text doesn't scale and appears very tiny on Gmail/Inbox on my MotoG as you can see on the screenshot attached.

Do I miss something here ?

EDIT 1:

I've done two test files with the same structure:
H1
H2
H3
H4
p

One with Ink, one with the template builder of MailChimp.

I've checked both files for CSS that could change the size of the text and checked every headings and p values.
Values are:
H1 24px
H2 20px
H3 18px
H4 16px
p 14px

I've used the Zurb inline tool for both files.
I've checked Css inlined for both files.
I've checked both files with inlined Css on desktop and the result is the same.
I've sent both emails with Putsmail test service.

And I've got the following result on Gmail/Inbox:

Newsletterfonttest

Anyone has an idea of what is going on ?

EDIT 2: Problem solved.

Thanks to this comment:
"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."

from here: https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing

I've deleted the "min-width:580px" style on the two center and the text is good on Gmail and Inbox as you can see below.

Now the problem is can I do this ? Can I get rid of the min-width, what will be the consequences ?

Newsletterfonttest2

inkzurbemailnewslettergmailfont-size

Hello,

I've tried the basic Ink template (http://zurb.com/ink/downloads/templates/basic.html), inlined with Zurb inliner (no other style added). The text doesn't scale and appears very tiny on Gmail/Inbox on my MotoG as you can see on the screenshot attached.

Do I miss something here ?

EDIT 1:

I've done two test files with the same structure:
H1
H2
H3
H4
p

One with Ink, one with the template builder of MailChimp.

I've checked both files for CSS that could change the size of the text and checked every headings and p values.
Values are:
H1 24px
H2 20px
H3 18px
H4 16px
p 14px

I've used the Zurb inline tool for both files.
I've checked Css inlined for both files.
I've checked both files with inlined Css on desktop and the result is the same.
I've sent both emails with Putsmail test service.

And I've got the following result on Gmail/Inbox:

Newsletterfonttest

Anyone has an idea of what is going on ?

EDIT 2: Problem solved.

Thanks to this comment:
"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."

from here: https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing

I've deleted the "min-width:580px" style on the two center and the text is good on Gmail and Inbox as you can see below.

Now the problem is can I do this ? Can I get rid of the min-width, what will be the consequences ?

Newsletterfonttest2

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Viewing responsive emails on gmail mobile and inbox app will show the desktop version. These mail clients don't support/recognize the media queries.

Nicolas Rouault over 4 years ago

Thank you for your answer. I've also tested a basic template from MailChimp on Gmail/Inbox and I don't have this problem.

On both templates (Ink and mailChimp) the element has a 14px font-size css inlined (no media-query involved here). The result is very different, the font on the MailChimp template is way bigger than the font on the Ink template on my mobile.