Variable fonts - A New and flexible font type in web design

vaughn paul
4 min readOct 18, 2016

--

Designers always wanted a flexible font for their web design projects. All the web designers are looking around the globe and discussing all the possibilities of the new font design which was flexible and compactable for their projects.

Now this discussion has shifted to most awaited font by the designers who were earlier announced at the ATypI conference in Warsaw.

In that meeting, the world was introduced to a new kind of font which was named as a Variable font. It was jointly developed by Apple, Google, Microsoft and Adobe.

Now some of you might don’t know about the variable font so let’s jump into it and find out what is variable fonts and what you can do with this flexible font design.

What is a Variable Font?

To say it simply “variable Font is a single font file that behaves like multiple fonts.” If you are a web designer or web developer, then I’ll bet that you will love this font. Let’s just imagine that a single font file gaining a tremendous flexibility of width, weight and others attribute without gaining significant file size.

So imagine what this means for website design and Development Company.

You can extend your glyph widths ever so slightly to accommodate the narrow and wide viewpoints. It’s easy to raise your favourite font’s x-height just a touch small sizes. You can sharpen or around your brand typeface in many ways.

You can also sort your font descender’s slightly so that headings can be set nice and tight without letters crashing into one and another.

Simply you can do each and everything a designer needs with this natural, responsive design.

Who did this OpenType variable font?

The advancements of the open font type variables are done with the four top companies like Google, Apple, Microsoft and Adobe and along with the independent contributors.

These companies and independent collaborators have worked on this project for more than half a year on a significant improvement to the OpenType font file specification that now includes a new rising technology the OpenType font variations.

History of Variable fonts?

Open type font variations which mean the variable font is built on the model which was established in Apple’s actual type GX variations in the mid-1990s. But it has fully integrated that model into all aspects of the OpenType format, including Open type layout. And it is now available to both the actual type and compact font format (CFF).

This variable font has been made by implementing a lot of changes and addition of numerous tables to the format, but it is also a revision of many existing tables, these changes are mentioned as points in the appendix of John Hudson article.

Font specifications:

The variable font allows type designers to interpolate a font’s full glyph set or the individual glyphs up to 64,000 axes of variations like weight, width, define specific positions in the design spaces as bold, italic, condensed, etc.

The full technical specification for OpenType Font Variations is incorporated into the OpenType specification version 1.8.

How do these work?

We know that installing a google fonts is very easy. Usually, we select what we require and then copy the import URL. It may look simple, but each font has the single glyph and weight set. But for certain fonts, we can install regular or bold fonts. This could require more HTTP code for loading both styles individually.

This is what was happening earlier with Google fonts, but now Variable fonts contain all the information in a single file. Along with these, we can change weight, length or a certain height of the font in the browser itself.

Now if you think how the customization or adjustment are controlled, then it’s by the font designer.

Overall I say variable fonts are necessary. But what is such a necessity of changing font’s style, then I would like to give the following reasons:

• Letter width is adjusted for larger fonts

• For improving spacing, adjusting weight is important

• Font style can be updated as on screen size

Well, variable font are not declared officially. But these four tech companies are trying to apply the font adjustments.

Conclusion:

This is all about the variable fonts. I hope this was helpful for you, if you have any sort of queries or suggestion feel free to comment us below. We’d love to hear words from you.

--

--