large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="https://medium.com/microsoft-design/type-ascending-d9cd4c621ae?source=rss----71c99841f1ad---4">Microsoft Design &#8211; Medium</a> | Rod Cavazos (RXC) 
<h4>Variable Fonts represent an evolutionary shift in typography. We check in on this new font standard and the impact it’s having.</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/813/1*o_iT4GjhQbWXz3hGd6feuA.jpeg">
Punctuated equilibrium describes how major evolutionary changes happen in bursts and cascades rather than through steady streams of incremental adaptation. After two glacial decades, digital typography finally finds itself in a lively period of punctuated equilibrium.
This metamorphosis comes in the form of a potent new standard: OpenType Font Variations (OTFV), more lyrically known as variable fonts. Unlike a few precursor technologies that arose and faded in the 1990s, OTFV smartly drops its pin on the typo-technical timeline.
Before taking a closer look at variable fonts, let’s doff our beanies, pork-pies, and Kangols in recognition of OTFV’s precursors…
<h4>Ancestral Tech</h4>
While the Beige Age of computing (1980~1999) saw the arrival of many ambitious type initiatives, two of them towered above: Adobe &amp; Microsoft’s Multiple Master (MM), and Apple’s TrueType GX. Each system allowed its respective users to customize the basic attributes of enhanced fonts in magically smooth ways. Getting to peak magic often required some technical contortions, though. Praying and/or cursing — while not officially required for the software to work — also played a common role in users’ troubleshooting workflows.
Both systems were eventually decommissioned as consumer products, but they continued serving as engines. MM persisted as a useful production tool for type developers, helping to automate the creation of intermediate font weights. GX technology was absorbed into Mac OS, and ultimately became the mitochondrial core that powers OTFV.
<img alt="" src="https://cdn-images-1.medium.com/max/812/1*XZAdPqDEYgmBGT6DSxSiBA.gif">Skia, by Mathew Carter, was the first GX font created for Apple and has remained on the Mac since 1994. Its variable capabilities have been present all along, just in deep freeze. OTFV now lets Skia breathe again.
<h4>Un/boundaries</h4>
In happy contrast to the ’90s — an era characterized by OS wars, browser wars, and even font format wars — OTFV was borne of a <a href="https://docs.microsoft.com/en-us/typography/opentype/font-variations">farseeing alliance</a> between <a href="https://www.fastcodesign.com/3064032/google-apple-and-microsoft-are-quietly-developing-a-new-type-of-font">Microsoft, Apple, Adobe, Google</a>, and a select group of type companies. The open, collaborative spirit behind the initiative rippled out quickly to the Type Design community. Variable fonts and enabled applications (see the section below) are now reaching Graphic Designers and Creative Directors. While the general public may not ever know or care about OTFV, per se ¯\_(ツ)_/¯, the typographic content they consume will start to become more expressive and refined thanks to it. At least that’s the hope.
Since the earliest days of mechanical type, fonts had fixed sets of physical attributes: weight, width, size, and their particular design characteristics. The advent of phototypesetting in 1950, and then scalable type on the personal computer in 1984 eliminated size as a defining constraint for fonts.
OTFV now melts away weight, width, and other stylistic barriers. The result? Characters that are free to roam a sweeping panorama of morphic possibility (aka the design space) rather than being penned in by the metal-type strictures of the Elizabethan Age.
Traditional digital typefaces (e.g. Calibri or Segoe) have always been made up of separate, isolated font files: one for each constituent weight and style (e.g. Light, Bold, Italic, Condensed). In contrast to that, one variable file can encapsulate a small universe of weights and styles, starting with the familiarly-named ones, then extending to all the micro-intervals a user can access between them.
<img alt="" src="https://cdn-images-1.medium.com/max/812/1*ts7qNTcLpRMeONh6wNhUfA.gif">An exercise in extremes: the <a href="https://djr.com/fit/">Fit typeface</a> by DJR, live-edited using the slider controls in <a href="https://www.axis-praxis.org/specimens/fit">Axis-Praxis</a>’ web app.
<h4>Variable Fonts IRL</h4>
The 2018 editions of Adobe Illustrator &amp; Photoshop CC launched with OTFV control, and thereby kicked off a new era of typographic finesse for Designers. The variability sliders and value fields are nestled into the Character and Property palettes in Illustrator, and the Properties palette in Photoshop. If you’re running Adobe CC 2018, try out the new variable editions of Myriad, Acumin, Minion, and other enhanced system fonts. Look for the small OpenType VARicon next to typeface names in the Font menus.
<img alt="" src="https://cdn-images-1.medium.com/max/812/1*jWFzbBEM7h4XoGlCB9f2RA.gif">More throbbing type. This time demonstrating basic weight &amp; width adjustments in Adobe Illustrator CC 2018.
Other type-centric applications and suites, including Adobe InDesign CC, Microsoft Office, and Apple iWork, are expected to support OTFV in future releases.
On the web, Edge, Chrome, Safari, and Firefox (pre-release edition for now) all now support OTFV. The @font-face rule has been updated to include a font-variation-settings property. This permits developers to define custom variability settings for webfonts within their CSS, which is ideal for responsive pages with breakpoints. For fluid web pages, CSS doesn’t yet allow variable fonts to flex and flow in the same dynamic way other elements can. This is the next threshold in web typography, and it’ll be a reality before we know it.
The modern web and mobile computing have been key to the revival of variable typography (since each one demands scalar adaptability of visual elements) and they will continue as driving forces in the evolution of OTFV.
<h4>Ever Fontward</h4>
While major companies refit their applications for OTFV, intrepid designers and toolmakers are exploring new ways of controlling, mapping, and what-iffing the heck out of variable tech… on levels well beyond simple axis sliders and static text boxes. Prepare to be amazed by what letter-minded polymaths cook up.
<img alt="" src="https://cdn-images-1.medium.com/max/812/1*jy2azKIXlt1r9liNUPtPmw.gif">A code-driven style visualizer by <a href="https://twitter.com/Lorp">Laurence Penney</a> / <a href="https://www.axis-praxis.org/playground/cube/">Axis-Praxis</a>; with David Jonathan Ross’ <a href="https://djr.com/gimlet/">Gimlet</a> type.
The OTFV spec allows for a maximum of 64,000 design axes (stylistic dimensions) within a single font. Since complexity increases with each new axis added, font developers are unlikely to ever push beyond a few dozen per font (famous last words?). As such, the 64K ceiling mainly symbolizes the boundless potential of OTFV.
On a more practical note, the self-contained efficiency of OTFV means that font file sizes are notably lean. All the more with the compression offered by the new WOFF2 webfont format. A traditional 12-font family can be distilled to an eighth of its size, from 2MB down to 250KB, when set up as a unified OTFV font and deployed in WOFF2.
<h4>Type Transcending</h4>
Other exciting developments are underway in the world of digital type—most notably <a href="https://msdn.microsoft.com/en-us/library/windows/desktop/mt765165(v=vs.85).aspx">color fonts</a>—but OTFV holds the ultimate promise for taking typography to new levels. And it is just a matter of time before the OTFV spec assimilates color, and sound, then animation. (But hopefully not social media. Ever.)
Beyond this, it’s not unreasonable to expect the rise of self-aware fonts, in which case we should all hope they’re not infuriated by our typographic transgressions. A sentient, vindictive Comic Sans might well be inclined to eradicate humanity (The Big <a href="https://en.wikipedia.org/wiki/Interrobang">Interrobang‽</a>)—thus ending the <a href="https://en.wikipedia.org/wiki/Anthropocene">Anthropocene</a> epoch and ushering in the Typocene.
Thankfully, the Letter A.I.pocalypse won’t be happening any time soon. (My best calculation places the singularity at 15:05 GMT on March 30, 2033.) So rather than worry about glyphic annihilation, let’s all take a deep, shudder-free breath and focus on enjoying the rich and newly evolved capabilities of variable fonts. 👍
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FdKi9MFB8ABw%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdKi9MFB8ABw&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FdKi9MFB8ABw%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/5398d582de9bbb2724e2a51fc3ef112b/href">https://medium.com/media/5398d582de9bbb2724e2a51fc3ef112b/href</a></iframe>
Special thanks to Microsoft Design Editor <a href="https://medium.com/@jolinetang">Joline Tang</a> for her expertise and ebullience. And for talking me out of writing this in iambic heptameter. That was a good call.
Rod Cavazos is Type Design Lead at <a href="https://www.psyops.com">PSY/OPS</a>, where he and his team have created type systems for some of the largest tech, media, and entertainment brands in the world. (He also helped produce some of Microsoft’s core fonts in the 2000s, and designed the previous Medium logotype.) He teaches the Type Design Advanced Studio at California College of the Arts.
Follow <a href="https://twitter.com/rxc">Rod </a>and <a href="https://twitter.com/psyopstype">PSY/OPS</a> to see what new projects they’re working on.
To stay in-the-know with what’s new at Microsoft Design, follow us on <a href="http://www.twitter.com/microsoftdesign">Twitter</a>, <a href="http://www.facebook.com/microsoftdesign">Facebook</a>, or join our <a href="https://insider.windows.com">Windows Insider program</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d9cd4c621ae" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://medium.com/microsoft-design/type-ascending-d9cd4c621ae">Type Ascending</a> was originally published in <a href="https://medium.com/microsoft-design">Microsoft Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Type Ascending

Type Ascending

Variable Fonts represent an evolutionary shift in typography. We check in on this new font standard and the impact it’s having.

Top Stories