:: 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