mica gd mfa thesis
fig2 Piled alphabet shapes from AlphaBeta | This ďŹ gure contains all eight alphabets in the typeface.
fig3 Layered alphabet shapes from AlphaBeta’s main alphabet | Shapes from A to M are in red; from N to Z, in black. Read more about AlphaBeta on page 13.
mutable typography
rolando g alcantara
fig1 Piled alphabet shapes from AlphaBeta | This >gure contains only the first alphabet of the eight that comprise the typeface.
MU TAB L E TYPO GR A PH Y an essay on type
Mutable type is type that changes. With conventional type, typographers have few options, and the letters remain >xed on the page or on the screen. The letters don’t change. With mutable type, typographers have more power to change how they set the type, how that typesetting is displayed in any given media, and what parts of it might vary over time. Mutable typography encompasses di=erent kinds of type–alphabets, letterings, and typefaces. An alphabet is any set of letters from A to Z that can be arranged to form words. An analog alphabet made for printing is a typeface. A digital alphabet is not a typeface unless it is in a correct font format like .otf, .ttf, .aat, etc. Digital alphabets reside in raster image >les (composed of a collection of
dots called pixels), vector >les (composed of mathematically de>ned geometric shapes), or 3D >le formats. A mutable alphabet would feature options beyond a single set of A to Z characters. For example, physical, three-dimensional letterforms (like blocks of wood carved into letters) could be coated with blackboard paint, and a person could draw on the letter blocks with colored chalks. This would be a mutable alphabet. In this example, anyone could erase the colored-chalk drawings and redraw new ones to change the super>cial exteriors of the letters, but not the letterforms (the wood blocks) themselves. The letter placement, legibility, and overall aesthetic would remain intact.
pg3
mica gd mfa thesis
A digital image >le containing di=erent alphabets with a single aesthetic is a mutable alphabet. During my undergrad studies, I had a graphic design professor who made a mutable alphabet this way. He started with an old set of wooden type. He used the wooden type to letterpress an alphabet, but to make his set of letters into a mutable alphabet, he used the letterpress to stamp di=erent versions of the alphabet. Then he scanned the letterpressed alphabets and gave his students a contact sheet of all the letters, including the di=erent versions. Because the old wooden letters had di=erent patterns of distress, no two versions of a letter were exactly the same. fig4 When typesetting from this alphabet, we were able to incorporate di=erent versions of the letter A that were the same shape but had di=erent distress patterns.
fig5 Benevolent Dictator | Ken Barber’s lettered certiďŹ cate was presented to Tal Leming at the 2012 Robothon conference in recognition of his contributions to the UFO font data storage format. www.typeandlettering.com.
Lettering refers to the process of an illustrator or type designer drawing letters to form a message of any length for one speci>c use only. Professionals are often called upon to make letterings for logos, magazine spreads, album covers, posters, tattoos, business names on storefront windows, advertisement murals on the sides of brick buildings, and so on. fig5
mutable typography
pg5
rolando g alcantara
fig4 Delittle Wood Type | The image appears here courtesy of TheCounter Press’ Flickr account.
Probably one of the most famous examples of lettering ever made is the logo for Coca-Cola. fig6 Those swift, script capital Cs are immediately recognizable and look odd without the rest of the mark. Coca-Cola’s logo is considered lettering because it was drawn speci>cally for the brand. I’ve seen mediocre attempts where someone has tried to take the letters from the logo and build a non-mutable typeface around them, but it’s nearly impossible to make a non-mutable font resemble true lettering. The Coca-Cola letters were drawn speci>cally to connect in a single work of art, a brand name, and not to be individually disconnected and reordered, the way a font would be.
fig6 Fraction of the iconic Coca-Cola logo | This lettering piece is well recognized around the world.
A letterer–he or she who creates letterings– would take advantage of new media to make a lettering piece mutable. On the internet, animated GIFs can be used to make mutable letterings. A GIF (pronounced like the peanut butter Jif) is a web-friendly image format. An animated GIF contains di=erent images as layers that are revealed on a timer like video and film. In a mutable lettering GIF, each layer can hold different mutations of the letterforms. With each timed reveal of a layer, the lettering changes into a di=erent version of itself. fig7
mica gd mfa thesis
Video could also be used in a similar way as animated GIFs. A loop showcasing a curated morphing of characters is also an example of mutable lettering. Like animated GIFs, video depends on screen media. Printed lettering must be more audacious to become mutable–perhaps relying on the reveal of di=erent translucent physical layers to change the letterforms underneath, or something equally far-fetched. Typefaces are any set of type (a usual set has upper and lowercase alphabets, numerals, hyphens and punctuation marks) in which the design looks cohesive from one character to another. Typefaces are ready to be set letter by letter to form any text. Digital typefaces are called fonts. Analog typefaces are carved out of wood or cast in lead for use in printing presses.
You might be thinking, “Okay, but many typefaces come with small cap alternates. Does that make them all mutable typefaces as well?” The answer is no. Small caps are not intended to be alternates for either uppercase or lowercase letters. They have a separate function within a type family, and that function is not to operate as lowercase alternates. They are an entire alternate category for titling. Instead of uppercase titling, small caps are lowercase titling. They function as uppercase letters limited by the x-height of the lowercase. Mutable typefaces can have di=erent approaches to mutability. They could rely on a carefully curated, and usually vast, collection of ligatures or alternates. They could have purely ornamental glyphs that the designer can use to embellish any typeset. They could use additive layering, where each style within the typeface family acts as a di=erent structural or decorative element for the character. For example, one style can provide the inline, or thin shape of a letter, while another one can add a ?ourish to it. fig8 Or, it could be a combination of the above.
A typeface becomes mutable when it gives the typesetter many di=erent ways to typeset the same message while maintaining a cohesive aesthetic. If a typeface comes with an alternate A, that gives me two di=erent ways to typeset the word Apple—one with the Typefaces can be made for setting large regular A, and one with the alternate A. Two amounts of text, like an article or a book, or ways to typeset Apple are not enough to make made speci>cally for titles and few words in a typeface mutable. If another typeface has large scale. The latter are referred to as display one alternate for every letter in the alphabet, fonts. There are typefaces that serve both that would give me a lot more options purposes. Most mutable typefaces are excluto typeset the word Apple (32 to be exact). sively display fonts, but they don’t have to be. This typeface would be a mutable typeface.
mutable typography
pg7
rolando g alcantara
fig8 Additive layering example | The two layers keeping the basic shape are in red; the layer adding a flourish to the inline is in black.
Mutable typefaces give the designer options. They recall the graphic designer to his or her typesetting roots. Anyone who works with mutable typefaces must, by de>nition, go beyond conventional typesetting and kerning. To get the most out of mutable typefaces, the designer carefully selects and combines alternates, ligatures, and layers. fig7 Brand New Stars | Jason Wong created this animated GIF of mutable lettering www.friendsoftype.com
Mutable typefaces are not that common yet, but a steady increase in their numbers began last decade with the introduction of more advanced font >le formats that culminated in the standardization of the OpenType Format. Before OTF, type designers who wished to make mutable typefaces–or have uncommon glyphs, discretionary ligatures, or any kind of non-standard options or foreign language support on their typefaces–had to make an extra e=ort to get around the existing limitations of early font formats such as FON, Type 1, or PostScript. Some early typefaces came with “companion styles,” in which regular letters were swapped out for nonstandard glyphs. Before OpenType, the typesetter had to do a lot more work. The typesetter had to make changes one letter at a time, manually selecting each character and >nding its replacement
in the companion style font. With OpenType, the software does the work. The typesetter needs only to click “discretionary ligatures” or “alternates” on the glyph palette to select their favorite replacement. The standardization of the OpenType format has enabled the proliferation of mutable typefaces. The ease of alternate and ligature selection brought to the typesetter is one of many reasons for this proliferation. OTF expanded the glyph capacity to over 65,000 per typeface. Glyphs are the speci>c forms characters can take. A lower-case a, the smallcap a, and the alternate swash a are all the same character, but they are three di=erent glyphs. OTF allows the type designer to name their stylistic alternate collection. So a single typeface can have “Swash Alternates,” “Stylistic Alternates,” and “Decorative Alternates” integrated in the same >le. A mutable typeface based on alternate characters can now have an obscene number of lower-case as, and still be easy to use.
mica gd mfa thesis
OpenType also allows scripting for added customization. This lets type designers and coders automate features in their typefaces. Some mutable typefaces actually choose the best-looking combination of alternates and ligatures for you (I’ll address some of these typefaces later in this essay). The >rst mutable typeface to earn widespread attention appeared in 1995. It was designed by Matthew Carter for the Walker Art Center in Minneapolis. Walker, the typeface, introduced the notion of the snap-on serif. The snap-ons gave the Art Center’s designers the freedom to express the many personalities of the institution, while maintaining a uni>ed, typographic look. The designers could choose between >ve di=erent kinds of serif to attach to each character. The typeface also included horizontal rulers that could be placed as an underline and/or “overline” from which to hang the text. fig10 Like Walker, a well-de>ned approach to mutability is capital to a good mutable typeface. Ed Interlock, released by House Industries, uses an immense collection of discretionary ligatures to achieve mutability.
fig10 Walker | Matthew Carter created Walker, a mutable typeface. Walker introduced the notion of the snap-on serif.
Ed Interlock was created by Ken Barber in collaboration with Ed Benguiat. It’s part of a small collection of fonts released as an homage to Benguiat by the type foundry House Industries. With almost 1,400 discretionary ligatures, Ed Interlock makes typesetting a unique wordmark or headline as easy as typing on your keyboard. fig11 It is coded to search for the best way of displaying the words you’re typing to achieve a more hand-done appearance. Contrary to standard ligatures, which solve the problem of characters running into each other (>, ?, =, and their combinations are the most common), discretionary ligatures, as the name implies, are to be used at the typesetter’s discretion. I designed SunCity when I was inspired by the idea of discretionary ligatures as the core approach to a mutable typeface. I based SunCity on the lettering I had made for a tour poster. SunCity is a san serif font. It is unicase, which means it mixes uppecase and lowercase letterforms. It is low contrast, so there's not much variation in the width of the width of its thicks and thins. It is ultra condensed and geometric. It has a few alternate characters, but its main feature is an ever-expanding collection of ligatures.
fig11 Ed Interlock | Ed Interlock is a mutable typeface from House Industries. As the word ligature is being typed, the typeface actively searches for the best combination of glyphs to achieve a more hand-done feel.
fig12 SunCity | SunCity is a mutable typeface I designed with the ligature approach to mutability in mind. It has over 300 two-letter ligatures with more in the works. As it is clear in this example, SunCity sacriďŹ ces some legibility for style.
mutable typography rolando g alcantara pg9
mica gd mfa thesis
fig13 Sampling of SunCity's glyphs | The glyph library contains alphabet, numerals, alternates, and ligatures.
mutable typography
I approached the design of SunCity in much the same way that Ken Barber approached the design of Ed Interlock. I treated all glyphs– whether characters or ligatures–as blocks or units. While Ed Interlock >ts characters above and below others to create ligatures that can be treated as rectangular blocks, SunCity combines the stems of characters to create its ligature units. Unlike Ed Interlock, SunCity is not coded to automatically replace letters for ligatures as you type. Some legibility is sacri>ced for some of the most aesthetically-driven ligatures. So, its up to the typesetters to choose
rolando g alcantara
the best combination from the glyph palette. The glyph palette is a shortcut window that typesetting software, like Adobe InDesign or Quark Express, have to access all the glyphs a typeface has to o=er. The palette neatly organizes all glyphs by category, and displays alternates or ligatures available for any text selected. SunCity currently consists of only one weight and has over 300 two-letter ligatures. A more expansive ligature library is in the works and will hopefully be available for download later this year.
pg11
mica gd mfa thesis
Another approach to a mutable typeface is the use of alternate character glyphs. Currently, the best mutable typeface using the alternates approach may be Julien. Julien is the latest typeface from Peter Bil’ak, a Czech designer living and working in the Netherlands. Julien has over 1000 glyphs per style (six styles total) which gives typographers a wide range of alternates to mix and match. It is loosely inspired by the avant-garde movement of the 20th century. When set in Julien, the text looks as if a collection of iconic, modernist and geometric letters were curated and placed together for the speci>c text. fig14 Julien uses a pseudo-randomization script written by Tal Leming that avoids repetition of glyphs while creating a unique ?ow of shapes. I love the script that customizes Julien. It makes this great mutable typeface even better. Typesetting Julien is actually fun. As you type, you see the rhythm of the shapes form on the ?y.
Julien and Ed Interlock take advantage of the scripted customization allowed by OpenType. Automated variation through scripting mobilizes these mutable typefaces for the user. Users don’t even need to know about the options in the glyph palette since the mutability is happening as they type. More experienced typesetters, however, always remain in control through the glyph palette, in case the automated rendition of their text is not precisely what they are looking for. Scripting customization is critical for the expansion of mutable typefaces. Their use, proliferation, and importance can only grow as a consequence of scripting. It is uncharted territory into which few are venturing, but those who dare are returning with beautiful treasure. I’m excited to envision the possibilities that scripting holds for mutable and non-mutable typefaces alike.
fig14 Julien | The type specimen, in black, reflects Julien’s influence by naming great modernists. In red, Bil’ak showcases some of Julien’s alternate As. www.typotheque.com.
mutable typography
pg13
rolando g alcantara
fig15 Beginning sketches for AlphaBeta’s letter A | All letters follow closely a small set of rules and fit in a square grid.
fig16 AlphaBeta's JavaScript | Andres Zapata wrote this string of code for AlphaBeta. This code is available at www.mutabletypography.com
Inspired by Julien, the idea of alternates as the core concept of a mutable typeface, and the use of code to randomize characters, I began drawing AlphaBeta. AlphaBeta’s premise was simple: create as many di=erent legible glyphs for each character, with some room for fun, and use JavaScript–a scripting language for the web–to make it mutate in a webpage. In other words, I wanted to set text on my webpage that could vary glyphs of the same characters constantly (changing As every few seconds, for example) or on load (changing As every time you loaded or reloaded the page) while always maintaining its aesthetic cohesiveness.
I began by setting myself a simple set of rules. AlphaBeta would be monospaced–meaning that every glyph would have the same width– unicase, geometric, and san serif. I gave myself a square grid, and then I designed a kit of parts from which to make every letterform: two kinds of curves, three kinds of angles, and straight lines. fig19 I continued by drawing as many iterations as I could think of for each letter, while sticking to the rules. fig15 I drew hundreds of letterforms, from which I distilled eight alphabets. fig17
mica gd mfa thesis
fig17 AlphaBeta's eight alphabets | The main alphabet is in red; the seven alternates are in black and in order from left to right.
After establishing the alphabets, I made font >les from each and converted them into web fonts. Unlike the scripting for Julien and Ed Interlock, the scripting for AlphaBeta is not at the font >le level. Instead, I asked Andres Zapata, creative lead at IdFive–an interactive design agency based in Baltimore, MD–to help me write a JavaScript string that would pick a glyph for each character at random on every load of the webpage. When the page is reloaded, the result will rarely be the same. The JavaScript code written by Andres allows me to give each letter a di=erent style chosen at random. fig16 I then set the pool of styles to choose from as identical in every way, except for their font. Each style is assigned one of the eight fonts made from AlphaBeta’s regular and alternate alphabets. Each time a page is reloaded, the text set in AlphaBeta mutates, thanks to JavaScript.
fig18 Vectorized drawings of AlphaBeta’s As | The filled-in style was abandoned in the final drawings.
mutable typography
rolando g alcantara
fig19 AlphaBeta’s rule set | The limited rule set is composed of straight lines and two types of curves.
pg15
mica gd mfa thesis
Some mutable typeface designers take a diversi>ed approach. They combine a comprehensive library of alternate characters with one equally elaborate collection of discretionary ligatures, for example. One kind of font that bene>ts from this approach is the script font that simulates handwriting. For years handwritten fonts have been the ugly step-child of typefaces. I have always hated how the fonts place two identically handwritten letters in a row, such as the Os in book or look. It destroys the spontaneous appeal of the handwritten font. Mr. Porter, created by Underware for Net-a-Porter men’s line (also named Mr. Porter), has come to redeem the handwritten typeface. Mr. Porter is by far the best example I’ve ever seen of a handwritten font. fig20 It incorporates ligatures and alternate characters to simulate more precisely the variations in handwriting. This great mutable typeface offers Net-a-Porter's designers a means to infuse their menswear line with a unique persona–as if Mr. Porter himself were writing on all of his clothes tags, 'Here’s your scarf. With love, Mr. Porter.” Sadly, this typeface is not available to the public.
fig20 Mr. Porter | Mr. Porter is a mutable handwritten typeface made for Net-aPorter menswear line by Underware. It is a milestone in handwriting typeface design.
fig21 Liza Pro | Liza is a mutable script typeface by Underware. It uses code to find the best combination of characters and ligatures as you type.
mutable typography
Ed Script–another typeface from the Ed series Geometry has played an important role in the from House Industries–and Underware’s Liza mutable typefaces I’ve designed so far. In Pro, are other great examples of mutable type- SunCity, the constant height of the unicase faces with diversi>ed approaches. fig21, block glyphs simpli>es the structure. The fig22 They each use alternate character glyphs letterspacing and counter width (the negative and carefully crafted ligatures to achieve the space inside letters like A, B, or D) are the appearance of authentic hand lettering–a beau- same on every glyph, and the stems are tiful synthesis of handwriting, calligraphy, always the same thickness. This allowed me and lettering. Just like Mr. Porter, Ed Script’s to focus on its mutability without worrying and Liza Pro’s continuous connecting about kerning–the space between two indicharacters and bouncy twin letters make the vidual letters–or the color–how dark one type appear hand-done. As you type, character might look in relation to another. discretionary ligatures replace certain letter combinations to achieve the best hand-done look possible. Transforming lettering into a digital typeface is never easy. The results tend to be static and too predictable. Ed Script and Liza Pro do a great job at it, and the careful considerations and hard work put into them are immediately noticeable. I began Santeria fig23 as an attempt to do just that–transform lettering into a digital typeface. I began by decisively designing a lettering piece that was somewhat modular (the kit-of-parts approach) and geometric.
pg17
rolando g alcantara
fig22 Ed Script | A mutable typeface from House Industries, Ed Script is driven by code to make any typeset text appear to be hand-lettered.
fig23 Santeria | Santeria is a mutable typeface I designed to look like lettering when it is typeset.
mica gd mfa thesis
fig24 Santeria's ornamental glyphs | These can be attached to any letter for added customization when none of the alternates available will do.
>ll negative space, but none of the alternates will do, he or she can pick the best ornament for the job from the glyph palette, expand it– that is, convert it from type glyphs to vector outlines–and add it to the typesetting manually. fig24 Santeria is a good example of how a mutable typeface can be a kind of do-ityourself lettering. Armed with a kit of parts– character glyphs and ornaments–the typesetter acts as curator, carefully assembling his or her own ornate specimens.
fig25 Santeria's alternate As | The regular A lies between two of its swirl alternate replacements.
Santeria is not available for download yet. The careful variations and intricate ornaments Santeria has many independent, purely ornaneed plenty of work hours to be >nessed into mental glyphs. These are swashes and swirls a >nished form. The typeface will be released done with the same aesthetic that the stylistic in late 2013. alternate characters have. The typesetter can decide which regular and alternate characters to mix and match. If the typesetter wishes to
With Santeria, I kept the importance of a modular, geometric approach to the letterforms in mind. fig25 I even designed its ?ourishes– which rise high, drop low, and move far to the sides of characters–as modules composed of geometric, semi-circular shapes.
In AlphaBeta, each glyph is built within the constraints of the same square grid. All glyphs take up the exact same space both horizontally and vertically. This allowed me to forget about the variations in width when one character’s glyph is changed to another.
mutable typography rolando g alcantara pg19
fig26 The Lost Type Co-op | This is a sampling of typefaces available at the Lost Type Co-op. www.losttype.com
mutable typography
pg21
rolando g alcantara
fig27 History | History is a mutable typeface by Peter Bil'ak. www.typotheque.com
Perhaps the most popular approach to mutable typefaces in recent years has been the use of layering. fig28 In 2008, Peter Bil’ak released History through Typotheque. History is composed of 21 styles. Each one acts as an individual layer that can be mixed and matched to achieve a beautiful, completely o=-the-cu= look. fig27 The layer options range from basic san serif hairline and bold san serif rounded, to purely ornamental, bloated outline shapes, and a variety of serifs. The hipster movement–the latest trend in music, fashion, technology, and the arts– has spilt over into type design–you know, like skinny jeans, but san serif. The Lost Type Co-op, a popular pay-what-you-wish online font distributor, has become the mecca for many hipster type designers and consumers. fig26 Most type designers featured in the co-op are amateurs, but talented amateurs. The website currently features 44 typefaces, and continues to grow. Hipster typefaces leave all humanist broad-pen strokes behind for a more geometric (with little to no contrast) approach. Most are either wide and squat or tall and condensed. San serif is the style of choice, but the slab–a thick, long serif–has made a strong comeback. Some hipster typefaces are modular, and many hold on to gimmicks to stand out, like dimensionality–bevel, emboss, drop-shadows, etc.– and other treatments of the sort. Some hipster typefaces attempt to use layering, but the scope of their mutability is very narrow compared to those available from more-seasoned professionals.
fig28 This is an example of the layering approach to typefaces, as visualized by Peter Bil'ak for his typeface History.
mica gd mfa thesis
fig29 Hipstory's main alphabet | Designers are invited to add layers or alternate alphabets complementing this skeleton.
I began drawings for a new mutable typeface after I was inspired by Bil'ak's layering technique for History. I was also inspired by the hipster aesthetic. fig30 History plus Hipster equals Hipstory. My drawings for Hipstory began as an all-cap, hairline thin, san serif alphabet–the base layer. fig29 Di=erent layers could then be added to the base, following its basic structure. I can only guess that Peter Bil’ak began his drawing for History the same way. The concept of Hipstory then grew. Open source is a term commonly used by coders and web developers to refer to any software for which the source code is freely available for anyone to use or modify. Hipstory will be the >rst open source font. Its editable base layer will be freely available for download on its website. Designers are invited to add their own layers, as long as their contributions build upon Hipstory's basic architecture. These additions will then also be available for download, so a typesetter looking at Hipstory for their next project can pick and choose what layers to download and how to mix and match them for their project. fig31 I am excited by the possibilities that mutable typography holds. Mutable letterings will continue to grow. And, I believe, mutability will prove to be a key ingredient of many future successful typefaces. MutableTypography.com is a blog I will keep devoted to mutable type. I will analyze trends in mutable letterings and review new mutable typefaces as they appear in the market. I hope to appeal to those who recognize mutability as an important part of current typography. Mutability in type is so far fun but not indispensable. Mutability is about aesthetics, not information. The word water will say “water” with or without 1,400 varying alternates. However, mutability conveys a contemporary message, one that resonates especially with designers: Everything is always changing.
fig30 Hipstory's ABC | The wide geometric shapes were inspired by the 'hipster' approach to typefaces.
fig31 Initial layer drawings for Hipstory | After making more layers and glyphs, the typeface will be ready for release. On its website, artists and designers are invited to submit layers to the collection.
mutable typography rolando g alcantara pg23