Skip to content

18 posts tagged with “typography”

Here’s a fun visual essay about a artist Yufeng Zhao’s piece “Alt Text in NYC.” It’s a essentially a visual search engine that searches all the text (words) on the streets of New York City. The dataset comprises of over eight million photos from Google Street View! Matt Daniels, writing for The Pudding:

The result is a search engine of much of what’s written in NYC’s streets. It’s limited to what a Google Street View car can capture, so it excludes text in areas such as alleyways and parks, or any writing too small to be read by a moving vehicle.

The scale of the data is immense: over 8 million Google Street View images (from the past 18 years) and 138 million identified snippets of text.

Just over halfway down the article, there is a list of the top 1,000 words in the data. Most are expected words from traffic signs like “stop.” But number twenty-five is “Fedders,” the logo of an air-conditioner brand popular in the 1950s to the 1990s. They’re all over the exteriors of the city’s buildings.

Best viewed on your computer, IMHO.

preview-1757042735943.jpg

NYC’s Urban Textscape

Analyzing All of the Words Found on NYC Streets

pudding.cool iconpudding.cool

In a fascinating thread about designing a typeface in Illustrator versus a font editor, renowned typographer Jonathan Hoefler lets us peek behind the curtains.

But moreover, the reason not to design typefaces in a drawing program is that there, you’re drawing letters in isolation, without regard to their neighbors. Here’s the lowercase G from first corner of the HTF Didot family, its 96pt Light Roman master, which I drew toward the end of 1991. (Be gentle; I was 21.) I remember being delighted by the results, no doubt focussing on that delicate ear, etc. But really, this is only half the picture, because it’s impossible to know if this letter works, unless you give it context. Here it is between lowercase Ns, which establish a typographic ‘control’ for an alphabet’s weight, width, proportions, contrast, fit, and rhythm. Is this still a good G? Should the upper bowl maybe move left a little? How do we feel about its weight, compared to its neighbors? Is the ear too dainty?

Jonathan Hoefler on designing fonts in a drawing program versus a font editor

Threads

Jonathan Hoefler on designing fonts in a drawing program versus a font editor

threads.com iconthreads.com

There are over 1,800 font families in Google Fonts. While as designers, I’m sure were grateful for the trove of free fonts, good typefaces in the library are hard to spot.

Brand identity darlings Smith & Diction dropped a catalog of “Usable Google Fonts.” In a LinkedIn post, they wrote, “Screw it, here’s all of the google fonts that are actually good categorized by ‘vibe’.”

Huzzah! It’s in the form of a public Figma file. Enjoy.

preview-1754632730253.jpg

Usable Google Fonts

Catalog of "usable" Google fonts as curated by Smith & Diction

figma.com iconfigma.com

Kendra Albert, writing in her blog post about Heavyweight, a new tool she built to create “extremely law-firm-looking” letters:

Sometimes, you don’t need a lawyer, you just need to look like you have one.

That’s the idea behind Heavyweight, a project that democratizes the aesthetics of (in lieu of access to) legal representation. Heavyweight is a free, online, and open-source tool that lets you give any complaint you have extremely law-firm-looking formatting and letterhead. Importantly, it does so without ever using any language that would actually claim that the letter was written by a lawyer.

preview-1753379920512.png

Heavyweight: Letters Taken Seriously - Free & Open Legal Letterhead Generator

Generate professional-looking demand letters with style and snootiness

heavyweight.cc iconheavyweight.cc

Before there was Jessica Hische, there was Jim Parkinson. You might not know his name, but you’ve seen his work. Most famously, he was known for the mastheads for Rolling Stone magazine and the LA Times. Stephen Coles has this remembrance.

preview-1751428433957.jpg

Jim Parkinson, 1941–2025

Jim Parkinson—lettering artist, type designer, and painter—died today at his home in Oakland, California, after a long struggle with Alzheimer’s.

typographica.org icontypographica.org

It’s been said that desktop publishing democratized graphic design. For those of you too young to know what the term means, it means the technology that enabled graphic design to go digital. It was an ecosystem, really: the Mac, PostScript, LaserWriter, and PageMaker. But before all that, designers depended on typesetters to set type.

David Langton writing for UX Collective:

A lot was lost when the Macintosh wiped out the traditional typesetting industry. From the art of typography to the craft of typesetting, many essential elements were lost. Typesetters were part of a tradition that stretched back more than 500 years to Gutenberg’s printing press. They understood the basics of type: kerning (spacing between the letters), leading (the space between lines of text), and line breaks (how to avoid widows — those solo words abandoned at the end of a paragraph). They knew about readability (like how to avoid setting type that was too wide to read). There were classic yet limited fonts, with standards for size and leading that assured that everyone working within common ranges maintained a threshold for quality. Yet it was in the craft or business side of typesetting that these services were most under appreciated. Typesetters provided overnight service. They worked overnight, so graphic designers did not have to. We would finish our days specifying the type, and the typesetters would keystroke the manuscripts, proofread, stylize the type, and set up columns following our instructions.

Designers would then pick up the galleys from the typesetters in the morning. The black type was photographically printed on white photo paper. You’d have to cut them up and paste them onto boards, assembling your layout.

Because this was such a physical process, we had to slow down. Langton says:

But since the Macintosh became an in-house tool, the process was reversed. Now, designers design first, then think about it. This shift in process has contributed to a trivialization of the role of graphic designer because anyone can noodle around with the Mac’s sophisticated type tools and make layouts. The design process has been trivialized while the thinking, the evaluation, and the strategic part of the process are often abandoned.

One small thing I’ll point out is that desktop publishing wasn’t popularized until 1985.

  • PostScript was released by Adobe in 1984.
  • The LaserWriter printer was released by Apple in 1985.
  • PageMaker was released by Aldus—later bought by Adobe—in 1985.
preview-1750050186871.jpeg

What the 1984 Macintosh revolution teaches designers about the 2025 AI revolution

Upheaval and disruption are nothing new for graphic designers.

uxdesign.cc iconuxdesign.cc

John Gruber wrote a hilarious rant about the single-story a in the iOS Notes app:

I absolutely despise the alternate single-story a glyph that Apple Notes uses. I use Notes every single day and this a bothers me every single day. It hurts me. It’s a childish silly look, but Notes, for me, is one of the most serious, most important apps I use.

Since that sparked some conversation online, he followed up with a longer post about typography in early versions of the Mac system software:

…Apple actually shipped System 1.0 with a version of Geneva with a single-story a glyph — but only in the 9-point version of Geneva. At 12 points (and larger), Geneva’s a was double-story.

To me, it does make sense that 9-point Geneva would have a single-story a, since there are less pixels to draw the glyph well and to distinguish better from the lowercase e.

preview-1747273905636.png

Single-Story a’s in Very Early Versions of Macintosh System 1

A single-story “a” in Chicago feels more blasphemous than that AI image Trump tweeted of himself as the new pope.

daringfireball.net icondaringfireball.net

Remember the Nineties?

In the 1980s and ’90s, Emigre was a prolific powerhouse. The company started out as a magazine in the mid-1980s, but quickly became a type foundry as the Mac enabled desktop publishing. As a young designer in San Francisco who started out in the ’90s, Zuzana Licko and Rudy VanderLans were local heroes (they were based across the Bay in Berkeley). From 1990–1999 they churned out 37 typefaces for a total of 157 fonts. And in that decade, they expanded their influence by getting into music, artists book publishing, and apparel. More than any other design brand, they celebrated art and artists.

Here is a page from a just-released booklet (with a free downloadable PDF) showcasing their fonts from the Nineties.

Two-page yellow spread featuring bold black typography samples. Left page shows “NINE INCH NAILS” in Platelet Heavy, “majorly” in Venus Dioxide Outlined, both dated 1993. Right page shows “Reality Bites” in Venus Dioxide, a black abstract shape below labeled Fellaparts, also from 1993.

I’ve had Matthew Butterick’s Practical Typography website/ebook bookmarked since I discovered it over ten years ago. It’s making the rounds again, and I think it’s a good reminder that we are all “professional writers” as he describes:

When we think of “professional writers” we probably think of novelists, screenwriters, or journalists. But the programmer, the scientist, the lawyer—and you, if your work depends on presenting written ideas—all deserve to be called professional writers.

But as professional writers, we do more than write. We edit, we format, we print, we generate PDFs, we make web pages. More than ever, we’re responsible for delivering the written word to our readers. So we’re not just writers—we’re publishers.

Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer.

He’s right. As much of our work is in producing documents and content, we are publishers. Here are a few of my favorite pages:

This book reminds me of a couple of seminal books from the early 1990s: The Mac Is Not a Typewriter by Robin Williams and Stop Stealing Sheep by Erik Spiekermann and E. M. Ginger. The former is how I learned all the basics, back when I was designing my high school’s newspaper. The latter is more comprehensive, going deeper into how type works conceptually. These three are all essential resources for any designer.

Butterick’s Practical Typography

Butterick’s Practical Typography

Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer.

practicaltypography.com iconpracticaltypography.com
3D red text “VOTE” with aviator sunglasses above it

Art for Biden

Sometimes it takes a small push to get the creative obsessions going. Like the majority of the country, I’ve been appalled at Donald Trump’s presidency. From his administration’s cruel policies to just how awful of a man Trump has shown himself, I have been gritting my teeth for four years, waiting for him to lose his re-election bid. I was profoundly concerned about democracy in the United States and how it was being actively undermined by Trump and his band of far-right Republicans.

When Trump ran against Hillary Clinton in 2016, I made a poster and website called “Inside Trump’s Brain.” I knew back then how terrible of a president he would be, but had hoped he’d grow into the office. Boy, was I wrong.

So when Joe Biden won the Democratic nomination, I needed to do all I could to get him elected and make Trump a one-term president.

I donated. I talked to the few I knew who supported Trump. I joined Biden’s texting team. But then my friend Christopher Simmons put out a call to his network for artwork to show support for the Biden & Harris ticket. What began as a one-off for me turned into a series driven by not only the cause, but by a need to just make. I became obsessed with 3D typography and loops. The format on Instagram is about creating bite-sized animations that can catch people’s attention and make them pause their scroll for a few seconds.

Here are the pieces in the order in which they were posted. But do note that the “United We Stand” image came first. It was a collaboration with my very talented sister, Gloria. She provided the paintbrush textures and some color consulting.

Dynamic 3D white text reading “RISE UP. SHOW UP. UNITE!” on a red and blue diagonal background, branded with “BIDEN HARRIS” and the @lunarboy handle.

3D red and blue text “VOTE JOE” with aviator sunglasses reflecting the American flag above it, featuring “BIDEN HARRIS” and @lunarboy.

3D text “VOTE FOR” above a heart wrapped in a rainbow Pride flag diagonal stripe on a pink and purple background.

Elegant script-style 3D text “Rise Up, Show Up, Unite!” on a blue-to-yellow gradient background, with “BIDEN HARRIS” and @lunarboy at the bottom.

Bold white “FINISH STRONG” text above diverse fist emojis and an American flag; checklist includes “VOTE,” “STAY IN LINE,” “GET OUT THE VOTE,” “SAVE DEMOCRACY,” with “BIDEN HARRIS” at the bottom.

Re-Typesetting the Star Wars Crawl

Recently Guillermo Esteves did a fantastic experiment with HTML5 and CSS3 by recreating the opening crawl to Star Wars. Although it only currently works in Safari 4, it’s a good preview of how to create something dynamic using web standards and web fonts once the other browsers come along.

But Guillermo’s experiment also reminded me of how awful the typography was of those opening crawls. The original Star Wars opening crawl uses two different typefaces (three if you count “A long time ago…”), is justified without hyphenation, and thus creates obvious rivers and awkward tracking.

Opening crawl from Star Wars: Episode IV – A New Hope, introducing the Rebel Alliance’s theft of the Death Star plans and the Galactic Empire’s threat.

Opening crawl from A New Hope as grabbed from the DVD.

As the subsequent movies came out, the typography was all over the place. The Empire Strikes Back dispenses with letter-spacing altogether. Return of the Jedi overcompensates for the failure of the previous two crawls by using too much letter-spacing.

Opening crawl from Star Wars: Episode V – The Empire Strikes Back, summarizing the Rebellion’s struggles after the destruction of the Death Star.

Opening crawl from The Empire Strikes Back. What happened here? I can drive many trucks through those spaces.

Opening crawl from Star Wars: Episode VI – Return of the Jedi, revealing the construction of a more powerful second Death Star by the Galactic Empire.

Opening crawl from Return of the Jedi. Standbackafewfeetandtrytoreadthatlastparagraph.

The absolute worst though was when ILM matched the style for the Star Wars prequels. At least there was more tracking in the original 1977 version. The 1999 version of the crawl that appeared in The Phantom Menace lacked any letter spacing whatsoever and created huge holes between the words that made the crawl barely readable. (No offense to special effects god and Photoshop co-creator John Knoll. He’s great with FX but he’s not necessarily a designer nor typographer.)

Opening crawl from Star Wars: Episode I – The Phantom Menace, with gold text receding into a starry background, describing political turmoil and the Trade Federation’s blockade.

Opening crawl from The Phantom Menace. Shit in = shit out. It’s a tragedy that they used Empire as the model.

I set out to do a quick experiment to see if I could redo the crawl any better. The first thing I did was to standardize on one typeface. The “A long time ago…,” title and body copy are all Franklin Gothic. Then I tried a version where I kept the justified alignment but decreased the type size. The copy becomes much more readable, but feels too small and loses that epic quality George Lucas was probably after.

Black text on a white background showing the Star Wars: Episode IV – A New Hope opening crawl. The body text is fully justified, with each line aligned evenly along the left and right margins.

Then I simply tried centering it and I think it works. I am able to keep the type size large without creating large gaps between words or letters. Although the very straight sides are lost, I think the intended dramatic effect is still there.

Black text on a white background showing the Star Wars: Episode IV – A New Hope opening crawl. The body text is center-aligned, with each line balanced symmetrically along a central vertical axis.

And of course, I had to whip it up in After Effects to really test the design.

Yeah, file this under geekery.

Where Is the Craftsmanship?

quotes_main

Quotes Pro

Whenever I look at anything with words on it, I look at the typography. Bring me to a local corner lunch cafe with a menu typed out and printed from Microsoft Word and I will have a field day. I would judge even more harshly at a more expensive restaurant. I can’t help it as I—like most designers, I’m sure—just look at everything with a critical eye.

My biggest typographical pet peeve is the rendering of apostrophes, single and double quotes.

It astounds me when I notice this on any piece, and all I can mutter to myself is “Where is the craftsmanship?!” This was not the case decades ago when copy was sent out to professional typesetters. The very thing that democratized graphic design was the the same thing that lowered the bar on what passes for “professional” graphic design. I’m talking about how the computer and software allowed more people access to the tools necessary to create great looking stuff. No longer did designers need to send out manuscripts to a typesetter who would in turn set the type into galleys for the designer to paste up in the mechanical. This spawned a whole new industry called desktop publishing, but killed the entire profession of typesetter, and along with it some higher standards.

Don’t get me wrong. I’m no luddite. I put myself through college by working at a desktop publishing service bureau. But because I had some great teachers, and because of my sometimes unhealthy attention to detail, I had a lot of respect for typography, thus taking the time to learn all the rules and standards. But I digress.

Primes and Quoation Marks

What passes sometimes today for single and double quotation marks are actually foot and inch marks (or hour and minute marks). Why is that? My theory is that to be efficient in the manufacturing of some of the first practical typewriters, they straightened out the quotation marks so they could be dual purpose—open and close. In fact in Christopher Sholes’ patent for the QWERTY keyboard, only a single straight apostrophe key is shown, presumably the user would strike the key twice for a double quotation mark. And of course, most of this layout made its way into our modern computer keyboards and software.

QWERTY Patent Drawing

Software companies like Microsoft and Adobe have been trying to mitigate this error by employing “smart quotes” technology. The software will analyze whether the quotation mark is at the beginning of the word (and then use the open state) or the end of the word (and use the close state). Most the time this actually works well. But what happens when you need to use an apostrophe in its close state as a contraction replacement in words like ’Til, Rock ’n’ Roll, and mac ’n’ cheese? The software isn’t smart enough to replace it with the proper close state and the designer or brand ends up looking amateurish.

Joe’s Mac ’n Cheese

How to not look like an amateur designer? (OK, maybe amateur could be considered a harsh term to you pros. Maybe bad craft is what I’m really talking about.) Go ahead and turn on the smart quotes feature of your favorite design app, but pay attention and override when necessary.

GlyphDescriptionMacWindows
Open single quoteOPTION-]ALT-0-1-4-5
Close single quote (apostrophe)SHIFT-OPTION-]ALT-0-1-4-6
Open double quoteOPTION-[ALT-0-1-4-7
Close double quoteSHIFT-OPTION-[ALT-0-1-4-8