CODEWITHSUNDEEP
htmlcssfontsresponsive-design
user3779956
user3779956

Reputation: 1

Struggling to increase & reduce font size on responsive email campaign

I am creating some responsive email templates using HTML / CSS and am having trouble controlling how the font appears in the mobile view.

I need to increase the font size of the text body, and reduce the font size of the header & footer text.

I have tried adding table classes, td classes and span classes but to no avail.

Has anyone experienced similar problems and come up with a fix?

Upvotes: 0

Views: 1487

Answers (1)

docodemore
docodemore

Reputation: 1074

You could try: http://css-tricks.com/viewport-sized-typography/

However, I do believe it would be much better to avoid having to change the font size, and using a fontsize that will work for all screens. The main reason is because every email client or webmail portal handles CSS differently. In fact: The scope of available css and html is severely limited, so inorder to maintain sanity and cross-client support it is best to stick with a responsive design that:

  1. Uses nothing but percents.

  2. Uses tables for multiple columns (if any)

  3. Uses viewport https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Further Reading: http://blog.sumall.com/journal/3-steps-to-make-your-e-mail-design-responsive-2.html

Upvotes: 1

Related Questions