Date

October, 2018

Info

1 Week
Individual
experiments

An Average Typeface

Creating a parametrized typeface through Javascript.

Idea

Creating a parametrized type.

Thinking about typography, one of the central aspects to type is readability. I had the idea that if one averaged all of a system's fonts together, you would get the most readable form of each letter by what each font had in common.

Process

I created a D3 javascript function that overlaid each system font on top of each other.

Play around with it here: https://garrettvercoe.com/average-font/

Each font is at a 5% opacity. You can see the fonts used below.

elementsheet 3f25e3d6 83e9 4647 9e98 91744069e17f

Some of the fonts are able to load in all browsers natively without import, so the font has a different appearance on each browser.

ScreenShot2018 12 30at11 d572360d 0d8e 4506 a806 936d6889b402 20 38PM

Another function of this is transforming each x, y, and angle positions of the font. I used this idea to play around with different types of movement. I focused on just creating different possibilities for the letter "o".

Rotations 01 fc033139 1ee8 48c0 beb5 ccc23e8b26c7

circulargrid 13760953 3201 4c41 8da0 45d7c8699202

5 b3cd97c1 b38f 476c 994c 2ebab3d06027

ScreenShot2018 10 12at4 2bf15825 9ac4 4791 b74a ac50efd576f6 39 35PM

ScreenShot2018 10 15at2 97b54b4d 4110 4540 8965 09fb2cce23e5 31 35PM

scaleFill Update2 ed6e64b7 89d7 4ae1 9b2b 9148fae11d78

scaleLineweights2 a0e7a3c8 9a2f 4c7b a160 4867afa1031f