Usual disclaimer for live blogging: These are informal notes taken by me, Dave Crossland, at the event, and may or may not be similar to what was said by the people who spoke on these topics. This is probably FULL of errors. What do you want for free? :) If something here is incorrect it is probably because I mistyped it or misunderstood, and if anyone wants corrections, just should tweet me – @davelab6 - or file an issue - or email me [email protected]
Nothing here is the opinion of my employer.
https://speakerdeck.com/davelab6/anrt-2016-why-didnt-metafont-catch-on
Yannick Mathey & Louis-Rémi Babé (Lyon, France)
team grew from 2 to 7
1,600 backers, now 16,000 users
Progress on graphic quality,
Here's the team! Very mess ;) We suck at diversity. Yannick, the originator and designer, and myself, a web developer, and more web develoeprs, and a marketing director. And JB Levee is part of the team, but in Paris and we are in Lyon
Here's a video of the original release in 2015
And right after we released it, the Adobe Project Faces 2015 was announced.
We saw it as an encouragement to move forwards in this diretion
Plumin.js is out libre js library that started by exporting TTX to assemble offline. It is a combination of opentype.js and paper.js plus convenience code for making fonts.
Here is a May 2015 workshop in ESAD, Jeremy Barros using an accelerometer in his laptop to effect a font, in js
Baptiste Guesnon @ba_gsn did this May 2016 "Magic Square SuperSizeMe" demo. Its not a transformation, stretching the shapes, but the proportions are adjusted via piecewise interpolation.
We moved from a contour based drawing to a skeleton based approach. With contours we looked for a formula to position each point, which gives maximum control of the form, but its a pain to modify their positions programmatically, throughout the entire alphabet. So we switched to a stroke approach, of calligraphy that was also used in the earliest parts of metafont. There is the ductus, the angle of the pen, and the weight - from pressure of the pen - and the rotation.
The problem with the skeleton approach is that it creates too similar shapes So we have a skeleon + contour approach, used in metafont's later versions.
We have a custom src format, based on The Stroke theory. Here's an example.
We also make use of 'components' to reuse shapes.
Prototypo's mai graphic improvement was thanks to the partnership with Production Type, which gave us 3 different fonts that we translated and put into the app.
We added more controls to allow 'individualization' - make groups of letters and adjust those groups. The beauty of the type isn't just in global parameters but a few glyphs that are small.
Our aim was to make type that is maleable by typographers. In this direction, we made a web preview browser extension that connects prototypo to any webpage's font.
Next we plan to add plugins for the Adobe CC suite so that you can bring Prototypo to those tools.
In September 2016 we realised users liked our UI overall but the advanced features were hard - to go beyond slider, we improved the UI, adding a breadcrumb menu.
We added the ability to make manual letter spacing and kerning. We have a spacing window with an input line like 'Spacing /ampersand Kerning' which shows the glyphs 'Spacing & Kerning'
We have seen some nice exports by our users. This is Giuseppe Salerno's "calligraphic idea realised with prototypo + glyphs" @beppeartz in Torino Italy, cofounder of @rsztype with @pacoxxzz. He used prototypo as a prototyping tool, he used a few individualization gropus, and since Protypo is named such, he exported the tool and manually modified it to make a final font.
Kiku Obata & Company did a custom font for Schema Projets in NYC. They are closer to the Prototypo export, but they adjusted it in a few ways that are visually strong.
The fonts we preload are CC-0 licensed.
Prototypo.js is a higher levle library than plumin.js and Yann Alary did a Yahoo! API mix with our library, in March 2016, and the sliders are replaced with the data from the weather API, so that teh temperateure is the weight, the slant to the wind speed, the altitude to the xheight. Then printed the city name with the font corrponsinding to its current weather. A fun result was a city with a negative temperature.
Here we use the microphone to make the letter react to 3 pitch tones. Live demo!
So, here are experimental ideas. There are some strange bugs that make nice visual results. There is graphical value to these results. They are unreadable, however.
Hera areless experimental variations, a font that is able to adaopt to the textbox container. A few parameters make a display version; adding some contrast and serif details. Narrower for a more narrow contentbox. Or wider. "Blackground" with more width and less contrast. A caption version. And a 'night mode' which adapts to the ambient light using a sensor of the browser (experimental browser support :)
This uses our format which is different to the tradiitonal outlines. There is a single master drawn and then this instructs the computer to follow your design rules. This little snippet of gode shows the bar of the G. We have a Utils class, Utils.onCurve(), pointOnCurve(), lineAngle(), lineLineInterection(). These keep the forms connected in a way that makes sense.
You can use code to express logica rules, like a minimum weight for a period.
In the next version, you will be able to toggle on and off specific serifs. Swtiching compontents gives control of your letters.
Modificaiton of the template manually, to adjust the skeleon right inside the aplcaiton. here you can adjust the sans into a stencil. But it is quite brittle, easy to get a malformed result. This parametric template was made in a 3 day worksthop here in ANRT in June 2016, as part of the LORnTECH startup incubator [ ? ] . The idea was to make a visual identity for VarianTech (?) and this type for identity was only 3 days but the result was somehting normally done in several months. there was an experiemntal parameter, the baseline could be set higher but the x height is kept constant. Here is a video of http://lab.prototypo.io/LORnTECH/ and you can see the web specimen we made that shows their tweets in the protoypo font.
We translate designs drawn and saved in UFO to code. This code is markup that is processed in to JS. It isn't a language, exactly. Its structured markup. The drawing is composed of contours, points, coordinates. This enables the next generation of tool: the prototypo builder.
You start by drawing and then you replace the coordinates that you placed with parametrers. This tool is experimental, allowing to play with various approaches to drawing. There are various curves we use to make the final outline contour. We used different approachs, this technical detail I will skip. But there are many ways to do parametric drawings and there's not always a good way but we wanted a tool to experiment quicker, and get users to assist us making more parametric fonts.
IN 2018 we hope to expand the capability to more languges.
Thanks!
Samuel & Jérémie Hornus (INRIA / ANRT – Nancy, France)
We made RoboFont TTH
- What is TT hitning?
- Visual Hinting Comamnds
- Parametric Design
- Demo
- IUP
- Interpolation
- Demo
Jeremie:
TT hitning was invented by APple and MS in early 90s. Its assembly code to distort and outline to fix a outline to a pixel size grid. THis improves rendering at speciic sizes.
There you can see a B&W rendering of an unhinted fonts. Uneven stems, hard to read! really! The alignments are random, 'a' and 'e' are clogged and different stem width. This hinted version is better; the stems are controlled from 9-13 is 1px and then 14-20 is 2px and then 3 or more. Legibility problems are fixed.
but this is hard to handle. Its assembly programming. A glyph has these commands and its operated in a virtual machine. Its hard for designers to work with it. Few designers use those assumbly code commands. Therefore visual UIs are invented. Instead of coding you use arrows and controls to define posiiton of points and their relative positinos.
VTT and FOntlab have these tools,a nd TTH has such vvisual commands as well. The process is to place commands on the X and Y axes and define the stroke widths. The lef timage is the y axis and the right image is the X axis. Next, here is a glyph being hinted, the blue outline is the hinted one and th e brown is original. These links define stems and bars in x and y axes. This is parameterizing the glyph. This interpolation controls the notches in the Y axis.
These lines, visual commands, are converted to parameters. The outline is then distorted. Here is the same outline at various px sizes. The lef tis the smallest, the original design is almost lost, at 6px. The middle is like 16px.
This inspired us to use distortions as part of our designs. We imagine using the stem values to change the weight of a glyph. You can get a bold out of a regular, or other things. This design is the orogianl outline is instructed in both axes to parameteize it. And then we get these high contrast designs out of it; they are not perfect but it reduces tedious and repetitive point movement tasks. One has a normal high contrast and the other is revese contrast.
Here is alive demo of the tool in robofont. here is the original design. Here is a 'thin' example. THere are 2 stem lines, X_171 is its label. I change that from 65 to 70 and you see each glyph that has that stem follows the distortion. This has a xheight parameter, we reduce it, and you see the result. Here is the contrast higher in the y axis, and its slightly reverse contrast. You can control globally or locally (per glyph.) Now the 'e' bar is different, as it has its own parameter.
Here is a serif typeface. I mark the points at the top and bottom of the 'n' and then I mark the shoulder points on their top and botto of the stroke. Now I instrut the stems. Now I switch to X axis and define stems, the overall glyph width. Also sidebearing values. I want the shoulder to remain inside the stem. I awnt the shoulder join interpolated and the thickness at the join the same as the end of serifs. This is a crude design. I add conrols to the widhts of the serifs. The 'n' is acceptable and can be refined by a fdesigner more. I can set the height of the glyph, increase the weight, and adjusting the serif we can make it a wood type western style.
Samuel: Now, more on the technical implementation. It looks like TT hitning but at the design level. This is a 'c' glyph and we have a single hinting command, a parametric design command, the same semantics are used. This links source points to target points, at the start and end fo the arrow. We prescribe a target distance of say 500 unit. This shifts the target point to the right 500 units. That ruins the design ;) So we need to move the other points not touched by the command to restore the original design. The TT VM has a command called "IUP" - interpolate untouched points - and this restores the glyph's design.
How does this work? A custom interpolation. WE can improve interpolation tools with this knowledge.
IUP works like this: Look at the intouched points. The orange poits are to the right of the target point. they are translated. The blue points are left of the target and they are interpolated. This moves the target poit first. Then the IUP points are translated the same way and then the others are interpolated.
IN glyph interpolation, IUP can be used. Here is a 'g' (single story) with a thin and bold weight. You want 3 instances between them. The points are interpolated at percentages in x and y directions (they can be varied to obtain high and reverse contrast ;) Typically you can make a constraint on an interpolation tool, that the contours and points are compatible - the same sequence of on and off curve points. The start points are the same. This makes a problem where the two glyph masters aren't compatible. Here, the bold glyph has extra points to adjust the joins of stems and bowls. How can we automatically match them?
We match the points to 'target' points, with the arrows familiar from the hinting UI. We decide which is source/origin and which is target. We can go either way, of course. Therefore the additional points in A are positioned over the top of each other and a nearby point that does match.
To do it automatically, we measure the dissimilarity of 2 points. Then we have matching of 2 "pointed" contours (with a start point.) Then without pointing. Here is a visual exmaple; 3 points, A B C, and there is a simple formula for this.
Now lets look a matching 2 poited contours. The start points are mapped. And "NO CROSSING THE STREAMS". This results in scores for the matches, using "dynamic programming." ...
So we can make a matching for any 2 glyphs! Here is an interpolation demo. We transfer hinting commands from a hinted font to an unhinted font that is similar. This saves A LOT OF TIME.
Where the source has less poits than the target glyph, our instances somtimes dont look quite right. Here is an interpolation of the 'black' master but it isn't a 1:1 match. Here we see a point in the black, not in the thin, and its being matched to a point half way up the stem in the black. Reversing the match direction, the notch is now symmetrical. And going all the other way, we see the black instane is right but the thin instance has a kind of similar issue. If we now match off curve points we see something more accurate.
Thanks!
Q: With TT hinting you can change the appearance. And it can make a font for prining?
S: This is our own TT VM implementation. This is just what we needed. not a full TT engine. Just reimplemnted parts. And then we can edit our outlines.
DC: This is cubic outlines because ou have your own engine, and in RF it doesnt matter which curve type you have?
J: Yes
Chuck B: ...
S: Its a function. Not subjective or objective (injective?). all the src points are mapped to something in the target, and the target's points may be forgotten. To do interpolation classicall you need matching points to do bijection. But this is a function to allow a different kind of mapping. Its a way to transform information in a unidirectional way.
Alice: You use this in your workflow?
J: Yes, I tried.
A: But you didn't release it publicly?
J: We are thinking about it... ;)
Nick Sherman: Following up on, if you do release this, what is the ultimate goal of what it output? A variable font? individual fonts?
J: It helps when you designed 1 master and you want the light or bold. Its a tedious task to draw them. memorize points relations. Its not meant for a final design. You can see the curves are not respected. You need to refine them after that.
Lorp: Great talk, thanks. If Variable FOnts take off, a tool like this will be in big demand, to make VF fonts from existing ones. Good luck to you!
Q: If you put constraints that can't be simulataneously satisfied, does it break? Eg, 2 constraints that are contradictory.
J: It is a bug that can happen if you are not careful, but if you are careful, avoiding loops with arrows, then its fine.
Q: In UIs with constraints, the software can make a compromize.
S: The system will alert you to a pboelm. We use a 'Political Sort' algo that orders commands so that we respect causality. If the command requires a position to be fixed, then the commands that move those points are executed before. That is computed automatically. If there is a loop it is alerted to the user, careful! But typically it does not happen.
[ 5 mins late ]
Training the warriors: We have new hires who do a standard but individualized training programme before beginning on client work
We also have script workshops, we have in house or visitng experts to do workshops. This is Kalapi donig Gujarati, Alexei on Cyrillic, a Hebrew one
We do silly stuff too :)
Providing the weapons: We were a small company up to 2010 and then grew very fast, in 2013 peaked, and found poeple used the same processes fom a few years ago. The same quesitons came up again and again. By maing internal standards and best practices, we reduced the workload on my training team. We also organize sharing sessions, up to an hour at a time, in work hours, whereepeople come up with topics to share, ideas they had or things learned in teh past, and it is shared with the company/team.
We work towards a common workflow today, but we are getting towards a software-agnostic workflow; indepdentent of specific OS and font editors. we figure some apps are better than others and we didnt find one editor that works well for DaMa. each company has its own needs. for a small company glyphs is totally satisfying, but dama has different clients, different demands, and no editor can meet all our needs. so we work in a way independent way from any 1 tool.
We already introduced git - a system to reord changes in files over time, so you can see what previous versions were - and this is very handy to keep track of what happens, especially when people work in parallel.
We have an automatic build system. We worked on some libre font projects and figured that people who want to modify our fonts or make derivates and add things, they myst be able to push a button and compile the fonts. we did this for libre font porjects but was so useful we use it in all workflows.
Going to git and a ABS meant our testing was not good enough. Currently work is underway to make automatic testing, and its early days but promising. We aim to constantly improve all areas.
damatools, is our higher layer scripts for fonttools, and its a swiss army knife approach. it does many things, but you can edit font info, set v metrics, other metadata, recalculate unicode ranges/codepages, analyse glyph sets and tell language coverage, transfer hinting, generate wbe fonts, convert vfb2ufo and merge ufo and compile UFO or glyphs... its constantly expanding and is the core of our new workflows.
damatools also deals with our legacy issues, which is a big topic at dama, although john hudson said recently, "all problems are legacy problems" and i couldnt agree more ;)
We now have peer reviews and quality checks in the workflow at managed points.
Ideation, concept, execution, engineering, and hinting, are our 5 stages. at the end, we do peer review (stage 1 and 2) and within execution many peer reviews, then a final QA to check quality, and another to check funcitonality in depth, and then a final indepdent repeat of the final peer, qa and functionality tests and then ship.
We do training and sharing skills, and making a knowledge base accessible to all staff, a software independent workflow, and QA, that that all adds up to and results in reliability, consistency, and flexibilty.
we are not automating type design! we do not automate the creative parts. we automate the parts prone to human errors, that are tedious. we learned a lot in 5 years, it wasn't a straight path, but today we are in a good place.
Thanks to a few key colleagues who are not here: Ron Carpenter took care of the staff onboarding and early training stuff. Denis and Cosimo who write the software. Michele and Jose are not in my team but do later stage training and tool development.
Thanks!
Nick Sherman (New York, USA)
I designed this in HTML for showing on the 4:3 ratio and to go full screen, the ground goes black when its at the right ratio :) And its working!
OK, its a bit intimidating being with this event's line up, but here we go!
this presentation started being very advanced in the vari font tech, but I want to introduce it first before talking about what is to come
ABout me? @NickSherman I have worked in the type world for 10 years. I cofounded fontsinuse.com and did type@cooper and wrote on web fonts for A List Apart I was at MyFonts, Font Bureau, and have volunteered for Hamilton Wood Type.
How many here designed a typeface? 60%
How many designed a responsive website? 40%
How many made a variable font? 30%! more than i expected!
I giev a shout to DJR as many of the exmaples are from him, and this is Gimlet, which is rendered in the WebKit Tech Preview. This is the first presentation in the real work using variable fonts to discuss them.
Here is 'LARGE', scaled to the size of the viewport.
"Variable" is a buzz online, and I think its well deserved. But a lot of people see it as a really NEW thing. But the idea of a variation in the design of a type isn't new at all, it traces all the way to Gutenberg.
Here is an old Century Expanded specimen. Here is a series of 'a' that are normalized to show the comparative design differences; these changes improve readability and printing conditions and other variables.
This is the Benton Engraver machine, which made that easy to do in the later years of metal type. The concept is you have these letter patterns and trace them into a cutting mechanism to make matrices for casting type. This machine got features that adjusted a design in a non-linear non-stretching way, that most type designers shun, but adjusting stroke thicknesses and other things. I don't konw if anyone konws any more how that worked, but it was a machine that semiautomated creating variations. It was also common to have different source pattern drawings for different variations.
Donald Knuth's Computer Modern had many parameters (GREAT IMAGE) and those could be adjusted based on the typographic context. This was notable because it happened early in the history. I asked Dave Crossland about the quality of metafonts, and that I think its hard to make quality type with metafont. Computer Moden is one of the better ones and compared to today's outline based fonts its a bit sketchy in quality.
Gerrit Noordzij's "The Stroke" cube is also very influential in this topic. I was introduced to this by Erik van Blokland. He said, "If you design a single font, its an island. If you designing more than one, you're designing the relationships, the receipe." And that point is crucial to what we are dealing with next year.
How many of you have used superpolator? 5%. So lets do a demo, why not. Here it is with a preloaded project of Gimlet I prepared. If you have certain standlone styles, then you can generate instances anywhere inside. This is amazing for many graphic designers, they think its totally crazy. This is how so many type designers are working but most end users get these frozen instances that are 'cut off' from each other.
There is TrueType GX, and http://vimeo.com/120047887 shows a GX font of Skia, shipped in Mac OS X, with the typography panel working. It was a flexible format, supported in MacOS from 7 to 10 until a pretty late point release. For many early Variable Font demos, Skia was used.
I found this Walter Tracey quote very apt: "It is to be hoped, that before long [computer can vary fonts x height and contrast and so on to better fit the typography ]"
The "H" Word.
How many people here have hinted a font? 5%. I think its interesting. I just joked how annoying it us, but I think it is underappreciate how it bends outlines as that has been only to fit to a grid. It is used in font marketing and abused, as many users dont undersatnd what is happening.
Here is a crash course in how it works traditionally: Georgia's outlines original, and then the outlines when hinting is applied (image from Petr van Blokland) and they are bent around to fit the grid better, and then the final black-and-white bitmaps. This bending happens differently at each pixel size.
More recently, part of what started the ball rolling with vari fonts was signs that people wanted a way to do variaiton for optical sizes automatically. This is Sitka, designed by Matthew Carter for MS, and it has various optical sizes, that are fixed, and they are swapped in at varius pt size ranges (declared in the OS/2 table.) Apple has a similar thing in San Francisco.
but these are seperate fonts, swapped in and out with a trigger, and not a continuous design space like Superpolator has.
For web design, I was always keen on reponsive web design, a system of rules, ways things change, a fluid environment. And yet fonts were static, brittle. It bothered me. So I wrote about this in A List Apart in 2013, and in "Font Hinting and the Future of Responsive Typography" I proposed using font hinting technology to make fonts bolder instead of just aliged to a px grid, and we saw similar efforts to actually do this yesterday by @BlackFoundry
Then in Jan 2015 I wrote "Variable Fonts For Responsive Design" and ALA was REALLY GREAT for getting a wider readership. So because the tech wasn't there immediately, a lot of us wanted to hack what was already there to approximate what we wanted. They used Georgia for their text type, and its quite wide. THere is a narrow version of it at Font Bureau. So we use that narrow version in the phone size portrait mode, and regular Georgia in landscape mode. This may no longer be live, but that was the idea.
www.font-to-width.com is a project I did with my friend Chris Lewis, and you see how the fonts change to fit the space. This works by having a big set of static fonts and swapping them to fit. This is using the Production Type 'Panorama' type family, thanks to JBL for that.
www.letterror.com/dev/mathshapes/ and www.letterror.com/dev/mathshapes/page_20_Excellence.html show the swashes changing as the page width changes. This was the first time I saw a demo of responsive lettering in any form that really made sense and flipped switches in people's brains. ALso a arabic where the kashida extends to span the page width.
www.plumin.js has been mentioned at least once this conference. hacking fonts with JS, I thought would be the intermediate thing from people wanting variable fonts and having a full format. This can do a lot of what people want to do. It is a bit buggy but a simple thing like this, it works.
There wwere more and more experiments and at some point, www.flickr.com/photos/letterror/29603905011/ is a photo by Erik van Blokland at the Microsoft Mountain View office of people talking about variable type on the web. And then it became a real thing!
I don't know how I feel about it. It was so fast, and so smooth, compared to the past type history and getting large companies to agree on things. At ATYPI this year, the OpenType v1.8 annoucement was made by these big companies. It was lumped in with other OT updates, but it really changes how OT works in general. John Hudson wrote an intro at www.bit.ly/vfonts-annoucement
I remember being at RoboThon a few years ago, 18 months ago, giving a talk complaininng about how we'll need to hack things around for a few years, and the best thing is the peolpe involved.
Adobe, Apple, Google, Microsoft, W3C, Font Editor devs, Font publishers, and individuals. There are very few things those 4 companies work together closely on without fighting, WOFF and WOFF 2 were significant collaborations too, but this is a big deal for people outside the font community. Small foundries like Tiro Typeworks have been key.
So..... the current Variable Fonts tech is quite complex and I will touch the surface.
With static fonts, you have individual font files, say 20 in a 5 x 4 grid. With a variable font, you have a central master, and then DELTAS.
It took me a while to figure out how Multiple Masters and Deltas vary. You are my test subjects for this explanation that I expect to give to less familiar audiences in the future.
MM: You have a 'black' weight master and a 'thin' weight, and you can make an interpolation anywhere in between. That's straightforwards. the math and geometry involved is freshman college stuff.
Deltas: You measure the movement from the Black to the Light, and its then not about the outlines for teh 2 masters, but 1 set of outlines and the differences. Conceptually it is similar, But you can do more things with sets of deltas, complex things that I am only starting to grasp. My understanding is mainly thanks to David Berlow and Erik van Blokland. A lot of type designers and the general public have no idea about all this. (I want to make these visual explanations to help new ears listen to this, and if I made a mistake, please tell me afterwards :)
Why do we have variable fonts? When I chat with web designers, they may have trouble grasping why this is important. Here's a list:
- Flexible Stylization - swashes and things you really notice
- Animation - really cool stuff with variable fonts on the web is hitting poeple on the head with it
- Corrective adjustemnts - grades for screen resolutions/renderers, more subtle things
- Refined justification (microtypography) - adjusting letter widths almost imperceptively to fit text in a line better
- Compression of filesizes for latency and disk space savings - and this was what maybe swung it with the big companies. after a few styles are in a family, it becomes very practical to use variable fonts. MS presented at ATYPI up to 70% file size savings!
- East Asian Fonts (CJK)
- Did I mention CJK? :)
I did some tests, and I found a 6 font family was 303kb as a set of 164kb as a single variable font. the download time @ 500kb/s was 0.6s vs 0.33s, a ping time @ 100 ms/file of 0.6s vs 0.1s and the total load time of 1.2s vs 0.43s. That is a huge speed up, that VPs at big tech companies notice.
What is available today?
www.github.com/scribbletone/i-can-variable-font is by Travis Kochel and shows how use tools like Robofont or UFOs with any environment - as Bianca mentions, they have various tools, and UFO allows any tool that makes UFOs to make variable fonts - and this is changing almost day to day.
www.glyphapp.com just released v2.4 with the variable fonts export. I don't know how it works but this is attractive for those who don't want to think about the mechanics.
www.typedrawers.com was assigned by the big companies as a good place to discuss this whole initiative, using the [OTVar] topic line tag.
For using them on the web, you have 1 file, and then CSS font-settings will define the styles. There are pre-named instances too, of course, but with the web in CSS you do specify thing with numbers a lot. And its interesting to see the numbers that match to those preset instances.
www.webkit.org/nightly is Web Kit Nightly, which is what I am showing this presentation in right now, and then http://developer.apple.com/safari/technology-preview has just released support. It could be even just a week until MS Edge and Chrome supports it.
There is a cross platform app FontView, that sill show variable fonts with sliders. "Lab" is another DJR font, a dot font where you can alter the dot.
www.axis-praxis.org is a nice site to drop VF into and see them.
Fonts! There are ALREADY many fonts in this format.
www.cjdunn.com/dunbar/variablefonts The very first was CJ Dunn, a single glyph, buy it for $1, released 2 days after the spec was announced. And then soon after was Dunbar, a full family
www.koe.berlin/variablefont is a Creative Commons BY-NC-ND 'freeware' font to play with.
http://stuff.djr.com has this dot font, also freeware
http://blog.typekit.com/2016/11/16 is the first CFF2 flavor Variable Font, and this is only supported in FontView, but I expect it will show up in WebKit and other places. Its Source Serif Pro by my friend Frank Greisshamer and this is a libre font.
www.underware.nl just released 2 days ago "Zeitung" and they did some fancy things to make it work in browsers today. It isn't using the real OpenType v1.8 format, it has grades (geting bolder but without changing metrics) and they have a 'variable family' axis which when you set a light, shows you the values to use for regular and bold.
It has the glyph swapping for Q $ & - and Bas asked me to tell you that this is the first variable font that actually works in all browsers. And there is an InDesign extension that makes their special format work in InDesign too. You can see how it works; they have style names from 0 to 100, and then swap the style name. If you pick a wieght in their picker, you can 'make family' and it creates "Character Styles" to select the light/reg/bold that match that.
So that brings you up to date for 2 days ago. There are other private ones out there, and older ones, that Lawrence will talk about.
Licensing!
But this raises a lot of questions about established norms for decades about how to price this stuff. CJ provides teh range of static fonts supported by a variable font. underware charge 750 euros for their full package.
What now?
www.github.com/w3c/csswg-drafts has a [varfont] topic tag for these discussions. And there's typedrawers. Its all over the place.
www.twitter.com/variablefonts is my twitter account and its a bit overwhelming; explaining underware's release in 140 chars or less is tricky ;) I expect to make this a full blog.
If you work on variable fonts stuff that you want to publicize, talk to me please! :)
Thanks!
Laurence Penney (Bristol, UK)
[ missed 5 mins ]
So at TypoLabs Berlin 2016 Behdad was presenting these old fonts working! And here he is showing the @font-family proposal for how to set these directly.
Here is this email from 2016-07-16 where you can see his excitment that Zycon is working!
And Sascha making a HTML test page to Zycon.
Then the 4 main players, David Lemon at Adobe, Behdad at Google, Ned Holbrook at Apple, and Peter Constable at Microsoft, presented a format spec at ATypI.
But, we might have expected tools, demos, fonts, APIs, apps.... so it was more like [fuming emoji] ;)
So there was a FontView tool for mac, and some CSS in WebKit, Miles Maxfield of Apple posted this website that didn't work obviously, but it was 'wow' that 2 weeks after ATypI could you download WebKit; the blue icon is released Safari, the purple is the Safari nightly showing things coming soon, and the black one is not even named Safari. So its a good sign when it goes into the Purple Safari. The Black one was first to have VF support.
Then Glyphs Beta had VF export.
I remembered the old www.typecast.com website that had sliders to play with colors, line height, col width... it is REALLY WELL designed, and Monotype bought it, and its still there today. It is a great app. So I saw that I could do something like TypeCast with Variable Fonts.
So off I went, and within a few days I had something I was happy with. Demo!
VF have named instances, and theyse are just coordinates in the design space. So when I click 'regular' then you see the weight and width axes to jump to pre-set points.
If you click the axis button, it will cycle up and and down.
I wrote it so that i could try out all the VF that were being created.
You can edit the text. A simple example; write a longer headline, and then shrink the width, and fit it on 1 line. That can be done automatically! Not hard at all.
Here is Zycon. We click the axis buttons and see the animations. This is WAY MORE than interpolation. YOU CAN NOT DO THIS WITH MULTIPLE MASTERS. The clock has 59 instances; The cyclist is the same. So I think there is potential for animators to get into this; its a way to deliver animation in a compact way.
Here is a Luc[as] de Groot's "Move Me" family. I made this using Glyphs! Using 2 extreme masters.
GradeGX is a version that I made with Adam Twardoch, and this varies grades, so you see the weight shift but the metrics stay the same, no line breaks change.
This is TroisMille Lent, from a recent KABK graduate, and it has 4 axes: slant, super, width and weight.
Beowolf is from Just Van Rossum and Erik van Blokland in the late 80s, and there are 2 axies - 'oh yeah' and 'how much' - and when not much is used, there are some amazing visual things that pop out.
And now there is an "INSTALL" button that the designers have kindly allowed me to 'install' in axis praxis, and even Zeitung Pro is there from Underware, you can play with it immediately.
The designers seem to want to keep metrics constant at the light end of the weight axis, also in San Francisco. So you can do things with VF that you can't with a simple 2-master MM font.
Jam, is a Letterror typewriter font.
Dunbar has an x-height.
These controls, you feel like you ALWAYS WANTED THAT KIND OF CONTROL of your typefaces. I think it feels really nice.
www.axis-praxis.org/about launched with a video and now:
www.axis-praxis.org/blog is where I'll add more details
Reactions?
Different from font engineers / type designers / graphic designers / and normal people - especially the last group said "yeah, I always wanted to do that, have somehing between regular and bold!"
@jason_campbell tried to vote Axis Praxis For President ;)
Feedback?
Next steps: "Upload" to browser memory, which I already implemented. It loads instantly as the browser now reads teh name table direclty.
Font Size, and other CSS font options, lettersapce, col width, colors, border, etc.
Working in all browsers. A 'variable font server' could provide backwards compatibility for pre-VF browsers/OS. it will send regular opentype 1.7 fonts with the right instance specified by the CSS.
...
Gerry talked about the Typekit dominance, and surely VF will find quick mass adoption with such a central distrubiton channel tied closely to the main typography applications of the day. We see this already with the Trajan Color Font released last week.
The future ...
How to show 4,000 axes in a font?
Exciting!
Indra: [ skipped intro ] So there are 4 things. the 3rd, licensing. How have you offered tyepefaces yourselves or worked with foundries, what are the most pressing problems for pricing type in a new and unpredented ways? People sellig MM fonts in the 90s?
Erik: [ Shrugs ]
Nick Sherman: I think what CJ Dunn did makes sense; if you offer a wide range of individual fonts, you get the VF too. I think a variable font that is limited to subsets of a design space makes sense. I don't know if its worth it tho, to offer less doesnt make sense to users. Some epople asked me if we should charge more than for the same design space of fixed fonts as its more functionality, or should we price it the same way. That latter option seems more fair to me, as its not much work.
Bianca: Lets set out retail and custom fonts for clients. It is quickly generated and it isnt much additional work so we don't see much difference in the sales package, and initially we will offer static fonts for apps that dont support variable fonts, as they will just use the 1 single default instance. so in the start there will be some flexibility. Nick, what CJ did makes sense, but if you have less weights in a family, a Black and Light and Regular, your design space is still big but there are only 3 fonts. Would you charge the same for a VF?
Nick: With the tech, you can deliver a vf that isnt a smooth transition, you can set the rate so that within a range the font stays the same and flips only at a certain point. So at that situation perhaps VF doesnt make sense. TTC are also grouping fonts into a single file. That might be a better fit.
Indra: I don't think people complain for all the weights, but maybe they dont want optical size, x height, contrast, and its $800, and they just want to vary weight.
Erik: When OT was new in 1997, then everyone used type1 fonts and I spent much time and money making type 1 version of OT fonts, with SC and various figures.... it was hell. All for making cheaper fonts for people who were not keen on investing in type anyway. To make static fonts isn't very useful for long. The difference between OT and VF is more now, yes, but what really matters is how is the design space? 2 masters, 1 axis? 4 Axes, 17 master? That's a lot of work. 18 masters may be 9x 2 masters or even more as they combined.
Lorp: Static fonts are steps on an axis, and what Underware does with cool demos and plugins is chargable to get things working now has a limited timeline, as it will soon be built in to InDesign I bet. If you see a font with dozens of axis, sure, maybe there's a market of people who will love this stuff. Also I think what is Google doing. Pablo Impallari, who made Lobster, is making variable fonts that are free to use on websites. If Google will offer those fonts and making a dynamic web server to make static instances instantly, that could happen, and make people epect a behaviour that we see as chargable.
Bianca: Cn you see a user supported subsetting the axes. A client might not need all the axes that have been made.
Indra: Subsetting for use, not licensing; to reduce the size on a website th axes may be removed.
Nick: CJ is doing that already. Dunbar has a full sries, and the VF you get then has all the axes. But if you buy just a few weights, you get only the weight axis.
Erik: Confusing. Different fonts will work differently with the same name?
Lorp: You can buy the full thing (on axis praxis ;) or you can buy 1 to 4 xheights, and if you get all 4, then you get a VF with both axes.
Kai: I see really clear use cases in web design. Stak type in a magazine and use Dunbar in headlines, I won't buy a 40 workstation license for the text part I don't use. They are all condensed weights at a set x height. That is a technical problem, or a communication problem, and the community solved this before.
Nick: The UI is another aspect. That will make or break if people undersatnd what happens inside the fonts.
...
Erik: When the biggest font changes in the last 100 years, and licensing and interfaces are the secondary things. The things will have a price, and if there isn't silly things by big companies about discounts, then these things will work out. These things respond to phone sizes, they will be alive, living and breathing and being updated on the servers every day, and this will be very cool. This will be awesome! That's my take.
Nick: Well, better than anyone here, the tech in GX is now OT VF, and how a single font can morph, wasn't easy to do or even impossible before. how will that effect people's thinking of type design?
Erik: Good question. Read the OT1.8 spec. (very few!) you see there isn't a number of masters to fill in. Think of how this works, and when I started superpolator I had to deduce this. Apple had a little app called Mutator, and could dial up a position in the design space, move points, and record it. It was't setting out masters, it was a diffuse cloud of changes that can happen anywhere. A regular to a bold, and express that in a font as 100s of tiny change that happen and end up in a bold. That creates phases of animation, wider, narrower, and that is recorded i a way that is new compared to what we are used to. FontLab or Glyphs or RoboFont can do what they have done and that's helpful for many things, but the format itself offers new things. That means new editors, new tools, perhaps a mutator or something else. That has big potential. Some stuff that Just did on Beowolf is bypassing all existing tools. He writes tiny changes in the font itself, its hardcoded. it is comforting that you can do that. And this all lives on screen. All companies working together for latency, sure, but this lives on web - watches, TV, phones, laptops - and it appear in a graphic design application is an afterthough. I like that aspect too.
Nick: Web in general moves fast without UIs. If the code works, you don't want for someone else to build a tool. It takes a lot of time to think differently.
Lorp: Front end developers are what typographers are called today. They are happy to dive into a font family manual, they like to do fun cool things that are tricky.
Indra: Tutorials for print design are also popular. You don't write for the space anymore, your headline font adapts to the text that you write. Magazines, there is so much hacked responsive typography happening there in print, and those people will be excited and they don't use browsers. Of course the push is from digital but print has many use cases too.
Erik: Have you noticed localized versions of Pixar movies? Incredibles has a newspaper, the Dutch version has a matching graphics like a newspaper, and that uses interpolating fonts to fit these things! It is rendered graphics so it can be localized.
...
Gerry: I shudder when you say fitting copy. The point of today is that you have no idea what the screen size will be, but they want a 2 line module for headings. you design so that heading is 2 lines and strap is 1 line and you use variable fonts to fit the devices
Indra: Well I am talking about print
Gerry: The really interesting thing is editorial design, digital, is iPhone. But that's a bad thing because its a consistent platform. In China, there are so many different phones. To have something that brings more dynamic consistency is key.
Nick: Any kind of design today is happening and setting up complex rules and conditions, and we can squish a word to fit but only up to a point and some rewrite will still be needed. I had a slide showing the InDesign Hyphenation and Justification panel that has a glyph scaling option and that is now even better with VF fonts. You can set up explicit rules about how it can happen.
Erik: You might have a width axis that is just 10% and effects caps more than lowercase, so that you can tuck things in.
...
Nick: I spoke to DJR about this and he said he is lazy and just draws the extremes, no regular, and looks to do that in a way to get a Regulat that looks good. Instead of drawing the extremes to see what works out, I now have all masters open and watch all the instances all the time. THat's a change in how type designers works.
Erik: You don't need to make specific masters. For glyphs that don't matter you can have just 2. But other glyphs you need 1 or more intermediates that are not complete glyph sets.
Nick: ANd I like the delta for arms of the 't' or other things
Lorp: the 6 axes you see are just a few glyphs, not effecting everything
...
Erik: Lorp said that there are no tools, examples... but there have bee DOZENS of people working on this for a year, the team at Google, especially Sacha Brawer, Reed Roberts at ADobe, there is 100,000s of lines of code involved. We can try things already, Greg Hitchcock and others at MS, it is remarkable. Type designers are willing to dive into varLib in the terminal shows how excited they are. Its fine to have varLib today as the alternative is nothing. There will be tools and nice UIs, it will all happen.
Lorp: Sure :)
Q: There was a comment about Chinese fonts. There are 250 building blocks that create 10,000s of glphs. That could make CJK fonts 10x smaller. I want to remark on that. Also, I see potential in the new format for pictograms and symbols to be animated. Pictograms are important for global communication. Swiss Telecom's logotype is animated. So now you can download symbols that animate. That is exciting for young people. So, what similar potential do you see there? And also, for corp ID, this risks bringing inconsistency to designs. There may need to be a small number of instances that are locked for corp ID, so that you can't mistakenly go outside the limits of the ID design.
Lorp: Sure. In the corp world there is risk but there can be a front end that will restrict things the type community wont mind that. For animation, yes, we see cool stuff but it by David Berlow - not a professional animator - and I'd like to see more collaborations outside our community with pro illustrators and others.
Erik: These things are possible. gvar is modifications on glyphs, and the MS color font format is layered glyphs. Perhaps there is no limit in the format to apply gvar to MS color fonts.
Nick: color i infinitekly variabke and van go wrong for corp id
DC: email app creep ;) scope creep ;) watch out for doing animation in a hackish way when we have a color fonts format that adobe began launching last week in SVG-in-OpenType that does animaion
Erik: well you cant control the SVG
DC: Mmm. But I would like those companies to work to plan this better.
Nick: Right, and the collaboratoin in VF is notable for doing such planning
Erik: Well I think the 4 color formats is WHY VF has been done collaborative
VTF: ...
...
Gerry: Erik is right that "the kids" are very adept with symbolic and iconic communcication. SnapChat seems fun to us, but when they grow up and their bosses are used to using SnapChat, they all have a much richer idea of text, and we think oooo dont do that, but they think its fine for text to vibrate or whatever. Someone young will imagine and do this.
Lorp: "Superblack" was by [ someone? ] and it was a huge glyph that you could push type setting system with, it would jump out the page and do strange things.
Nick: SnapChat, perhaps I'm not open midnded enough, but often you see animations tweening from one end to the other. who wants that?
Lorp: Well they only had a month to think about it.
DC: I think VR and AR will be a big space for this new thinking, as type moves in a space, optical size can help make reading comfortable
Erik: I used VR and, here's wikipedia science, Virgin's Accomodation Reflex, your eyes go closer, your pupil changes, and your eyes try to pull the lense to make it fit. You stare at VR and there is no real depth. They gie the impression it was furhter but actually it isn't. Your eyes try to do this but you try to look there, and that cna't be hepled by fonts. It needs new tech for vision.
Bianca: I think type for VR is not different to type for games.