:: syllabus :: overview :: class google drive

Professor: Andrea Herstowski
Office: 353 Chalmers Hall
Office hours: by appointment

email: herstow@ku.edu

.................................................................

::::



 

 


 


 


Glyphs: Variable Fonts
Font Editing Software: Create : Produce : Release

__________________________________________________________________________________________________________
Variable Fonts

Variable Fonts are the latest addition to the OpenType font format and change the way we make and use fonts on desktop and web. In short, they offer the possibility to pack many different styles into a single font file. That means you can have bold, medium, light and italics all in one file. It also gives you the ability to transition smoothly from a style to another by animating values along one or more axes. n-exploration-of-variable-fonts-37f85a91a048. Lots are listed on https://v-fonts.com/

Example: https://www.instagram.com/p/B58EehvhWMc/?igshid=1hsswi4xhric4
Example: https://www.instagram.com/p/B61oyePBQJo/?igshid=jda760x1mqvv
Example: https://www.instagram.com/p/B7Y14jJHBE1/?igshid=w81gyjtsi9g0

Test how to use a Variable font in illustrator turn on... Acumin

Andrea: tutorial
Making a variable font:www.youtube.com/watch?v=DbYn0vaNpb0

Steps
1) Open a new blank Glyphs file.
2) Copy and paste your H into the H
3) Merge your stems to be one shape, keep the cross bar its own, you may have to decompose.
4) Make the bottom left anchor the first node (Make First Node)
5) Write down your stroke width.

6) Copy your O into the new glyphs file.
7) Make the bottom anchor the First Node

Save.
Name your font: Font info.

Next steps you are going to have to watch and do. Working with Masters and Instances.

___________________________________________________________________________________________________

Where it goes wrong!
You have a different amount of handles and anchors. You must have the same number.
On the far left you can see how many hancles and anchors you have it this example there are 37.

Keeping your outlines compatable
glyphsapp.com/tutorials/multiple-masters-part-2-keeping-your-outlines-compatible

Easy step by step Video: Making a variable font:www.youtube.com/watch?v=DbYn0vaNpb0

We are going to follow this in class https://glyphsapp.com/tutorials/creating-a-variable-font

Lets test this (I haven't), you can drop the font file in one of the amazing web pages that allow you to test fonts. My favorites are Roel Niesken’s great Wakamai Fondue, ABC Dinamo’s Font Gauntlet (which also lets you animate your variable font), and of course Laurence Penney’s Axis Praxis page:

___________________________________________________________________________________________________
More about Variable Fonts

Exploration of Variable Fonts:an-exploration-of-variable-fonts-37f85a91a048
Evolution of Typography:/the-evolution-of-typography-with-variable-fonts-7cd0078b5ceb
Making a variable font:www.youtube.com/watch?v=DbYn0vaNpb0
Understanding Multiple Masters: glyphsapp.com//multiple-masters-part-1
Creating a Variable Font: glyphsapp.com/creating-a-variable-font
Setting up instances: glyphsapp.com/multiple-masters-part-3-setting-up-instances
Resource for finding variable fonts: V-Fonts
The evolution of typography with variable fonts: www.monotype.com/variable-fonts
Test in your browser

AfterEffects Animation: https://www.youtube.com/watch?v=ni24lqXRveU&feature=youtu.be
Variable Fonts with CSS: variable-font-animation-with-css
David Johnathan Ross: github https://github.com/djrrb/Boxis

more...
https://github.com/scribbletone/i-can-variable-font
https://djr.com/lab-variable/
https://variationsguide.typenetwork.com/
http://manuel.vongebhardi.de/theory/typedesign-framework/
https://github.com/LettError/mutatorSans
https://github.com/rutherfordcraze/variable-animation/blob/master/example.gif

Animating with Drawbot: https://robstenson.com/articles/animating-with-drawbot.html
Kinetic Type: https://robstenson.com/articles/animating-with-drawbot.html

________________________________________________________________________________________________________

https://www.instagram.com/p/B58EehvhWMc/?igshid=1hsswi4xhric4