Tag: Typography

Massimo Vignelli and Matej Latin say you only need 5 fonts

/

Vignelli once said that our growing collection of fonts represented “a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones and trash the rest”. Of those few, he selected 5:

As for Matej Latin, his 5 were:

He then left a template for anyone to pick their 5 using “a geometric sans serif, a high quality serif for long text, a workhorse font, a web safe font, a variable font”:

If you take a closer look, you’ll notice that this list of types of fonts aligns perfectly with my own “5 fonts” list. Gilroy is a geometric sans serif font that I really like because it feels modern (unlike Futura which may look dated in some occasions). Meta is my high quality serif font because it’s really well designed, it works really well for paragraphs and has many OpenType features like ligatures, alternative digit styles and much more.

Roboto is a typical workhorse font family. It comes in many different styles and weights and is very well designed. It consists of a sans serif, a slab serif and a mono style and can be used for anything from long paragraphs to UI labels and code snippets.

Work Sans is a variable sans serif font that I really like. It’s highly legible, even at smaller sizes which makes it great for UI design. The fact that it’s variable means that I can match various weights to get a good balance between font sizes which helps my UI designs look slicker.

And the last is Georgia, an underrated web safe font. It looks quite modern which is fascinating, because it was designed a while ago. It comes with old style figures, often called “lowercase digits.” That makes it great for paragraphs, especially when I need to save a few kilobytes. I have been saying this for a while, web safe fonts don’t suck. They’re completely free as we don’t need to pay to use them and they also don’t add any weight to our websites so they load faster. More on web safe fonts another time.

My 5 essential fonts are:

That list isn’t laminated but it covers most of my favourite fonts that I use the most. Gibson is the main heading font for Sampleface (my music blog) and I use it as the main font in one of my favourite games, Championship Manager 01/02. Helvetica is Helvetica and while it’s overused elsewhere, I like to use it in certain situations and as body text when I can. Cooper Black is iconic and great for titles when you need a bit of versatile flair. Georgia is a great web safe font and alternative to using sans-serif fonts. Finally, I picked Univers because I like its print heritage and its form and I’ve used an alternative version called Fluxisch Else for many album covers over the years to emulate that scruffy printed feel.

Jyni Ong on the Syrian Design Archive

/ /
A Syrian Arab Airlines ticket with English and Arabic writing on it.

For It’s Nice That, Jyni Ong spoke with Kinda Ghannoum, Sally Alassafen and Hala Al Afsaa, founders of the Syrian Design Archive. The archive documents the vibrant graphics from the Arab world and celebrates one of the most popular writing systems in the world:

“Syria is a country of rich history and culture,” says Hala. “It is also a country with a broad range of cultural activities in modern history such as printing, journalism, theatre and art. Those factors put together, positively affected the graphic design practice in Syria and gave it a rich visual heritage.”

A study into the fonts used by the top 1,000 websites

Data scientist Michael Li studied the top 1,000 websites and the fonts they used to spot any trends in layouts, design choices, and colours and “to better quantitatively understand the world of web design”. I recommend you check to the whole study but I’ll pull out a few things I found:

  • The most popular number of fonts used in the font-family stack was 2 (so, something like { font-family: Arial, sans-serif; })
  • 14px and 16px are the most common font sizes for paragraph text
  • For headings, “designers choose to use a larger size more often than a heavier weight (94% vs. 82%), but they often use both (76%)”

Nothing too surprising if you know about web design. Sans-serif fonts are most common and paragraph text is most often used at the standard size of 16px (or 1em/rem) and most sites don’t go for a large font stack. For this site, I use a system font stack with a lot of fallbacks for all devices, should my custom font not work for you.

Font related: Helsingin Sanomat’s ‘Climate Crisis’ font that shrinks with the Arctic sea ice, 10 alternatives to Helvetica, and the history of Times New Roman.

Reagan Ray's Marvel superhero letterings

,
/ /
  • Iron Man
  • The Incredible Hulk
  • Howard the Duck
  • Deadpool
  • The Black Panther

I love these Marvel 3D-letter designs by Reagan Ray which he explained in a recent post:

I just started getting into comic books for the first time a few years ago. My son was interested as well, so we started making regular trips to the comic book store (pre-covid, of course). We loved looking at the artwork and lettering of the older comics. And like most lettering, right around the late 90s, it all went to shit. The hand-lettering masterpieces were abandoned for fonts and photoshop effects. With that said, I limited this post to the pre-’00s. I wanted to do something more vintage, but there are just too many from the 80s and 90s that I love. My absolute favorite was seeing all the interpretations of 3D type.

They’re all amazing and I’d wear each and every one of them on a t-shirt.

Helsingin Sanomat's 'Climate Crisis' font weights shrink with the Arctic sea ice

,
/ /
Climate change font graph

Helsingin Sanomat is Finland’s largest subscription newspaper, based in the nation’s capital, Helsinki. In response to the growing climate crisis, the publication created The Climate Crisis Font, a variable font with weights that change gradually but dramatically:

The font’s design is based on data from the National Snow and Ice Data Center (https://nsidc.org) and predictions provided by the IPCC (https://www.ipcc.ch/srocc/). The heaviest font weight represents the minimum extent of the Arctic sea ice in the year 1979, when satellite measuring began. The lightest weight represents IPCC’s 2050 forecast, when the Arctic sea ice minimum is expected to have shrunk to only 30 % of the 1979 extent.

10 alternatives to Helvetica

/ /
Helvetica weights

Helvetica has been everywhere for decades. But it’s not free (or original) so you might want a different take on the classic sans serif. Extensis compiled a list of the 10 best Helvetica alternatives.

Most of these I’ve used or otherwise own but a few I’d not seen before, including:

Theinhardt is my #1 from the list. What’s yours? Let me know in the comments.

Where did Ruff & Mews go from Petco's new logo?

/ / /
petco logos

Erastus Kingbolt wrote about Petco’s latest logo dissolution in his Systems Theory newsletter. Where once Ruff and Mews once sat, now we are left with a generic blue wordmark:

Cold and lifeless is a fair description, isn’t it? There are absolutely no friendly animals, the font is somehow even more sterile than it was before, and in place of the already watered-down red there is the inanimate blue of Marshalls and USPS. The jokes about the health and wellness part write themselves, but I will say that even the CEO doesn’t seem to think that it’s true. “We’re transitioning from being a company that asks, ‘Can I help you put that big bag of dog food into your cart?’ into a full health and wellness company,” he told Fortune. “Today, Petco is the ONLY complete health and wellness company for pets,” he wrote in the opening letter of the IPO filing. A few more times and he’ll be convinced.

I love a wordmark logo but not as a progression from something that already works. Petco’s original logo with its jellied red text and happy-go-lucky pets was playful, fun, and engaging (you rarely see a cat and dog so chummy together). But now it’s just like any other logo. Before you knew Petco was for pets before you even saw the word—great for non-English speakers—but now you assume it’s for pets, despite the vague tagline underneath.

People showed disdain but I don’t see the new branding causing significant damage to Petco. It’s just a shame that another brand has fallen foul of the dreaded Minimalist Logo Syndrome.

Pet related: when pets wore masks during the 1918 flu pandemic

The history of Times New Roman

/ / /
Times New Roman— Graphic Design History 101

How did Times New Roman become the default typeface we all use? Born out of anger, selected for its economics, and adopted because of its accessibility. In this video, we dive into the history of the Times New Roman typeface, how it came to be, and why is it such a staple from congress to college.

See also: an ‘Old Style’ font similar to Cooper Black, favourite typefaces of 2020, and the story of Comic Sans

Fraunces is an 'Old Style' font similar to Cooper Black

/
fraunces typeface

If you’re thinking Fraunces looks similar to Cooper Black, then that’s because the latter inspired it.

In the summer of 2018, Google Fonts approached us with the challenge of designing a display typeface. We spent some time perusing the catalog, and we were struck by a pretty big gap in certain typographic styles available—there isn’t a specific name for this genre, but typefaces such as Cooper Black, Windsor, and Souvenir personify it. We call them “wonky” fonts in-house, and that seems as good a name as any. We’ve played a lot with this style in our lettering work, and felt this was a great opportunity to create a display typeface family that celebrates an underappreciated genre.

While there are similarities between Fraunces and Cooper Black, the primary difference is that Fraunces is a variable font. You can alter its appearance to suit your tastes, whether you opt for a more Roman style or that “wonky” look that has permeated pop culture for decades.

What’s more, it’s also a Google Font, meaning it’s free to download or embed into your web designs.

Check out the official Fraunces website for more info.

Font related: almost every typeface seen at Disney theme parks, favourite typefaces of 2020, and the typeface that helps readers with low vision

Almost every typeface seen at Disney theme parks

/ /
I make movies for a family audience written in the Disney font

Mickeyavenue.com is the home to an “incomplete listing of typefaces seen at Walt Disney World, etc.”

Since listing all of the typefaces used at Walt Disney World would be impossible, and a huge waste of time, here’s a list of just the few that I’ve noticed, and the locations at which I recall seeing them (yes, still a huge waste of time).

Some of the fonts are well-known—Cooper Black, Helvetica, and Broadway—and some more obscure typefaces like World Bold, designed by Deborah Lord for Epcot’s Future World area.

Disney and typography related: the history of Walt Disney home video, Pizza Typefaces, and favourite typefaces of 2020.

Favourite typefaces of 2020

/ /

I Love Typography and PRINT listed their favourite typefaces of 2020. I’m subscribed to a few typography newsletters and catch a glimpse of new fonts as they’re released but I wasn’t familiar with most on these lists.

There was a lot of love for serif and display fonts in I Love Typography’s list while PRINT was more varied, featuring Atkinson Hyperlegible amongst other sans serif typefaces (a lot of which I like).

I think my favourites from these lists would be Atkinson Hyperlegible, Pacaembú, and Futura Now. The serif ones are either too similar or verging on illegible.

Related: Burger King’s cool rebrand, a typography cheatsheet, the story of Comic Sans, and the omnipresence of Cooper Black.

(h/t Typewolf)

Burger King rebrand is simple, nostalgic, and effective

,
/

You may have heard about Burger King’s recent rebrand, their first in over 20 years. Older customers may also think the “new” logo looks the same as the logo used between 1994–1999.

  • Burger King logo, used between 1994–1999
  • Burger King logo, used from December 2000

It’s fundamentally similar but there are noticeable differences and I’m sure a designer could explain why they’re significant. But a rebrand is more than a different logo.

But my favourite part? This ingenious monogram.

It’s a B and a K and it looks like a condensed version of the fuller logo, in the style of a burger (or as Jason Kottke called it, “The Slider”).

The Flame brand font family was designed by Colophon Foundry in bold, regular and sans, reminiscent of Cooper Black and Raphael Abreu, global head of design for Burger King’s parent company, told It’s Nice That he “wanted a font that make people want to take a bite out of it.”

“We are also very playful and bold in how we use the new font. There is a variable version where we stretch and compress it and create expressive and impactful illustrations with it.”

Unfortunately, I swore off ever eating from Burger King 20 years ago this year after a bad experience and, well, I’m not going to change that. But I still love The Slider.

The controversial story of Comic Sans

/ /
Comic Sans in German that says "Tschudin Gartengestaltung"

Jon Robinson wrote an article about the history of Comic Sans for UX Planet, arguably the most derided font of all-time.

The short version is that Vincent Connare created the font in the mid-90s, inspired by the handwritten lettering from Batman: The Dark Knight Returns by Frank Miller.

Connare recognized that comic books employed lettering that was hand-drawn to fit each individual box or bubble, providing both flexibility and variety. He drew each letter numerous times until satisfied that every glyph had it’s own unique shape and curve, while still functioning as a family.

Due to its form we classify it as both a sans serif and a casual script font, because the letters mimic handwritten characters that do not connect; but it’s not considered a typeface by most due to the lack of an italic or bold variant. Overall, Comic Sans is composed of rounded letters that would appear to have been drawn carefully in thick black marker by a child learning the alphabet. No sharp points are found in its letterforms. It’s the result of someone attempting to make a font out of alphabet soup.

And now it’s everywhere and polarises everyone who sees it. In fact, I wrote a disparaging article about it years ago (no longer online). But there have been suggestions that Comic Sans is good for dyslexic readers (although this has also been refuted).

If you want to use a font made for low vision readers, I suggest Atkinson Hyperlegible.

Why we keep seeing Cooper Black everywhere

/ / /

The wonderful Estelle Caswell did a video for Vox about the Cooper Black font and its prevalence in pop culture:

There’s a typeface that has made a resurgence in the last couple of years. It’s appeared on hip hop album covers, food packaging, and advertising. Perhaps you know it from the Garfield comics, Tootsie Roll logo, or the Pet Sounds album cover by the Beach Boys. It’s called Cooper Black, and its popularity and ubiquity has never waned in the hundred years since it was first designed.

I know I’ve seen it everywhere but I never realised just how much and I’d never connected the name (which I knew) to the typeface. I was also unaware of how versatile it was. Cooper Black is suddenly my new favourite font.

Stream the video below.

Why this font is everywhere

Pentagram refresh Fisher-Price's logo and it's lovely

/ / /
Fisher-Price logo

I loved my Fisher-Price tape recorder. They don’t make them like that anymore (mainly because kids don’t use cassettes in 2020). Even though I recorded some of my finest voice work in the 90s, the logo was quintessentially retro.

Well, Pentagram did what they do best and freshened things up. The result is really good, in my opinion.

The new branding by Pentagram refines the visual identity and expands it to a customized kit of parts that gives Fisher-Price the flexibility to function consistently in a variety of environments. The exuberant use of colorful graphics and unconventional typography captures the brand attributes of fun, action, play, celebration, silliness and joy.

Pentagram

As you can see from the logos below, the changes are very subtle. The new “f” is lower case and fused with the “i” to make a ligature. The “p” is lower case too but the “h” remains intact from the original.

Fisher-Price logo

The cosmetic changes are small on their own but grouped together, along with the new “FP” wordmark, it’s a brilliant brand refresh.