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.

A Fount of Knowledge About Fonts

Get ready, we’re going to get a little geeky here — about fonts. Specifically, OpenType fonts and how they add so much flexibility and readability to any project. What’s even better is that you don’t need the latest designer tools or applications to add interest and impact to your work.

Get ready, we’re going to get a little geeky here — about fonts. Specifically, OpenType fonts and how they add so much flexibility and readability to any project. What’s even better is that you don’t need the latest designer tools or applications to add interest and impact to your work.

Got Microsoft Word? Get set to make everything more professional and legible, while simultaneously adding that “Wow” factor. But first, a brief history of font types:

PostScript Type 1 Fonts

Introduced by Adobe in 1984, PostScript Type 1 fonts are encoded outline font specifications used for professional digital typesetting. They were not widely recognized until Apple came out with its first LaserWriter in 1985 — which at that time had fonts residing IN the printer, using bitmap outlines on the computer in different sizes.

TrueType Fonts

After the introduction and implementation of PostScript Type 1 Fonts, Apple and Microsoft developed an outline standard in the late 1980s that has become the most common format for fonts on both Macs and PCs. This generation of fonts is referred to as TrueType Fonts. TrueType Fonts improved upon PostScript Type 1 Fonts by giving developers better control of how their fonts are displayed at all font sizes.

OpenType Fonts

And finally, OpenType Fonts were developed in the early 1990s. OpenFonts improved upon TrueType Fonts by increasing readability, facilitating different writing systems more effectively, and even adding typography tricks! (That’s the simple description. The geeky one is you’ll have more powerful typographic formatting and simpler font management, with better cross-platform support and portability.)

Of course, you knew that already, right? So check out this animated GIF below, detailing some of the features of OpenType fonts:

Play with the above Demo at Ricardo Magalhães Blog
Play with the above Demo at Ricardo Magalhães Blog
  • Ligatures: Simply stated, a ligature occurs where two or more letters are joined as a single glyph. Why use them? They help keep letters from overlapping and can really improve legibility.
  • Oldstyle and Lining Numerals: The default in almost all fonts is aligning numbers perfectly with each other, which works very well in charts, spreadsheets or anywhere math is involved. But there are some Oldstyle fonts with a default perfect for if you are just using numbers within normal text. Why care? You can now choose which number format to use in any font. Lining numbers tend to stand out in body text because they all stand tall like capital letters. Oldstyle numbers look more like upper and lower case characters, creating a more blended appearance within the text. This is one of my favorite benefits of OpenType fonts, as they improve readability and aesthetics. In an earlier post — “3 Type Facts You Don’t Know, But Should“ — I explain both ligatures and Oldstyle numbers in much more detail if you would like to learn more.
  • Contextual and Stylistic Alternatives: Think of these as accessorizing your fonts, like adding cool jewelry to your type with extra letters and swooshes.
  • Fractions: Now you can choose to use true fractions actually designed for the font, instead of squishing numbers together separated by a solidus. A definite plus for look and readability.
  • Ordinals: In the same way as fractions, ordinal characters are designed for the font rather than programmatically created, increasing legibility.

Remember, these added features are only found in OpenType fonts. This means when purchasing any new fonts, it is important to pay attention: TrueType fonts are still sold. Make sure you are buying an OpenType font.

Flaunt Your Fonts

Ready to get in touch with your inner type-geek? Study this tutorial by Magpie Paperworks first on how to turn on these extras in Microsoft Word.

Whatever the project may be, OpenType fonts could make the difference between so-so and so much more impressive.

Top 5 Reasons People Don’t Trust Your Direct Mail Marketing

Direct mail marketing is considered the most trustworthy marketing by recipients, so why wouldn’t they trust your direct mail? There are actually many of reasons for this. We will focus on the top five reasons, as they are the most common.

Screen Shot 2016-05-06 at 9.27.28 AMDirect mail marketing is considered the most trustworthy marketing by recipients, so why wouldn’t they trust your direct mail? There are actually many of reasons for this. We will focus on the top five reasons, as they are the most common.

1. Superficial/Unbelievable Content

People don’t want to be misled. It makes them very angry. Your message is your brand promise — it cannot be vague or open to interpretation. This also includes over promising — bait and switch tactics are very bad.

How To Fix It: People buy from companies they believe. Be direct and specific with your headlines, calls to action and copy. Be realistic with your statements and promises. Authentic and direct messaging is the best way to build trust. Do what you say and say what you do. Under promise and over deliver is your best bet.

2. Too Busy

You have included too much information for them to process. It’s too hard to figure out what they need to do. It gives them a headache just to look at it. It appears that you are trying to throw information at them and may be hiding something in all that copy they don’t want to read, so they throw it away.

How To Fix it: Use less copy with bullet points for a quick scan. Be specific in your call to action on what you want them to do and why they should do it. Use fewer images and make sure that they work with not only your branding, but also with the copy and tone of your message. Clear and compelling messaging is necessary to make the right impression. You only have a few seconds before you end up in the trash.

3. Dated

When was the last time you updated your design? If you have been sending direct mail for years, many times the control piece ends up being the same as it was in 1995. That’s not good. The impression you give with an outdated look isn’t nostalgic — it’s suspicious. This can be especially true of letters. Don’t be an old school form letter. You will end up in the trash.

How To Fit It: Check your copy for out of date wording. Does it flow like 2016 language or do you need to change it? Look at your competition. How does your direct mail compare to theirs? Make sure you have relevant information — these days information gets old quickly.

5 Tips for Choosing and Pairing Fonts

Good font selection can take almost any design and bring it up three levels. Yet to many, this can be daunting. There are so many fonts to choose from! And with the advent of the computer, the number of fonts has exploded.

I’m asked by many of my non-designer friends to look at the flyer or presentation they’ve created and tell them what I think. I soooo hate when this happens. As a designer, I’m pretty fussy about type selection. Are they appropriate? Are they paired well? Is there enough variation to create a good hierarchy? So when I look at my friends’ work, they’ve almost always made poor selections — mostly from lack of knowledge, and some just have bad taste.

Good font selection can take almost any design and bring it up three levels. Yet to many, this can be daunting. There are so many fonts to choose from! And with the advent of the computer, the number of fonts has exploded.

First we need to understand the difference between fonts.

Display fonts are designed, and look best at a larger size. They tend to have strong “personalities” meant to make a statement. They often don’t have many variations in weight, and will typically be the dominant font on your page (even if they are used the least).

Text fonts are designed to look good as body text. They work best at small- to medium-sizes but can be used larger with extra attention paid to their letter spacing. Their personality will not be as bold as a display font, but can still have a lot of character. It just tends to be a little more subtle.

So how does one pair fonts? Here are five approaches that will help you look like a top-notch designer.

1. Limit Your Choices

Without the help of a designer, people often make the mistake of choosing too many fonts. So try limiting your font selection to two to three font families. A font family is font and all its variations (i.e., regular, italic, bold, bold italic, etc.). Use fonts with a large family and you’ll be safe using them, knowing that they’ll complement each other.

Garamond Font FamilyLimiting your choices doesn’t mean only use two to three fonts. It means using the right number of fonts for the project you are designing. With that said, the more fonts you use, the harder it is to balance them together and create harmony that enhances the design. As the examples show, one, two or many fonts can work when designed well.

2. Find the Right Characters

Fonts have personality and therefore you need to find the right personality for your project. If it’s a corporate presentation to bankers, you’ll want to consider fonts that are safer and risk-averse like Helvetica and Times Roman. Or you could add a little play with Gill Sans or Palatino. All are corporate in personality and will not make you look risky.

Fonts with a more corporate feelOn the other hand, if you are creating a flyer for employees about the company picnic, you can use fonts with more fun and bold personalities like Boston Traffic or Geometric. Or a personality that feels more picnic-like such as ITC Kabel or Logger.

Fonts with a more playful feelWhen it comes to character of your fonts be careful, you don’t want to look too cute either. Show your work to colleagues and get their feeling about the fonts. They may have a different opinion.