12 Sep Buona Display: A Stylish, Quirky, Expressive New Type from Outfit!
We are very proud to announce Buona Display, our first ever commercially available typeface! Buona Display is a high contrast sans serif type with a unique ‘reverse’ diagonal axis that feels sophisticated and stylish, yet quirky and expressive. We developed 14 styles (7 weights x corresponding obliques) that allow the type to flex a range of personality traits from chic and elegant to muscular and vivacious (and everything in between).
It will be available on multiple platforms September 2021 — stay tuned! We’ll be sending an announcement (as well as some sweet sweet exclusive promo codes) once it’s been released.
As part of this issue of Eyesight, we’d like to give a little insight into the inspiration and making of the typeface, as well as our experience working on this labor of love.
Inspirations
We have very fond memories of our travels to Italy, as well as the long hours in art history class studying Italian renaissance and Roman works. During lockdown, we felt a deep nostalgia for these vivid experiences and, with this type, wanted to write a love letter to that sense of vivacity and passion for aesthetic refinement that defines many points of Italian culture and history.
Ancient Rome is notably the cradle of our modern Latin alphabet, which (as Hoefler & Co eloquently states) is celebrated in the names of “our upright Roman alphabet” and our slanted “Italics”. We found inspiration in the chisel-cut, squared serifs of Roman capitals, the diagonal stress of Renaissance calligraphic type, and the high contrast modern work of Italian type designer Giambattista Bodoni.
As the most well-known moderate contrast “chisel” sans-serif, the obvious influence is Optima. The less obvious inspiration is early reverse-contrast type like Caslon’s infamous “Italian” collection — an attempt to satirize those popular Italian high-contrast “Didone” typefaces of the early 19th century. Whereas Buona shares this sense of subversion towards the reverse-contrast genre and calligraphic traditions, it has zero irony and 100% admiration for these important chapters of our typographic lineage.
An example of traditional old-style diagonal axis.
Ancient Roman Funerary Plaque showing Roman and Greek Square Capitals.
Development
Some initial sketches.
In conjunction with its many Italic influences, the primary impetus for this type was the question “what happens if we take an old style diagonal axis and reverse it?” Could we produce a type that could break normal typographic rules, yet still feel stylish and refined?
We set about drawing a few initial characters by hand and brought these into Adobe Illustrator as elements to construct and build the rest of the alphabet. Little did we know what an undertaking this project would be! Not only would we have to design a type which wouldn’t adhere to “normal” typographic formal practices, but we also decided to learn Glyphs, a font creation software that’s excellent, but also an application we’ve never used before. While a tad bit anxious as to whether we were biting off more than we could chew (we did), it felt exhilarating to learn a new and powerful application for the first time in ages.
Glyphs proved to be both highly intuitive for Adobe users like us, as well extremely powerful and feature-rich. We kept feeling blown away at seeing different aspects of type such as variable functionality and instance generation just “magically” reveal themselves as we continued to learn and be better at the program.
By the end of it, we produced about 540 glyphs for each of the 14 styles/fonts in the family. This started with Regular and Medium weights, and then branched out into obliques (a kind of slanted version of the upright type that is not stylistic different like italics), and eventually an entire family of styles including ExtraLight, Light, DemiBold, Bold and ExtraBold weights. Let’s go through a few of Buona’s bellissima features, shall we?
Features
Overall, Buona Display has a quirky, singular character to it that stems (no pun intended) from its reverse diagonal stress and axis. This typeface’s distinct idiosyncrasy is best revealed in lowercase characters, but even in mixed case, the upper- and lowercase work together in a cohesive, albeit an off-kilter, yet familiar way. The capitals alone feel a bit less unconventional, but still have plenty of interesting, quirky details to distinguish it.
“Buona Display has a quirky, singular character to it that stems from its reverse diagonal stress.”
Ink Traps
Okay we’ve talked a LOT about the reverse axis/stress, but not enough about Buona’s subtle ink traps! Ink traps are negative spaces in the joints and corners of letters to allow a crisp edge when printing at smaller sizes. Due to the way ink naturally spreads, these areas “trap” the ink during the printing process so they allow the corners of letters to not appear rounded or fuzzy.
In recent years, ink traps have become a kind of post-modern aesthetic choice that lends a sense of the analog tangibility of printing in a now digital world. We integrated them into the design from the very beginning.
Incidentally, Buona’s subtle ink traps further its reflexive and subversive character being somewhat counter (I swear these puns are just writing themselves!) to the seemingly calligraphic nature of the type.
Multi-Language Support
Both of us coming from a family of immigrants, it was important to create multilingual support. We ended up creating characters for over 120 languages. These included Vietnamese — the language of Larry’s motherland, and one with a lamentably small number of high quality font options. This prompted us to create a full set of diacritical marks for Vietnamese with all of its accents, tildes, and points. Trời ơi khó quá!
Stylistic Alternates
Part of the fun of creating fonts is the choice you have to offer more than one solution for each character and for Buona, we created alternates for the lowercase “a” “g” characters, as well as the uppercase “R” glyph.
Ligatures
Any refined and detailed professional typeface has what are called ligatures — adjoining letters that would otherwise bump into one another more awkwardly than seeing your high school math teacher at the grocery store. These joined characters allow smoother reading and better legibility and an ultimately more sophisticated type. We created a pretty full set of standard ligatures (ones that usually go unnoticed and are there to better legibility) and discretionary ligatures (stylistic ones that add a little flair).
Takeaways
So after hundreds of characters, and just as many hours put into this labor of love, we’ve learned a lot about creating and releasing a typeface. Here are some key takeaways:
It’s waaaaay more than just the Latin alphabet
This may seem pretty obvious, but when you’re designing a typeface, there are more than just the 26 uppercase and 26 lowercase letters. There’s more than even just punctuation and letters. In the end we designed more than 500 characters. FIVE HUNDRED. This was everything from semicolons and exclamation marks, to what’s called a “udieresisacute”, otherwise known as a lowercase “u” with an umlaut and a accent mark going upward. With multiple language support, it gets pretty hairy.
We also designed five sets of numbers, as well as fractions, arrows, currency symbols, and mathematical symbols. When designing this amount of glyphs, you realize the complexity, the dimension, the layers that are encompassed by different languages and ultimately you feel a sense of awe and appreciation for the written word — a definitive trait of our human intelligence and civilization.
Endless Kerning
Kerning — the spacing in between glyphs — are just as important as the characters themselves for legibility and aesthetic. With 540 glyphs, it meant finding the correct spacing for every possible combination of glyphs — not a small task. However, Glyphs made this seemingly insurmountable challenge much more manageable with the ability to transfer kernings from one weight to another with a simple cut+paste, as well as integrated functionality that made spacing on the fly extremely easy. After going through this process, we can definitely see why some type designers end up releasing multiple updates to their designs: you could tweak and revise the design for ages. In fact, we’ll probably keep kerning even after the launch…
Consistency is Key
In type design, when we talk about “color”, we are not speaking about the chromatic hue of a type, we’re talking about the overall density and heaviness of the text on a page. This balance of type color and white space is what makes text more or less legible. And so while type design is absolutely about small details, it’s also really about overall readability. The key to this is consistency in contrast (the difference between thicks and thins), stroke widths, spacing and formal elements. The more consistent these elements are, the more aesthetically pleasing the sum of all these parts are as a whole.
With Buona, it was extremely difficult to achieve consistency in color. This is due to the weird, reverse diagonal stress that made the joints thicker on some characters (notably the “a”, “n”, “h”, ”m”, “d”, “b”, “p”, and “q”) leading to uneven contrast and color when paired together. We resolved many of these issues with the ink traps and also finagling the rules of type design to make it work.
Ultimately, we are pretty happy with the results, considering this a seriously unconventional type, and we had to remind ourselves that this quirk is actually a feature and not a flaw of the design and something we needed to lean into at times.
Font Creation Will Blow Your Mind
It’s been a dream of ours for many years to design a commercial type, and Buona Display is something we are extremely proud to have painstakingly crafted with our heart and soul. One of the things that kept us motivated was the very conception of developing a font. The first time you take your font for a spin in an Adobe program, you are just blown away that something that came from your mind is now being used in a professional program to produce graphic design — it’s just an indescribably joyous and profound moment. We imagine it must feel similar to the first time you build a website or program that works exactly the way you wanted it to. You feel this thrilling high of emotion — of accomplishment and gratification, but it’s distinctly different because of the elegance and power of carrying words and meaning in such a purely formal, graphic way.
Conclusion
Designing your own typeface and font, in a lot of ways, makes you feel like you’ve invented a new language or color. It’s definitely something we recommend everyone should try at least once.
We hope you guys like this type as a product as our first commercial foray into the beautiful discipline of type design.
Buona Display will be launching by end of September/early October at Creative Market, Gumroad and YouWorkForThem. Stay tuned!
Thank you!:
Special thanks to Amy and Jen Hood of Hoodzpah for their amazing advice.
Back to All