CODEWITHSUNDEEP
cssgmailhtml-email
elucid8
elucid8

Reputation: 1422

Font-Size in HTML Email via Gmail

Has anyone ever experienced a problem that, when a font-size style is applied to an element, the Gmail client isn't consistent when rendering? Example, I set the font-size to 17px and everything renders as too big, and then I set it to 16px and it becomes radically smaller.

Any input would be appreciated.

Upvotes: 3

Views: 14221

Answers (4)

Mark
Mark

Reputation: 6864

Are you making e-mail templates?

Then you should use good-old-back-to-basics font tag:

<font size="2">text</font>

Upvotes: 1

jtheman
jtheman

Reputation: 7491

Use pt instead of px for font-sizes, seem to work for me.

Upvotes: 5

Nirav Zaveri
Nirav Zaveri

Reputation: 717

I faced this same issue today. I didn't find an answer on this thread that helped me personally.

However, I resolved it by surrounding all the ill-behaved text paras with a span that had inline style like this

<span style="color:#613400;font-size:14px;font-weight:bold;font-family:Calibri,Helvetica, Arial, Sans-Serif;">TEXT</span>

I realised later that even when I give font-size:14px!important; font didn't stick to the visible 14px size (Browser's element inspector showed it was 14px!), and the reason was probably that font-family was set different for that ill-behaving text. When I added font-family selector to the span, things started working fine.

This same style when applied to or as a whole didn't work. What I found as a solution was that you should style all the text with span surrounding it.

Hope this helps someone who stumble on this thread!

Upvotes: 0

elado
elado

Reputation: 8760

Looks like they are overriding font-sizes and ignoring !important for text tags (a, p, etc)

When I applied the font-size to a wrapping <td> it worked fine.

Upvotes: 1

Related Questions