Glyphs at Beyond Tellerrand

Can you put animations into a font? And what about games? And what did Turkish president Erdoğan have to do with it? Learn the answers to these question, and what you should use instead of SVG in your web projects from now on, in this fun tour de force through modern font technology. Disclaimer: this lecture contains no prefabricated slides, all typing is done live on stage.

Learn how to create simple icons in the font editor Glyphs, integrate them into your web design, and enhance them by adding colours, and making them move. It’s easier than you think.

This workshop provides an introduction to responsive icon design, and covers color font as well as variable font technology. It will touch some basic CSS techniques, and a few tricks from type design.

We’ll create a handful of simple icons in the font editor Glyphs, export a webfont, test it, and integrate them to a simple HTML/CSS. We will proceed to make the icons variable by adding a weight variant to it. Again, we will see how we can test it, and also integrate it into our HTML/CSS, which we will make responsive. We will learn how to animate icons with pure CSS. Eventually, we will add color, test different color formats and see which browsers support which formats.