At Hive, we love nothing more than a good geek-out, and who better to share a round-up of ‘essential’ digital titbits than Hive’s all-round innovator and discoverer of all things new and shiny, Full Stack Developer, Martin Pitt.

This month, Martin digs into his creative locker to bring you everything you missed and never realised you couldn’t live without regarding variable fonts, design language and goats (with the right attitude).

Geek-out, share on your slack channel, or impress your friends…. Enjoy.

Variable Fonts: The future of digital typography?

Image from Microsoft Variable Fonts demo website

Variable Fonts are a new technology which will impact digital typography, opening up new possibilities for artists, from new interactions to motion design. It will also enable accessibility improvements as apps become customisable to your needs.

The best way to understand Variable Fonts is to have a play – you’ll see why they’re innovative even if you don’t yet know how they’ll be used: https://v-fonts.com/

Variable Fonts allow font foundries to expose parameters that shape the letters. You could, for example, adjust the weight of the current font instead of swapping out to another font (a font family consists of fonts of different weights and italic combinations).

How this is applied, and how artists and creators work with Variable Fonts is yet to be determined but it has the potential to further push digital boundaries.

And since digital is inherently a fluid medium, it should be adaptable, interactive and open to change. This development has been a long time coming to the world of typography.

More on variable fonts

Microsoft have a really fantastic test-drive article with history, examples, tools and technical details:

Variable Fonts: An exploration of expressive, performant typography

If you want to read more about typography, then checkout this brand new book:

Flexible Typesetting by Tim Brown

And finally, here are two case studies of variable fonts that have been designed for Google:

OpenType Variable Fonts Moving Right Along

Decovar, a Decorative Variable Font by David Berlow

Visual gimmicks and design language

Screenshot from IBM’s Design Language website

This tweet by Steve Schoger reminded me of the importance & power of branding.

gimmick

/ˈɡɪmɪk/ noun

1. a trick or device intended to attract attention, publicity, or trade.

Visual gimmicks make brands recognisable, informing all aspects from graphic design through to digital interactions and animation.

It also reminded me of IBM’s Design Language where they wanted to bring motion design elements from the original IBM machines – typewriters, tape reels, and card machines – to their UI. In so doing, they connected their physical past with their digital present.

If you haven’t seen IBM’s design language philosophy before, it’s work that all digital designers and developers should know about.

Gimmicks are often overlooked – even the word has negative connotations – but if done right, they elevate a brand’s visual identity above the mundane, forging long-lasting connections with customers.

IBM got it right and Steve Schoger offers some recent examples too.

‘Oat The Goat’

Screenshot from Oat The Goat website

My favourite experience on the web this month is Oat The Goat, an animated children’s story about bullying, built for New Zealand’s Ministry of Education.

It’s a great example of how the web can be used to serve stories that feel engaging and can change behaviour.

Using 3D in an illustrative style is particularly clever, saving on time (compared to complex 3D realism), whilst making use of traditional creative filmmaking talent within the agency. By rendering through the browser rather than playing a video, the world continues to exist – birds fly, trees sway – whilst the reader decides what to do next, providing a smooth and immersive user experience – a much nicer contrast to your typical ‘stop-start’ video.

It also works effectively across a variety of devices, from phones, tablets, and laptops, and the developer has worked hard to make sure it even loads on slower mobile, WiFi and internet connections.*

The use of cards to depict choices is taken straight from modern game design practices and is a much more tactile experience compared to tapping buttons.

Put simply, it’s a visual feast and a beautiful experience.

If you do nothing else this week, take a look!

* There’s also a technical case study for those that want to look under the hood.