Something Marvelous Is Coming: Variable Fonts

Thin. Bold. Condensed. Extended. The variety of fonts available today are seemingly limitless – unless you want to do something like have a fast-loading website. Then you’re better off using fewer choices.

Patrick's post on variable fontsThin. Bold. Condensed. Extended. The variety of fonts available today are seemingly limitless – UNLESS you want to do something like have a fast-loading website. Then you’re better off using fewer choices.

Why? Because multiple fonts and their variations take up huge amounts of file space. Which requires more information to load into that nifty site you’re so proud of. Which makes it slowwww.

And on some browsers (like Firefox and Chrome) it may display a default font until the page is fully loaded. It might even look different on a Mac vs. a PC. Definitely not what you intended your readers to see.

Variable Fonts to the Rescue!

Like an Avengers team of typography heroes, Adobe, Apple, Microsoft and Google have joined forces to support a new standard called OpenType 1.8.

So what’s the big deal? Now you can basically stick everything into a single, highly optimized file. Instead of downloading a separate file for each font style or width, your site only needs to make ONE network request to access ONE file for ALL weights and styles of a typeface. In other words, it’s a single font that behaves like multiple fonts.

Skia Variations
For Example: Look how many variations are possible in this animation above. Normally this takes take many separate font files. But it’d take just a single variable font. a significant reduction in the number of font files and file size required.

More Superpowers: Responsive Typography

Variable fonts will also help with your responsive Web design, allowing you to adapt for the many screen sizes and devices that people will be viewing. Type will have the power to shrink, grow, gain weight or get thinner seamlessly. Kinda like Antman meets the Hulk. Which means you’ll be able to generate the exact variation you need, and respond to factors that influence readability like viewport size, viewing distance, contrast, ambient light and user preferences.
It works like this: Fonts are built on a number of axes, each one controlling a different aspect. Variable fonts give you greater control by assigning a point value to EACH axis that will affect the font’s final look — as shown below.

More of Patricks' font images from post

width axis in Patrick's font postDunbar Variable FontsAnd it’s good news for type geeks (like me) who still get excited over printed design. Now we can condense or extend glyphs (specific shapes of letters), customizing them for a specific look. We can sharpen or round a typeface, shorten the descenders, or raise a font’s x-height in our never-ending pursuit of truth, justice and the perfect layout. Because, after all, bad typography is villainous.

It’s not a perfect world. Yet.

Right now, there aren’t enough variable fonts to go around. Type designers need to make more and be sure they work on each system. And we’ll need applications called “rendering engines” that work behind the scenes to actually show the font variations. Which means browsers and design software will have to support those applications.

It’ll take time to for font developers to convert and develop their current fonts to the new format. Browsers, design software and third-party software will have to adapt their apps to the new format.

Like past font formats (EPS, TrueType and OpenType) this new format could take as long as a decade to be fully implemented. As a designer, I’m excited to see this new format come to life. The infinite, perfectly drawn font variations are very exciting and can’t come fast enough.

Yet we’re on our way. The biggest companies behind operating systems, design and the Web have all collaborated on the new format. Notable independent contributors are already refining their type standards. It’s a brave new world ahead.

Up, up and away.

Best Practices Exist for a Reason, Part 1: Email

I’m continually stunned when a client, art director, copywriter or any other strategist in the marketing industry insists on using a design or copy technique that directly contradicts proven best practices.

I’m continually stunned when a client, art director, copywriter or any other strategist in the marketing industry insists on using a design or copy technique that directly contradicts proven best practices.

Over the years, I’ve absorbed studies about the ventricles of the brain and how it performs distinctly different cognitive processes. I’ve read color studies, the anatomy of eye movement, how words and numbers trigger comprehension and reaction, fonts and their role in evoking an emotional reaction, persuasion psychology and unconscious motivation—the list goes on and on—all in an effort to apply these learnings in order to help our clients get the maximum response to their marketing efforts.

While I have a laundry list of “must-do’s” for every medium, I thought I’d share a few digital best practices as Part 1 in a series, and I’d love to hear why you’re NOT following these proven techniques:

  • Test Your Subject Lines: According to a 2014 poll by Howling Mad’s Parry Malm, marketers ranked subject lines among the top variable that affected email response rates however 25% ever conducted any testing. Parry (one of the leading experts on email subject lines) has learned that ‘Sale’ delivers 23.2% opens while ‘Save’ only gets 3.4%. He also found that if the subject line is personalized but the email content isn’t, you gain opens but don’t drive clicks. I put that insight in my ‘Duh!’ file.
  • Buttons Will Get More Clicks Than Text Links: Many have tested this theory (myself included) and the answer seems to always conclude that buttons will outperform text links. AWeber conducted a series of button/text links, and their findings are fascinating as they determined that, over time, text links outperformed the buttons—but they also concluded that what works today, may not work tomorrow. Again, test and keep testing.
  • Text Links Should Be in Color: While this might seem like a ‘Duh!’ I’m always surprised when I accidently hover my finger or mouse over a block of text and discover “there’s a hyperlink in them there hills!” If you want me to take an action (like clicking on something) then lead my horse to the water.
  • A Button Needs to Look Like a Button: Neil Patel, the co-founder of Crazy Egg and KISSmetrics, owns the button testing world hands down and he concludes that the digital button that gets the most clicks is shaped like a button (rounded corners, slight drop shadow) and is colored (or at least in contrast to the rest of the page of copy in order to stand out—duh). Try NOT to match the color of your button to other call-out boxes on the page as the distraction prevents the action.
  • Button Copy Should Be in First Person: Try this test yourself. If your action button is written in third person (“Start now” or “Try Product X Free”) try testing it against copy in the 1st person (“Help Me Work Faster” or “End My Headaches”). It’s highly likely you’ll see a lift of at least 25% in clicks, at least according to Ashtyn Douglas and Joanna Wiebe who conducted similar tests.
  • Fonts Matter: While many designers will argue this topic endlessly, the current consensus is that sans serif fonts are superior for body text and serif fonts are best for headlines. Of course if you have a newer display, it doesn’t make much difference. But not everyone has the newest technology and some work on displays that are 10+ years old, so if you target a senior audience (yes, that includes senior managers in small companies who cannot afford to regularly upgrade their hardware), you may want to design for maximum legibility. Make sure your font is a system font (most likely to be supported by the majority of email clients and web browsers) like Arial, Helvetica, Verdana, Geneva or Trebuchet MS, and large enough for people to read without any effort—at least 10 if not 12 pt. Even though Google is now providing supposedly supported modern web fonts, it’s a little too early to tell whether every email client and web browser will be able to properly display them.

In summary, if all of these marketers have already done all the testing for you, why wouldn’t you at least consider these insights and apply them to your own email marketing efforts? Tell me. I’m all ears.