Variable fonts at TypeTogether

September 2020

We are happy to introduce some new possibilities and changes to our webstore we trust will make a big difference. If you are a graphic designer hunting for exciting, new customization possibilities with variable fonts, or a developer looking for an affordable way to produce cutting edge responsive design, you’ve come to the right place.


First, some notes about variable fonts
Let’s start with a quick reminder: what are variable fonts and why are they important? This new technology, added into the OpenType font format in 2016, is a compression mechanism that allows multiple individual fonts or styles to be packed into a single font file. These fonts are compatible variations of a design that can happen along one or many variation axes such as weight, width, or optical size, to name just some of the most common ones, but they aren’t limited to those axes. Font designers can define almost anything as an axis and cause the font to change along that spectrum.

There are many advantages to this new technology. The file size of a variable font containing many typographic styles is significantly smaller than having those styles as individual font files, hence reducing the required bandwidth for serving fonts to websites — or having a smaller file with more fonts on a mobile device, smartwatch, and the like.


But that’s not the whole story. To be fair, variable fonts do not just contain a series of compatible individual fonts, they allow designers to obtain a customized version of a font that exists within the design space: e.g. any weight between light and regular, or any width between narrow and condensed.

This dynamic selection of any instance of a font happens in real-time and effectively extends the typographic palette, allowing a whole new level of typesetting finesse. The expanded possibilities of this technology have encouraged the creativity of type designers even more, producing some interesting experimental and parametric designs.

When it comes to responsive design, we believe that variable fonts are the cornerstone of typographic composition. It allows slight changes in the letterforms themselves that are custom built for each device, screen size, and pixel density. To prove this we asked digital typesetting expert Jason Pamental to develop a technology demo for us. Check them out here: 

• Literata technology demo
• Portada technology demo 

A final piece of advice before you start looking for variable fonts: while most browsers have quickly added support for OpenType variation tables, that is not quite the case with desktop publishing and video editing applications, though the latest versions of Adobe DTP Apps have basic support for variable fonts. We recommend verifying support here:
• The website Can I use ___ ?, to check any kind of compatibility
• Nick Sherman’s Variable Fonts site.

This is Jason Pamental’s Moby Dick demo using Literata variable. 


Changes and new deals on our webstore
As a direct response to requests by customers, we added a new lower pageview tier for webfont licenses. Our previous lowest tier covered up to 100,000 page views per month; now the new lowest tier is up to 10,000 page views. This allows startups, small businesses, and professionals with low traffic websites to use affordable professional fonts.

Additionally, we are now allowing the purchase of variable fonts as individual styles, so it is no longer necessary to purchase the complete type family to receive the variable fonts. This permits the purchase of only the parts of the typeface you are going to use, and at a lower price. And to make this even better, all variable fonts now have an extra discount of 15%.

Here are some comparisons between our previous pricing model and our new one, along with file size in the last row:

With all this talk of variable fonts, you’re probably asking, “How many do you have and how can I find them?” Below are the links to our published families with variable fonts so far. Once on each page, scroll down and look for the animated styles to get the fonts.

• Adelle Mono  — 2 axes: spacing from true monospaced width (Mono) to proportional width (Flex), and weight.
• LFT Arnoldo  — 1 axis: weight
• Bree, Bree Greek, Bree Cyrillic  — 1 axis: weight 
• Catalpa  — 1 axis: weight
• Lektorat — 3 axes: text weight, text slant, and display weight/width
• Literata — 2 axes: optical size and weight
• Portada  — 2 axes: optical size and weight
• Protipo — 2 axes: optical size and weight

Looking for more details and technical information about variable fonts?

•  We recommend this introduction by John Hudson.
•  This is a good article by Bianca Berning about using variable fonts for legibility purposes.
• If you are looking for more information about responsive design in general, we recommend Responsive typography: Using type well on the web, by Jason Pamental. 
•  And Responsive web design, by Ethan Marcote 

About Us

TypeTogether is an indie type foundry committed to excellence in type design with a focus on editorial use. Additionally, TypeTogether creates custom type design for corporate use. We invite you to browse our library of retail fonts or contact us to discuss custom type design projects.