Mutable Typography is the thesis project of Rolando G Alcantara. It was done for the Graphic Design Masters of Fine Arts program at the Maryland Institute College of Art, class of 2012.

Essay

Mutable type is type that changes. With conventional type, typographers have few options, and the letters remain fixed 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 different 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 files (composed of a collection of dots called pixels), vector files (composed of mathematically defined geometric shapes), or 3D file 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 superficial exteriors of the letters, but not the letterforms (the wood blocks) themselves. The letter placement, legibility, and overall aesthetic would remain intact.

A digital image file containing different 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 different versions of the alphabet. Then he scanned the letterpressed alphabets and gave his students a contact sheet of all the letters, including the different versions. Because the old wooden letters had different patterns of distress, no two versions of a letter were exactly the same. When typesetting from this alphabet, we were able to incorporate different versions of the letter A that were the same shape but had different distress patterns.

Lettering refers to the process of an illustrator or type designer drawing letters to form a message of any length for one specific 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.

Probably one of the most famous examples of lettering ever made is the logo for Coca-Cola. 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 specifically 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 specifically 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.

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 different 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 different version of itself.

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 different 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.

A typeface becomes mutable when it gives the typesetter many different ways to typeset the same message while maintaining a cohesive aesthetic. If a typeface comes with an alternate A, that gives me two different ways to typeset the word Apple–one with the regular A, and one with the alternate A. Two ways to typeset Apple are not enough to make a typeface mutable. If another typeface has one alternate for every letter in the alphabet, that would give me a lot more options to typeset the word Apple (32 to be exact). This typeface would be a mutable typeface.

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 different 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 different 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 flourish to it. Or, it could be a combination of the above.

Typefaces can be made for setting large amounts of text, like an article or a book, or made specifically for titles and few words in large scale. The latter are referred to as display fonts. There are typefaces that serve both purposes. Most mutable typefaces are exclusively display fonts, but they don't have to be.

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 definition, go beyond conventional typesetting and kerning. To get the most out of mutable typefaces, the designer carefully selects and combines alternates, ligatures, and layers.

Mutable typefaces are not that common yet, but a steady increase in their numbers began last decade with the introduction of more advanced font file 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 effort 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 non-standard 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 finding 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 specific forms characters can take. A lower-case a, the small-cap a, and the alternate swash a are all the same character, but they are three different 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 file. A mutable typeface based on alternate characters can now have an obscene number of lower-case as, and still be easy to use.

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 first 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 unified, typographic look. The designers could choose between five different 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.

Like Walker, a well-defined 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.

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. 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 (fi, fl, ff, 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.

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 fits 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 sacrificed for some of the most aesthetically-driven ligatures. So, its up to the typesetters to choose 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 offer. 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.

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 specific text.

Julien uses a pseudo-randomization script written by Tal Leming that avoids repetition of glyphs while creating a unique flow 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 fly.

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.

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 different 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. I continued by drawing as many iterations as I could think of for each letter, while sticking to the rules. I drew hundreds of letterforms, from which I distilled eight alphabets.

After establishing the alphabets, I made font files 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 file 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 different style chosen at random. 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. Click here to see the code at work.

Some mutable typeface designers take a diversified approach. They combine a comprehensive library of alternate characters with one equally elaborate collection of discretionary ligatures, for example. One kind of font that benefits 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. 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.

Ed Script–another typeface from the Ed series from House Industries–and Underware's Liza Pro, are other great examples of mutable typefaces with diversified approaches. They each use alternate character glyphs and carefully crafted ligatures to achieve the appearance of authentic hand lettering–a beautiful synthesis of handwriting, calligraphy, and lettering. Just like Mr. Porter, Ed Script's and Liza Pro's continuous connecting characters and bouncy twin letters make the type appear hand-done. As you type, 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 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.

Geometry has played an important role in the mutable typefaces I've designed so far. In SunCity, the constant height of the unicase block glyphs simplifies the structure. The letterspacing and counter width (the negative space inside letters like A, B, or D) are the same on every glyph, and the stems are always the same thickness. This allowed me to focus on its mutability without worrying about kerning–the space between two individual letters–or the color–how dark one character might look in relation to another.

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.

With Santeria, I kept the importance of a modular, geometric approach to the letterforms in mind. I even designed its flourishes–which rise high, drop low, and move far to the sides of characters–as modules composed of geometric, semi-circular shapes.

Santeria has many independent, purely ornamental glyphs. These are swashes and swirls done with the same aesthetic that the stylistic alternate characters have. The typesetter can decide which regular and alternate characters to mix and match. If the typesetter wishes to fill 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. Santeria is a good example of how a mutable typeface can be a kind of do-it-yourself lettering. Armed with a kit of parts–character glyphs and ornaments–the typesetter acts as curator, carefully assembling his or her own ornate specimens.

Santeria is not available for download yet. The careful variations and intricate ornaments need plenty of work hours to be finessed into a finished form. The typeface will be released in late 2013.

Perhaps the most popular approach to mutable typefaces in recent years has been the use of layering. 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 off-the-cuff look. 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. 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.

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. History plus Hipster equals Hipstory. My drawings for Hipstory began as an all-cap, hairline thin, san serif alphabet–the base layer. Different 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 first 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.

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.