Variable Fonts

scroll for more

WHAT IS A VARIABLE TYPEFACE?

A variable font contains multiple
font styles in one file.

thin

thin condensed

thin expanded

regular

regular condensed

regular expanded

bold

bold condensed

bold expanded

WHAT IS A VARIABLE TYPEFACE?

Starting from one default master
any other instance can be added.

Different Masters in Line

WHAT IS A VARIABLE TYPEFACE?

It enables seamless changes
in characteristics like

Weight

Width

Slant

try to hover ;)

try to tap ;)

Why should i care?

Within the last years design got more and more dynamic. Adaptation to the environment is important so why shouldn't fonts be adaptive too?

Why should i care?

That's why I created a free
variable typeface to use and play with.

>>Do you want to try it?<<

ALDERA TYPEFACE

Type what you want

Weight:
Width:
Slant:

THE FONT

Aldera Variable

The font is a straight forward sans serif typeface with a x-height set with the golden ration in mind. Variations are possible along the weight, width and slant axis. Weight reaches from 100-900, the width and slant parameters start at zero and go up to nine. To showcase the biggest variety possible.

Characters

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

Ä

Ö

Ü

Numbers

1

2

3

4

5

6

7

8

9

0

Signs

!

?

.

:

,

:

-

–

_

„

“

/

(

)

+

<

>

&

%

Aldera Type

The Process

First Type sketches on paper

First Sketches

I started off with some hand drawn sketches. Nothing special but I guess its the fastest way to get your idea from brain to paper.

The redefined printed font sketches

Refined Sketches

After drawing the first shapes in Illustrator I printed them and let some time pass before looking at them again.

Instagram Poll screenshot

Decisions

There were a lot of decisions to be made when creating the font. I had multiple ideas for some letters and had to choose my favourites

Illustrator Image that shows letters

Illustrator ma friend

Illustrator was my tool of choice for the letter creation. Most Type designers would recommend Glyphs or any other Type software but as I knew my way around Illustrator so I chose it.

Illustrator screenshot with a thin, a slanted and a bold letter

More Illustrator

As it is a variable font I needed to draw multiple masters. So for every letter there are 5 masters. I chose: thin, slanted, bold and bold-extended-slanted.

The Glyphs font software screenshot

Glyphs

Then it was time to move to Glyphs.
Luckily I found a great tutorial on how to create variable typefaces in Glyphs 3.

Image from the glyphs software - align masters

Linking Masters

Learning how to linking masters was by far the most difficult step of my journey. I haven't mastered it yet as you can see there are some small hick-ups in the font interpolation.

Custom code in Webflow necessary to work with variable types

Some Code as well

Webdesign is where variable fonts can really show their true potential, so I also had to code some lines to implement my typeface.

First Type sketches on paper

First Sketches

I started off with some hand drawn sketches. Nothing special but i guess its the fastest way to get you idea from brain to paper.

The redefined printed font sketches

Refined Sketches

After drawing the first shapes in Illustrator i printed them and let some time pass before looking at them again.

Instagram Poll screenshot

Decisions

There were a lot of decisions to be made when creating the font. I had multiple ideas for some letters and hat do choose my favourites

Illustrator Image that shows letters

Illustrator ma friend

Illustrator was my tool of choice for the letter creation. Most Type designers would recommend Glyphs or any other Type software but as i knew my way around Illustrator i chose it.

Illustrator screenshot with a thin, a slanted and a bold letter

More Illustrator

As it is a variable font i need to draw multiple masters. So for every letter there are 5 masters. I choose: thin, slanted, bold and bold-extended-slanted.

The Glyphs font software screenshot

Glyphs

Then it was time to move to glyphs.
luckily i found a great tutorial on how to create variable typefaces in glyphs 3.

Image from the glyphs software - align masters

Linking Masters

Learning how to linking masters was by far the most difficult step of my journy. I havent masterd it yet as you can see there are some small hickups in the font interpolation.

Custom code in Webflow necessary to work with variable types

Some Code as well

Webdesign is where variable fonts can really show their ture potential, so i also had to code some lines to implement my typeface.

The Typeface

To showcase the possibilities of variable types i want to share my font.
Feel free to download and experiment with it.
DISCLAIMER: It is still work in progress.
‍

Variable online

If you wonder how variable Types work in the web.
Here is a little example code for you.

Resources i used

Google Web Dev

Overall Introduction into Variable
Fonts with some general information
and basic technical requirements.

ABC Dinamo

Great tutorial i partly followed on
how to use Variable Typefaces and
what is possible while using them.
‍

Glyphs 3

A guide on how to create a Variable
Font in Glyphs. How to start off
and what is important in the process.