Tip: Override the minimum font size on the iPhone and iPad

By Ros Hodgekiss

December 07, 2010

9 Comments

Is the minimum font-size on Apple's iPhone and iPad breaking your email layouts? Wish you could do something about it? Thanks to our ever-helpful customer and code guru Brian Thies, we thought we'd share this simple tip with you... And potentially save yourself a bit of frustration down the line.

The issue: 'Big fonts are ruining my design!'

Now, nobody likes teeny-tiny fonts when reading an email on a mobile device, but sometimes, an exact font-size is critical to maintaining a layout, especially when tables are being used. However, this can all go awry when Apple Mail's minimum font size comes into play on the iPhone and iPad. For example, with default settings at work, the minimum font size that Mail on the iPhone can display is a generous 13px! Here's a similar example on the iPad:

Unfortunate line wrapping

Sadly, this pretty much breaks the layout in sections of our email newsletter (and maybe yours, too).

The solution

Brian's fix is very elegant - by adding the following snippet of code to your CSS styles, you can override the default font sizes on Webkit-based email clients, thus avoiding layout glitches on the iPhone and iPad:

<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style> 

The result being:

Layout is fixed

Ahh... That's better. Take note that this fix specifically applies to Webkit email clients, so you can safely add it to your code and count on it not causing clients like Outlook '07 to throw in the towel. However, if you're worried about it affecting Apple Mail or your campaign's webversion, it may be worth popping it into a @media query.

Many thanks again to Brian for sharing this elegant fix in our forums - hopefully it will give you and your clients the upper hand when coding your email designs for smaller screens.

Want to know more about optimizing your email designs for mobile devices? Check out this earlier blog post for a grab-bag of useful tips.

Posted in:

9 Comments

  1. Jonathan Snook
    December 7, 2010 7:43am

    Be sure to check out Roger’s article detailing the impact of font-size-adjust on resizing text in desktop Safari. Summary: it prevents text resize.

  2. Richard@FM
    December 7, 2010 4:46pm

    Brian is turning into a bit of a legend, well done Brian.

  3. Aidy
    December 7, 2010 5:33pm

    Thanks and thanks a lot to Brian Thies. Find a lot of the tips on this blog really helpful, would be great if CM collated them into a definitive checklist!

  4. Rich Simisker
    December 7, 2010 6:08pm

    @Jonathan: good cautionary advice, though I’d argue that the real “WTF” with Roger’s example is that it’s been applied to the body element. With more judicious application it may not have been article-worthy.

    Having said that, when -webkit-text-adjust:none can be applied conditionally using media queries, there’s no reason not to include it in one’s ever-growing style declaration base, along with all the other necessary ones [Yahoo shortcuts, Hotmail widths etc].

    Brian is indeed making quite the name for himself here. The guy’s a one-man solution machine :D

  5. Rene
    December 11, 2010 6:02pm

    >> Brian is indeed making quite
    >> the name for himself here.
    >> The guy’s a one-man solution machine :D

    ... agreed. :) Thanks for sharing…

  6. Erwin Heiser
    December 24, 2010 8:17pm

    the minimum font size that Mail on the iPhone can display is a generous 13px

    Too small font-sizes is a common designer disease. If it’s a minimum size on an iPhone there’s a solid reason for that: it’s called “readibility”.

  7. Theresa Neil
    December 24, 2010 8:25pm

    What’s an ideal font size we should aim for on tablets if 13px is the minimum?

  8. Anthony Williams
    December 24, 2010 8:26pm

    It’s a much better idea to advocate the use of -webkit-text-resize: 100% (and -ms-text-resize: 100% for Windows Phone 7 users) instead of text-resize: none. That way, the text size will be kept following portrait/landscape orientation changes.

  9. James Ashcroft
    February 16, 2011 2:53pm

    I know this is a different issue, but has anyone found a fix for iPad/iPhone rendering the font for contact details as blue?

Comments for this entry are closed.

Browse the Blog

  1. Behind the Scenes (31)
  2. Interviews & Buzz (133)
  3. New Features & Updates (234)
  4. Observations & Answers (221)
  5. Tips & Resources (491)

Explore the Email Gallery

Beautiful! “@cameronmoll: Email successfully @CampaignMonitor‘d:” http://t.co/KbrfnS1a ^RH

Follow us on Twitter