Full Width 
Shortcuts 
Sign Up 
Log In 
Articles 
Reading List More from Fonts In Use – Blog Only
Contributed by Stephen Coles Source: www.flickr.com Kit Karzen/Harris for President. License: All Rights Reserved. The Kamala Harris 2024 campaign identity, designed by Wide Eye Creative, is built around Sans Plomb, a condensed gothic not unlike the Bureau Grot used by Wide Eye for Harris’s 2020 primary bid – in turn inspired by Shirley Chisholm’s 1972 campaign. This time, though, the typeface is from a French foundry, rather than from Anglo-American origins (Stephenson Blake via Font Bureau). Source: fontsinuse.com License: All Rights Reserved. The logo for Kamala Harris’ 2020 campaign used Bureau Grot and an atypical asymmetrical layout. It’s not clear to me why they made the switch. From a design point of view, the caps aren’t significantly different from Bureau Grot. Perhaps they liked the more constructed, “modern” feel? Personally, I would have gone back to Chisholm’s pick, the all-American Franklin Gothic, which has no shortage of contemporary versions for any use case. (At the risk of friendship bias, I recommend the interpretation from Fonts In Use cofounder Nick Sherman.) The symmetrical layout for “Harris/Walz” is a much more conventional approach compared to Harris’s 2020 logo, which took a different road than most US presidential campaigns. The new look reflects her move to the center (no pun intended) for a broader audience. Source: www.flickr.com Eric Elofson/Harris for President. License: All Rights Reserved. Not the best kerning on this rally sign (AY). The font, Sans Plomb Super, doesn’t deliver that big of a gap out of the box, so something went awry in the typesetting. Source: kamalaharris.com License: All Rights Reserved. Source: kamalaharris.com License: All Rights Reserved. Source: store.kamalaharris.com License: All Rights Reserved. The supporting face for “WALZ”, running text, and other small bits like “YES SHE CAN” merch is Balto, Tal Leming’s contemporary take on the American gothic genre, such as Franklin Gothic and News Gothic. The Harris web store adds Sara Solskone and Jonathan Hoefler’s Decimal, a continuation of the Biden/Harris 2020 campaign. Seeing Solskone’s name makes me wonder if maybe there was a missed opportunity to also choose a typeface by an American woman for the main mark. For example, Program by Zuzana Licko, or Utile Narrow by Sibylle Hagmann. Source: store.kamalaharris.com License: All Rights Reserved. Source: kamalaharris.com License: All Rights Reserved. The logo used in this web pop-up is the early version before it was redrawn (see below). Source: www.instagram.com Jonathan Hoefler. License: All Rights Reserved. A refined version of the Harris/Walz logo (white outline) launched around August 11. The biggest changes were relieving the pinched curve at the top of the S and enlarging “WALZ” just slightly to the left for optical centering. Hoefler, whose typefaces (or those of Hoefler & Co.) have been part of the logo for “every Democratic president in the twenty-first century”, recently revealed that the mark was refined on August 10–11, a few weeks after its initial launch. The work – which involved some redrawing and better “WALZ” centering – was done by Leming and Scott Dadich under the direction of Wide Eye’s Alayna Citrin. Hoefler also commented that, “Trump has used Gotham for years, and NEVER bought a license. Color me surprised! We talked to a white shoe lawfirm in NYC about taking action, and was told, with a laugh, ‘take a number.’” Ironically, it was Barack Obama’s 2008 run that made Gotham (and its lookalikes) a default for US political campaigns, regardless of party. At least Harris is diverting a bit from that same old choice. This post was originally published at Fonts In Use
Contributed by Florian Hardwig Source: www.abebooks.com Between the Covers (edited). License: All Rights Reserved. One advantage that lettering has over typeset text is that the artist can always alter letterforms ad hoc, depending on the context. This allows her to make the most of the available space, to dissolve awkward pairs into pleasing combinations, or simply to enliven a design by means of variegation. Ursula Suess was a graphic artist who designed numerous book jackets in her career. For the majority of them, she’d come up with her own letterforms. I’ll later add a selection of designs that hints at her stylistic range in the comments to this article. Source: www.abebooks.com Between the Covers. License: All Rights Reserved. An early jacket with italic lettering, designed by Suess for Sean O’Casey’s Sunset and Evening Star, Macmillan, 1955 Source: www.abebooks.com Between the Covers. License: All Rights Reserved. Suess designed the jacket for The Confrontation by Lenore Marshall (W.W. Norton) in 1972, the year her Book Jacket was released. The lettering could pass as an extrabold variation. Source: www.klingspor-museum.de Photographer unknown. License: All Rights Reserved. An undated portrait of Ursula Suess In the early 1970s, Suess set about designing a typeface. According to a 2014 article by Ellen Sussman, she was in part motivated by the fact that “most type styles at the time were too wide and didn’t fit on a jacket.” Her typeface indeed is compact, both horizontally and vertically, with condensed, tight-setting letterforms and a large x-height with short extenders. Suess didn’t want to forgo all the flexibility she was familiar with from lettering, so she drew a large set of alternates. A TGC specimen sums it up: “She used lettering similar to this in her book cover designs, where space limitations called for lettering with many swash characters that was strong and condensed, yet rich and sensuous.” The calligraphic design was released by VGC as a stand-alone italic in 1972, named Book Jacket. Whether you find the name boring or brilliant, it did clarify the intended application area. And Book Jacket indeed was used for designing book jackets. One example by Suess herself is shown here. (See Robert Halsband’s biography of Lord Hervey for a second one.) As We Are Now is a novel by Belgian-American writer May Sarton (1912–1995), published by W.W. Norton & Company in 1973. Suess used her typeface in two sizes, with the alternate swash caps for the big initials, a wider terminal form in “We”, and hardly any space between the last two words of the title. For the subline, she opted for more restrained forms overall, but inserted a descending h, a sweeping f that embraces the preceding o, and a single swash cap L in “LOVE”. The a in “author” is the double-story alternate. May Sarton’s name is set in Richard Isbell’s wide Americana. Source: canadatype.com Canada Type. License: All Rights Reserved. Partial glyph set of Book Jacket Pro, the digitization drawn by Patrick Griffin and released by Canada Type in 2010 Ursula Suess was born August 13, 1924 – which means it’s her 100th birthday today. Canada Type, who released a digital version of Book Jacket in 2010, provided a biographical outline: Ursula Suess was born in 1924 to German parents in Camden, NJ, and grew up in Munich, Germany, where she attended two semesters of design school at the Academy of Fine Art before it burned down during the war [in July 1944]. She then studied calligraphy with Anna Simons for two years. She returned to America in 1946 and established herself as a graphic designer working for Oxford University Press, Macmillan Co., Harper, and other publishers. She also taught calligraphy for 20 years at the Westchester Art Workshop, and at the Cooper Union in New York City. In her 50s she learned to cut gems and eventually became an accomplished gem carver. She moved to Green Valley, AZ, in 1998, and has been applying her artistic versatility with clay, water-color and acrylics. In Arizona, Suess became a long-time supporter of the Tubac Center of the Arts. Ellen Sussman additionally mentions paper sculpture, pottery, and collage as techniques she engaged in. Apart from Book Jacket, she is credited with at least one more typeface: Rotalic is a low-contrast italic sans featuring swash caps with ball terminals. It was also released with VGC. One of its four styles recently was digitized as BN Rascal. Suess passed away in 2020. She left us a large number of beautiful works, including many pieces of lettering and two unique typefaces that have stood the test of time. Source: tubacarts.org DeDe Isaacson, Tubac Center of the Arts. License: All Rights Reserved. Ursula Suess at the Tubac Center of the Arts Source: www.abebooks.com Rare Book Cellar. License: All Rights Reserved. This post was originally published at Fonts In Use
Contributed by Stephen Coles Source: lithub.com License: All Rights Reserved. Martyr! is a novel by Iranian-American writer Kaveh Akbar that combines modern situations with traditional imagery. For the jacket, prolific cover designer Linda Huang did what she does so well: pick a striking and relevant typeface and let it do a lot of the work. License: All Rights Reserved. Left: Salem, as advertised in the Inland Printer, Vol. 28, No. 2 (November, 1901). Right: Daria Cohen’s reinterpretation, Zangezi (2018), with additional weights, italics, and condensed (2021). Her choice was Zangezi Condensed, a fresh, fashion-forward take on Salem, in which Daria Cohen took a turn-of-the-century dazzler, narrowed it, and increased its stroke contrast, giving it even more spike and sparkle than it already had. The idiosyncratic type is the perfect companion to the contemporary use of antique illustration. Huang also deftly delivers the commercial necessities – a blurb and “a novel” – in an inconspicuous way. Huang on the design: Despite its heavy themes, I found Akbar’s novel to be insanely funny,” Huang told Literary Hub. “I cackled many times while reading the manuscript. More than anything, I wanted to evoke this unique tragi-comedic tone on the cover. One of the central, recurring images is this Iranian ‘Angel of Death’ warrior. I experimented with scale and ultimately found the warrior in miniature to be most striking, with ‘a novel’ set in a deadpan speech bubble. I was also lucky to stumble upon the perfect decorative typeface to activate all that negative space. To me, humor is one of the most alluring qualities in a book (and really, in life) so it was an absolute treat to work on Akbar’s novel. Source: www.penguinrandomhouse.com License: All Rights Reserved. The version of the cover seen in bookstores today. Martyr! quickly became a New York Times best seller – soon enough for the cover to get an extra speech balloon celebrating that fact. You can also see an improvement on the letterspacing in “Akbar”. A Digression and Suggestion Photo: Stephen Coles. License: All Rights Reserved. Once you get to the end of a book, “a note on the type” is a great way to learn about the creation of the letterforms you’ve been staring at for hours. Photo: Stephen Coles. License: All Rights Reserved. Back jacket flaps usually include an author bio and designer credit. This is good. Could they include a bit more? The interior of this book, designed by Betty Lew, includes “A Note on the Type”, a lovely hundred-year-old publishing tradition which not only credits the text face (in this case, Dante), but tells a bit of its story. Why not have a typeface credit on the jacket flap, too? Sure, you’re reading a lot more Dante than Zangezi when you read this book, but it’s the cover that often sells the book. Also, the type used on book covers is more likely to be something newer that the interior text, and thus more likely to be made by living designers. Isn’t it time we give them a nod? This post was originally published at Fonts In Use
Contributed by Florian Hardwig Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. January 1990, ft. an unidentified rounded sans Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. February 1990 ft. Italia Bold C82 is the website of Nicholas Rougeux, a Chicago-based designer and data artist. One of the many great things one can find on C82 is his collection of train tickets sold by Metra. Every month, the commuter rail system in the Chicago metropolitan area releases a new ticket design. In 2004, Nick started collecting. Over the years, and with the help from other ephemera enthusiasts as well as of Metra, the archive considerably grew in size. At the time of writing, it includes an impressive 1,395 tickets, spanning more than fifty years of commuter history. This post highlights the monthly tickets from 1990 and 1991. In a recent blog update, Nick comments: In the early 90s, ticket designs varied significantly with new typography and visual styles appearing each month. I can’t say these are some of my favorites but I recognize that this may have been in an effort to curb counterfeiting. However, I do enjoy some of the typography from the 1990s tickets. I owe a big thanks to fellow collector John for these and others. Each of the tickets features a different typeface. Many of the chosen fonts stem from the libraries of ITC (Korinna, Quorum, Serif Gothic, Zapf Chancery, …) and Letraset (Caxton, Italia, Romic, …). There are also classics that go back to the era of foundry type, like Beton, City, or Optima, and Monotype originals like Albertus and Plantin. The typographic smorgasbord is completed by designs as diverse as Moderne Schwabacher, a turn-of-the-century blackletter; Salut, an upright script first cast by Gebr. Klingspor in the 1930s; and Checkmate, a futuristic sans with chamfered corners, dreamt up at Schaedler in the 1970s – all of which were either used still as phototype, or in the form of early digitizations. For the year 1990, all abbreviated month names are shown in vertically stretched letterforms. The source of the stacked numerals (“90”) was identified by Quinn as City Bold, see comments. The bitmap caps (“D/A”) are likely custom. While the spelled-out month names and the ticket numbers are similar to OCR-B, the specific font appears to be a proprietary design with some differences, probably from a specialized printing machine. The Metra logo seen on the depicted train as well as on some of the tickets is Crillee. See also the dedicated post about it. Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. March 1990 ft. Macbeth Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. April 1990 ft. City Bold Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. May 1990 ft. Checkmate Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. June 1990 ft. Roberta Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. July 1990 ft. what appears to be a version of Filmotype Amber (or a similar face) Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. August 1990 ft. Salut Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. September 1990 ft. Moderne Schwabacher a.k.a. Chalet Text Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. October 1990 ft. Clarendon Condensed Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. November 1990 ft. Beton Bold Condensed Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. January 1991 ft. ITC Quorum Bold Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. February 1991 ft. ITC Kabel Ultra Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. March 1991 ft. ITC Serif Gothic Heavy with the pointed forms for M and A that were omitted from the digital version. “March 1991” uses ITC Korinna and Times New Roman. Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. April 1991 ft. a bold variant of Plantin Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. May 1991 ft. a bold variant of Albertus Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. June 1991 ft. Caxton Bold Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. July 1991 ft. Optima Bold Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. August ft. ITC Cheltenham Bold Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. September 1991 ft. ITC Zapf Chancery Bold with the alternate swash caps Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. October 1991 ft. a bold variant of Century Oldstyle Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. November 1991 ft. Romic Bold Source: www.c82.net C82 / Nicholas Rougeux. License: All Rights Reserved. December 1991 ft. ITC Berkeley Oldstyle This post was originally published at Fonts In Use
More in design
Why Icons Alone Aren’t Enough I’m a firm believer in text labels. Interfaces are over-stuffed with icons. The more icons we have to scan over, the more brain power we put toward making sense of them rather than using the tools they represent. This slows us down, not just once, but over and over again. While it may feel duplicative to add a text label, the reality is that few icons are self-sufficient in communicating meaning. The Problems that Icons Create 1. Few icons communicate a clear, singular meaning immediately It’s easy to say that a good icon will communicate meaning — or that if an icon needs a text label, it’s not doing its job. But that doesn’t take into consideration the burden that icons — good or bad — put on people trying to navigate interfaces. Even the simplest icons can create ambiguity. While a trash can icon reliably communicates “delete,” what about the common pencil icon. Does it mean create? Edit? Write? Draw? Context can help with disambiguation, but not always, and that contextual interpretation requires additional cognitive effort. When an icon’s meaning isn’t immediately clear, it slows down our orientation within an interface and the use of its features. Each encounter requires a split-second of processing that might seem negligible but accumulates across interactions. 2. The more icons within an interface, the more difficult it can be to navigate. As feature sets grow, we often resort to increasingly abstract or subtle visual distinctions between icons. What might have worked with 5-7 core functions becomes unmanageable at 15-20 features. Users must differentiate between various forms of creation, sharing, saving, and organizing - all through pictorial representation alone. The burden of communication increases for each individual icon as an interface’s feature set expands. It becomes increasingly difficult to communicate specific functions with icons alone, especially when distinguishing between similar actions like creating and editing, saving and archiving, or uploading and downloading. 3. Icons function as an interface-specific language within a broader ecosystem. Interfaces operate within other interfaces. Your application may run within a browser that also runs within an operating system. Users must navigate multiple levels of interface complexity, most of which you cannot control. When creating bespoke icons, you force users to learn a new visual language while still maintaining awareness of established conventions. This creates particular challenges with standardized icon sets. When we use established systems like Google’s Material Design, an icon that represents one function in our interface might represent something entirely different in another application. This cross-context confusion adds to the cognitive load of icon interpretation. Why Text Labeling Helps Your Interface 1. Text alone is usually more efficient. Our brains process familiar words holistically rather than letter-by-letter, making them incredibly efficient information carriers. We’ve spent our lives learning to recognize words instantly, while most app icons require new visual vocabulary. Scanning text is fundamentally easier than scanning icons. A stacked list of text requires only a one-directional scan (top-to-bottom), while icon grids demand bi-directional scanning (top-to-bottom and left-to-right). This efficiency becomes particularly apparent in mobile interfaces, where similar-looking app icons can create a visually confusing grid. 2. Text can make icons more efficient. The example above comes from Magnolia, an application I designed. On the left is the side navigation panel without labels. On the right is the same panel with text labels. Magnolia is an extremely niche tool with highly specific features that align with the needs of research and planning teams who develop account briefs. Without the labels, the people who we created Magnolia for would likely find the navigation system confusing. Adding text labels to icons serves two purposes: it clarifies meaning and provides greater creative freedom. When an icon’s meaning is reinforced by text, users can scan more quickly and confidently. Additionally, designers can focus more on the unity of their interface’s visual language when they’re not relying on icons alone to communicate function. 3. Icons are effective anchors in text-heavy applications. Above is another example from Magnolia. Notice how the list of options on the right (Export, Regenerate, and History) stands out because of the icons, but the text labels make it immediately clear what these things do. See, this isn’t an argument for eliminating icons entirely. Icons serve an important role as visual landmarks, helping to differentiate functional areas from content areas. Especially in text-heavy applications, icons help pull the eye toward interactive elements. The combination of icon and text label creates clearer affordances than either element alone. Finding the Balance Every time we choose between an icon and a text label, we’re making a choice about cognitive load. We’re deciding how much mental energy people will spend interpreting our interfaces rather than using them. While a purely iconic interface might seem simple and more attractive, it often creates an invisible tax on attention and understanding. The solution, of course, isn’t found in a “perfect” icon, nor in abandoning icons entirely. Icons remain powerful tools for creating visual hierarchy and differentiation. Instead, we need to be more thoughtful about when and how we deploy them. The best interfaces recognize that icons and text aren’t competing approaches but complementary tools that work best in harmony. This means considering not just the immediate context of our own interfaces, but the broader ecosystem in which they exist. Our applications don’t exist in isolation — they’re part of a complex digital environment where users are constantly switching between different contexts, each with its own visual language. The next time you’re tempted to create yet another icon, or to remove text labels, remember: the most elegant solution isn’t always the one that looks simple — it’s the one that makes communication and understanding feel simple.
Challenge: Create a private label for the legendary sixth-floor Food Hall at KaDeWe — also known as the culinary heaven...
I’ve been working on a transition to using light-dark() function in CSS. What this boils down to is, rather than CSS that looks like this: :root { color-scheme: light; --text: #000; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --text: #fff; } } I now have this: :root { color-scheme: light; --text: light-dark(#000, #fff); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } That probably doesn’t look that interesting. That’s what I thought when I first learned about light-dark() — “Oh hey, that’s cool, but it’s just different syntax. Six of one, half dozen of another kind of thing.” But it does unlock some interesting ways to handling themeing which I will have to cover in another post. Suffice it to say, I think I’m starting to drink the light-dark() koolaid. Anyhow, using the above pattern, I want to compose CSS variables to make a light/dark theme based on a configurable hue. Something like this: :root { color-scheme: light; /* configurable via JS */ --accent-hue: 56; /* which then cascades to other derivations */ --accent: light-dark( hsl(var(--accent-hue) 50% 100%), hsl(var(--accent-hue) 50% 0%), ); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } The problem is that --accent-hue value doesn’t quite look right in dark mode. It needs more contrast. I need a slightly different hue for dark mode. So my thought is: I’ll put that value in a light-dark() function. :root { --accent-hue: light-dark(56, 47); --my-color: light-dark( hsl(var(--accent-hue) 50% 100%), hsl(var(--accent-hue) 50% 0%), ); } Unfortunately, that doesn’t work. You can’t put arbitrary values in light-dark(). It only accepts color values. I asked what you could do instead and Roma Komarov told me about CSS “space toggles”. I’d never heard about these, so I looked them up. First I found Chris Coyier’s article which made me feel good because even Chris admits he didn’t fully understand them. Then Christopher Kirk-Nielsen linked me to his article which helped me understand this idea of “space toggles” even more. I ended up following the pattern Christopher mentions in his article and it works like a charm in my implementation! The gist of the code works like this: When the user hasn’t specified a theme, default to “system” which is light by default, or dark if they’re on a device that supports prefers-color-scheme. When a user explicitly sets the color theme, set an attribute on the root element to denote that. /* Default preferences when "unset" or "system" */ :root { --LIGHT: initial; --DARK: ; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --LIGHT: ; --DARK: initial; color-scheme: dark; } } /* Handle explicit user overrides */ :root[data-theme-appearance="light"] { --LIGHT: initial; --DARK: ; color-scheme: light; } :root[data-theme-appearance="dark"] { --LIGHT: ; --DARK: initial; color-scheme: dark; } /* Now set my variables */ :root { /* Set the “space toggles’ */ --accent-hue: var(--LIGHT, 56) var(--DARK, 47); /* Then use them */ --my-color: light-dark( hsl(var(--accent-hue) 50% 90%), hsl(var(--accent-hue) 50% 10%), ); } So what is the value of --accent-hue? That line sort of reads like this: If --LIGHT has a value, return 56 else if --DARK has a value, return 47 And it works like a charm! Now I can set arbitrary values for things like accent color hue, saturation, and lightness, then leverage them elsewhere. And when the color scheme or accent color change, all these values recalculate and cascade through the entire website — cool! A Note on Minification A quick tip: if you’re minifying your HTML and you’re using this space toggle trick, beware of minifying your CSS! Stuff like this: selector { --ON: ; --OFF: initial; } Could get minified to: selector{--OFF:initial} And this “space toggles trick” won’t work at all. Trust me, I learned from experience. Email · Mastodon · Bluesky
Last semester at university we were given a really cool task. We had to choose an existing company that distributes...
Check out the light in my office right now 🤩 . AI effectively, but to understand how it fits into the larger patterns of human creativity and purpose. That’s a good thing — designers are good observers. No matter what the tech, we notice patterns we notice the lack of them. So in the midst of what is likely a major, AI-driven transition for us all, it’s worth considering that the future of design won’t be about human versus machine, but about understanding the pattern language that emerges when both intelligences work together in a system. As Christopher Alexander and his cohort might have said, it will be about creating a new kind of wholeness — one that honors both the computational power of AI and the nuanced wisdom of human experience.
