News / Graphic Design

Fontsmith launches nine variable fonts, marking a turning point in digital typography

Fontsmith_variable_fonts_graphic_design_itsnicethat

Fontsmith: Variable Fonts

Type foundry Fontsmith has released a collection of nine variable fonts, which are available to download and trial for free via a dedicated microsite. Variable fonts have become a hot topic among graphic designers tackling type for digital formats, as the technology allows for entire font families to be condensed within one file, as opposed to multiple files for each style (weight, width, etc), hence speeding up load times.

Each of the nine fonts includes all the various styles, compacted into one small, optimised TrueType or WOFF2 font file, and can be customised by adjusting the font’s axes. For example, in a traditional text font family, you can adjust weight, width, italics, optical size and slant by moving each of these axes sliders one way or the other. In more expressive fonts, such as FS Kitty, you can move the slider to adjust the shadow axis; similarly, in FS Pimlico you can customise the font’s ‘glow’ by playing with that axis. All transformations move within a framework known as a design space, which defines the boundaries of the axes so as to prohibit unexpected distortions.

The variable fonts also allow designers to specify a particular weight and width anywhere within the design space framework, so rather than choose from a prescriptive set of weights and widths, the designer has more scope to customise their font choice. Likewise, designers can tailor optical size to ensure readability while also adapting the same font for more attention-grabbing text, which in turn improves accessibility on type-heavy sites.

The development of variable fonts is a turning point in graphic design for web, as by condensing families into one file rather than multiple files, it promises to improve web performance. Fontsmith’s type design director Phil Garnham explains, in an article on the Variable Fonts microsite: “Consider type rich news websites that rely heavily on a refined typographic hierarchy to deliver clear and accessible content. All font files have to load into your browser window and all at the same time in order to render the web page, more often than not that can amount to a lot of data. That data impact can create font fallback and browser rendering issues, especially on mobile connections. Our variable font files have a reduction in file size of between 70–85 per cent with all styles in one file, reducing the lag between loading and displaying the fonts, improving web font performance.” It’s also easier for designers to manage one font file, he says, when it comes to keeping their work organised.

The launch comes with a warning that, while variable font technology is developing fast (there are others online offered by various independent type designers) the technology is still young –  “only three years old in fact” says Garnham, so “support is limited”. While all major browsers offer some level of support, as do some desktop apps, “today is a good day to start playing and pondering ‘What can I create with a variable font?’” he suggests.

Fontsmith_variable_fonts_graphic_design_itsnicethat_5

Fontsmith: Variable Fonts

Fontsmith_variable_fonts_graphic_design_itsnicethat_1

Fontsmith: Variable Fonts

Fontsmith_variable_fonts_graphic_design_itsnicethat_4

Fontsmith: Variable Fonts

Fontsmith_variable_fonts_graphic_design_itsnicethat_2

Fontsmith: Variable Fonts

Fontsmith_variable_fonts_graphic_design_itsnicethat_3

Fontsmith: Variable Fonts