Shaping text in email

The nature of responsive email means that as the content container gets smaller, we really need to retain control of how the things inside it move around. This includes text, which has a habit of expanding in different environments and so we are used to making it flexible.

Sometimes we may break a long title for example, by adding a hard return a <br />. On the mobile version (i.e. when media query rules apply) we may want to remove this to allow the text to flow.

We do this by:

LONG HEADING OVER <br class="nomob">2 LINES ON DESKTOP

where CSS used is:

*[class=nomob] {display:none !important;}

Sometimes we may even want to add one in. This is a lot trickier as we can’t just inject a <br /> or hide one and then reveal it later as some rendering engines take things too literally. There is a way (another blog post on show/hide I guess) but it would be extremely verbose just to insert a <br /> (involves a styled table, conditional statement wrapper, and CSS trigger). So looking for a cleaner way reveals this:

Call us on <b class="show">012345678910</b>

where CSS used:

*[class=nomob] {display:block !important;}

If you don’t want to use a <b> then you could use another tag, I ain’t your momma, I’m just illustrating how it could be done. You could just add it to the span.

You may wish to centralise your text. This is simple enough using this CSS and applying the rule to your styling element should be your td:

*[class=centerme] {text-align:center !important;}

Also you can find that long urls can break the flow/structure of your carefully crafted responsive email. Avoid that by using this CSS rule, apply globally so above the media query.

.a {word-wrap: break-word important;}

And also inline:

<a style="word-wrap: break-word !important;" href="#" target="_blank">areallylongurl</a>

This makes all the long urls behave themselves and wrap around onto another line. Be careful using this for other elements such as body text as it will make the words break in illogical places.

Here is the CodePen of these little techniques.

There are so many of these, as ever this is the tip of the iceberg. It’s often a good idea to change the styles as well, so bump up the body copy size and maybe reduce any very large font sizes for the small screen, just be sure to adjust the line-height at the same time, using font size + 4px as a rule of thumb to avoid clipping. Sometimes it might be advisable to make the contrast clearer, for example to remove a background image and replace with block colour, however, this should really be addressed using a “mobile first” approach to design.

We always love to hear how other people do things. I heard about someone once using an inline transparent 1px spacer gif – styling it inline block and then forcing it out on mobile to push the text about, but you wont find me doing that. OK it was me.

  • Mark Robbins

    Great advice.

    I also like to use   to stop words breaking, very useful for phone numbers, post codes and brand names.

    Such as
    01273 123 456
    BN1 3AF
    Action Rocket

    But be careful not to do too a string longer than the narrowest device your email will be viewed in. Can also be done in CSS with white-space:nowrap;

  • Mike Ragan

    Ahhhh yes! I too am a fan of the ol’ non breaking space! Adding it in between words you need to keep together is a nice little hack – I use it for CTA’s sometimes to keep them honest. Cheers for the comment Mark :)

  • Jaina

    Great tips on word wrapping for long URLs. Really handy when you’re building emails with dynamic content, and you just *know* there’s going to be a ridiculously long link in there at one time or another.