Using calc() to control text sizes in Gmail on Android
While working on some emails recently, I noticed something — all my text in the Gmail app on Android looked a lot bigger than on Apple’s default iOS mail app! This is because Gmail’s default font size is different from iOS’ font size. So I set out to see how I can control that better.
I hate doing any unnecessary arithmetic, so why not leverage some fun CSS to do it for me? calc() takes care of this beautifully, and works in gmail!
So how do we go about targeting Gmail and changing the font size?
First, make sure you add the class .body to your body tag. It’ll look like this:
<body class="body">
Next, declare your styles via a media query in the <styles> section in your <head>. I’ll be using em units for my font size, but you can also use px.
@media only screen and (max-width:480px) { u+ .body p { font-size: calc(1em - .2em) !important;}}
What’s happening here? Gmail changes the doctype to u, which gets inherited down through the email. Adding .body allows us to target the email content and change the font size.
Try this out and let me know what you think! |
