I've done this too - I think I've even gotten weirder like .26px for certain webfonts!
Thanks so much @Mark + @Wilbert!
Earlier this week, I had to address some text-wrapping and button-width ugliness that was appearing on the android gmail app and android native email client technical use cases. Your replies gave me the push I needed to finally give viewport units a shot!
In this particular scenario, I decided to style my problem elements with vw units and then wrapped them in a media query that targets a respectable range of mobile devices.
After running my build through Litmus, the vw units definitely nipped the aforementioned text/button mayhem in the bud. Unfortunately, I didn't get the size settings totally right on my first pass, but after a few tweaks, everything was looking fly and ready to ship!
I will say that I am actively trying to develop more feel re: how viewport units scale in comparison to ems, %, and px units. At the moment, I'm embarrassingly picking a number 1 - 100 at random (within reason) and then essentially "goldilocks-ing" it repeatedly until the element reaches "just right" status. (Which is super interesting from a curiosity standpoint -- but makes for an incredibly inefficient workflow longterm ha!)
Hopefully, I'll be able to gage them more intuitively as my comfort level grows through future use!
Thanks again to you both for the wonderful guidance! It is very much appreciated and I'm super excited to see what else I can do with them in my future email projects!
Started a new discussion: vw, vh, vmin, vmax Unit Support
Hi Jaakko,
Here's what i do: if I have a .otf or .ttf file is convert it to a .woff via this tool:https://transfonter.org/
Then I upload the font to the hosting section of my ESP. After that I use the following css snippet (with desired font information added in of course):
@font-face {
font-family:'Your-Font';
font-style:normal;
src: url("https://hosting-source.bm23.com/99999/public/TemplateAssets/YourFont.woff") format("woff");
}
(and place this MSO conditional at the very end of my css)
<!--[if mso]>
<style>
span, td, table, div, a {
font-family: Helvetica, sans-serif !important;
}
</style>
<![endif]-->
Paul Airy also does a phenomenal job explaining webfonts in his newsletter Type:E which you can find here: http://createsend.com/t/d-31111365CA37ACC8
Data and Facts. I never go to war without my weapons :). I'm actually currently trying to get buy-in for a resourcing product right now and my method for this one is to use myself as the example. I believe in this tool so much that I'm willing to pay the subscription fee out of pocket to show the value it could add to our organization. While some people my shudder at my willingness to shell out my own $, I look at it as a win-win. Even if my org. chooses not to integrate it into our existing processes, the quality and efficiency of the work I do will continue to reap the benefits of this tool regardless. Which is good for them and great for my sanity :D
Twitter: @prebbbz