Variable first Baptiste Guesnon Designer & Design Technologist at Söderhavet A small text Text with hyphen- ation Gulliver, Gerard Unger, 1993 Screens are variable first Static units Relative units Pica, type points, %, viewport width, pixels, cm… viewport height Why should type be static… …while writing is organic? Century Expanded plomb from 72 pt to 4 pt and putted at a same scale Image by Nick Sherman Through our experience with traditional typesetting methods, we have come to expect that the individual letterforms of a particular typeface should always look the same. This notion is the result of a technical process, not the other way round. However, there is no technical reason for making a digital letter the same every time it is printed. Is Best Really Better, Erik van Blokland & Just van Rossum First published in Emigre magazine issue 18, 1990 Lettering ? Typography Potential of variations in shape a same letter [————— 500 years of type technology evolution —————] Metal / Ink / Paper / Punch & Counterpunch / Pantograph / Linotype & Monotype / etc. Opentype Gutenberg Postscript Photocompo. Variable Fonts Change is the rule in the computer, stability the exception. Jay David Bolter, Writing Space, 1991 Fedra outlines, Typotheque Metafont Postscript Truetype GX Opentype 1.8 (Variable Fonts) Multiple Master Ikarus Fonts HZ Program Webfont Opentype (.woff) Now 1970 1975 1980 1985 1990 1995 2000 2005 2010 Punk/Metafont Beowolf Digital Lettering Donald Knuth Letteror Letteror 1988 1995 2015 HZ-program Indesign glyph scaling glyph scaling Skia, Matthew Carter for Mac OS, 1993 How to make it work? The Stroke, Gerrit Noordzij, 1985 Metafont book, Donald Knuth Kalliculator, 2007, Frederik Berlaen Beowolf, Letteror, 1995 Parametric fonts ≠ Variable fonts Designing instances vs. designing a design space Multiple Master Font, Adobe, 1991 Static = 42 fonts (2mb) Dynamic = 4 masters in 1 font (0.09mb) Font technology evolve continually Postscript T1 Opentype Truetype Font technology evolve continually Postscript T1 Opentype Truetype + Javascript = Responsive fonts Font-to-width, Nick Sherman and Chris Lewis < https://font-to-width.com > Panorama Family, Production Type Website by Prototypo.io < http://panorama.productiontype.com/ > Font technology evolve continually Postscript T1 Opentype Truetype + Javascript Opentype 1.8 = Variable font Responsive fonts Tangible font Digital font Variable Glyph shape Glyph’s shape Letter Unicode Lettre Robot reading (SEO) + Accessibility Variable fonts are about having more choices Variable fonts are about having more choices too much choice Variable fonts are about having more choices too much choice better and tailored choices Font technology evolve continually Postscript T1 Opentype Truetype + Javascript Variable font = + Responsive fonts Javascript/CSS = Smart font Smart fonts / Parametric type settings Interaction/Animation FontFace observer Font equalizer So what can a variable font do that the current Opentype + Code fonts can’t? · Variation of glyphs within one file · No coding or extension required · Support up to 200 axis · Native support of browsers · Compressed files (fast loading) · Easy to manipulate with CSS or a UI Glyph axis substitutions on top of the previous opentype features Adobe Variable Font Prototype < https://github.com/adobe-fonts/adobe-variable-font-prototype > Use same file extensions Truetype splines CFF2 Splines (TT GX legacy) (soon) Compressed format for web OK, so where can I use variable fonts ? Supported in public versions of In developpers/beta versions Supported in last versions of Axis-Praxis, by Laurence Penney, 2016 < http://axis-praxis.org > How to create a Variable font (Opentype 1.8) Robofont Glyphs App Fontlab 6 FontTools (with a .designspacefile) (native) That’s great, but what will happen to the none variable fonts ? Great, now something else… https://so-type.com @so-type @so-type https://so-type.com @so-type https://so-type.com Licenses from Student license @so-type https://so-type.com Have a great variable day! Baptiste Guesnon So-type @Ba_Gsn @so-type.