Can text be scaled in a responsive email?

I'm trying to get a heading in an email template to scale up or down depending on the reader's screen size.

I imagined it would be a case of styling the H1 to the size I wanted in the desktop browser, and then setting the mobile style in my media query, but this doesn't seem to do anything.

The guy I'm working with tells me you can't have responsive text unless explicitly stated (what does that mean?). I've seen text scale fluidly in websites before, are these techniques not available in email?

zerocents zerocents, 4 years ago

Make sure you use !important in your style declarations so override the inline styles. Alternatively, you can scale text relative to its original size by nesting a span tag like so:

<h1 style="font-size: 32px; etc...">

And then applying the styles:

@media only screen and (max-device-width: 480px) {
    h1 > span { font-size: 50% }

Just to be sure, I'm assuming that you want to resize text for mobile devices. It's not possible to use relative font sizes for desktop mail clients.

Michael Muscat
Cheli, 4 years ago

@zerocents: you are awesome, thank you so much for your response! You were right in your assumption; I'm scaling the text for mobile devices so your suggestion is working well for me. Thanks for walking me through the theory :)

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free