Jun 6, 2018

#53 — Bearded Frogs in Metal Type

By Coffee Table Typography • Issue #53 • View online

Friends! Before we start, I’m happy to announce that all the wonderful Patreon supporters, who’ll be featured in all their glory once the new CTT website is up, will be receiving stickers soon! 🎉

Stickers will also be available for free very soon as a means to help support the newsletter, with the eternal no-ad promise, of course. If you’re curious, the illustration for the stickers was beautifully crafted by Geneviève Monette, and you should check out her illustration work! She’s done a beautiful job drawing the quick brown fox who drinks a cup of coffee 🙌 expect a new branding and a website soon!

In type news, I’ve found my new favourite website, Alberto Tallone Editore, perhaps the best collection of scans and photographs of truly remarkable typographic pieces of all kinds. Just look at this photo of blocks of typesetting manicules, which includes both pointing and shaking hands (which I didn’t know existed until now). But maybe the most fascinating metal block is this one of a frog with a beard riding a 19th-century bike… Needless to say, we all need this on a typeface right now.

Recently, two new Variable Fonts worth mentioning were released: Roslindale Variable Display from David J. Ross, and League Mono from the great people at The League of Moveable Type. You can test them online at v-fonts, as per usual.

And just in case you missed the fantastic 36 Days of Type this year, don’t be sad. There are a few short videos online where you can catch a glimpse of all the overwhelming creativity that went into every single one of those entrances! Take a peek.

Last but definitely not least, the wonderful peeps at The League Of Moveable Type have given my OpenType Playground a shoutout on their typography podcast! 🎉 Give them a listen and subscribe, as Micah and Olivia’s voices are always great company. Thank you both for the shoutout and your incredible work in the field 🙏

From a sunny Montreal,

—Ricardo

Hidden Sheep and Typography Archaeology

One of my favourite articles this month, by Ben Zotto, hits all the right notes: typography, fonts, nostalgia, and digital easter eggs. Ben walks us through a very thorough unpacking of the old bitmap fonts, like Chicago, which gives us hard to obtain insight as to how typography was considered back in early days of 80’s Apple computers.

Because a typeface is not just its pixels, but also its spacing, I wanted to look at the authentic source material for Chicago. That required some technical archaeology: the original Macintosh, released in 1984, was the first widely available computer that used proportional typography on screen and it had an entirely unique way of storing and managing fonts.

Bitmap fonts were, of course, a bunch of pixels; no vectors or clever mathematical work could possibly be constructed for older fonts since there storage and computer power was very limited.

Let’s look at the character set for Chicago:

The letter spacing above is rendered out as designed. It works well, but if you look closely, there are places where it’s not perfect. The capital H and I are too far apart, for example. So are the lowercase i and j. If you were designing this typeface today you’d want to tweak the kerning (spacing) of these individual pairs of letters when they appear next to each other.

But of course, pairs of kerning couldn’t be customised at the time. Each character occupied its own fixed space on the block, as you can see in the first image of this email. You can read more about this in the original article.

Another curious fact is that back then Apple had released a whole series of original Macintosh fonts, all named after cosmopolitan cities. We may know San Francisco very well today on OS X, but there was, in fact, a first San Francisco typeface that looked… a bit different.

But then we get to… the hidden sheep 🐑.

When Ben was deconstructing the font file for Chicago, he found a little secret:

You see, way back in the 1980s, there were a maximum of 256 different characters available. Different platforms mapped out their numeric character codes in slightly different ways. The original Macintosh used a system that would eventually come to be called Mac Roman.

But two areas of the chart are empty: the left hand side, which are the low code numbers — by convention reserved for nonprinting control uses — and the right hand side… so there’s no reason why any font would have any bitmap information included for a character code that couldn’t be accessed… right?

Behold: a sheep.

There’s so much more to unpack in this fantastic journey of vintage-font unpacking, which I highly invite you to read for more curiosities. Continue reading here.

The Evolution of Typography with variable fonts

Jason Pamental writes: “For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design.”

In this Medium Members article (if you can’t read it, try the gorgeous article page Jason made just for this piece!), Jason gives us a bit more insight into the effective ways in which variable fonts can serve us well (and no, this isn’t just another article about variable fonts). For the uninitiated, however,

The advent of Variable Fonts changes that entire dynamic. As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file.

Understandably, some designers and developers are still not convinced how variable fonts can be used without introducing too much choice paralysis. Which weights should we go for in a design? How bold is bold? Where should an extra-bold parameter take place, in a design?

The typical scenario would be to constrain any given design to 3–5 different fonts to represent every aspect of a site’s design language and voice — including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading — greatly increasing their clarity and readability.

A really interesting suggestion Jason makes relates to proportions and multipliers. narrower characters could be used for headings, or even data-dense displays of information. “Weight and width could become multipliers on the standard body copy settings. Doing so would allow those aspects to scale easily along with the body copy should its settings change based on screen size or user preference.”

Perhaps the most interesting piece of food for though is optical-sizing possibilities and how they’re making a comeback in variable fonts. So what is optical sizing? I’ll let Jason, once again, do the smart talking:

[Optical sizing], not as often found on sans-serif designs, but in decades past (in truth, for centuries), it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and in some cases even wider apertures in order to preserve readability. Newspapers in particular found this critical to ensure lines didn’t get lost or letters didn’t suffer too greatly from ink gain.

If you’re on a modern browser which supports variable fonts (as you should), you can try opening this Codepen page and see how it all plays together so well.

medium.com • Share

Multicultural Design: Adapting Visual Systems from Western to Eastern Countries

Living in Silicon Valley exposes you to a very diverse population from all around the world. One of the side effects of this is being introduced to different ways of thinking in design.

Mathew Talebi writes this is a short but packed with good practical knowledge about what it takes to consider creating visual systems (or content, for that matter) that works well both in the West and East cultures.

It’s hard enough to cater to language barriers and overall differences in word length, but let’s consider English and Japanese as a whole, with its wildly different character set. Due to the nature of its shapes, Japanese characters form a perfect block in height and width, much unlike Latin type with uppercase and lowercase variations (just as an example).

From a visual block perspective, Japanese falls neatly on a grid system, as space is filled up equally. With English, the overall white space could change significantly, as demonstrated in this example. An interesting detail to note is:

In this sense grid design can be more favorable for languages with block characters such as Japanese, Chinese, and Korean. Of course, in English we could write in all capitalized letters— but it’s not very readable or favorable in long form articles. Many websites from Asia especially game sites do adopt all capitalized words for headlines and navigation to keep the same look and feel as their native counterpart.

Most likely not applicable to every web internationalised product out there, but often there’s vertical text to be considered, too:

With vertical text comes vertical layouts. Many of the languages from Asia are capable of being read vertically just the same as horizontally. Because their languages can be read vertically, designs can be horizontally compact, allowing for a more natural mobile adaptation in some instances.

Luckily, CSS already gives us some tools to help with this, like writing-mode. As an aside, there’s a pretty good introductory article by W3C.

Overall whitespace differences, and especially line height ones, also need to be taken into account if you’re going for multi-language support. Japanese characters, as we’ve seen, are more block based as a visual system: take for example Latin ascenders and descenders, which naturally create a different reading rhythm and changing the overall weight of the text flow.

There’s more to be unpacked from this article, so make sure you don’t miss it.

uxdesign.cc • Share

Teddy had unusual origins

Fonts, Typefaces and Teddy Bears

Korean type designer Minjoo Ham had a goal in mind when she arrived in Berlin, and in this article, she describes the process of designing a display script font called Teddy.

What makes this so interesting is, of course, the process. The basis for Teddy was not a mathematical vectorised process as we often see for typefaces, but a much more humanistic one:

Fust & Friends was conceived as a haven for lost fonts, and a clinic for letterforms in a coma. Besides original typefaces that somehow were never released, we select forgotten fonts from the past, as well as exciting pieces of lettering, focusing on lettershapes that inspire us to try and add new colours to the graphic designer’s typographic palette.

From the 1910’s to 1960’s, manuals were filled with lettering made by students learning how to do lettering; each with their own styling, those books were eventually revived as a book in its own merit. Here is why this article struck a wonderful chord with me: the way Teddy, the typeface, found its origins:

Teddy started out as a faithful “revival” of an alphabet from the Bentele book that we all found highly entertaining and energetic, but the font ended up as a drastic contemporary reworking of it, with ample cross-pollination from other alphabets in similar books. Mind you, those were not fonts, not metal or wooden printing types! Just hand-drawn examples for teenage students of how to design a striking headline or logo in a then fashionable style.

The type exploration phase for Teddy is beautiful to see in action, as she had to reorganize the family system. The capitals, for example, had been drawn to fit with the lowercase. This also came with its own set of small capitals.

Type exploration for Teddy: those ampersands 😍

The result is a very intriguing variation of what started out as random calligraphic sketches, turned into a complete type family with OpenType capabilities, which make it a beautiful typeface for display purposes. Of course, it’s available for purchase too, and I highly encourage you to read the rest of the article in case you’re curious about finding out more about the font-making process.

Typeface Du Jour ✍️

Foreday, by DSType

I’ve been in love with Foreday for a while now. DSType Foundry, from Porto, has made this super versatile version of a variable typeface which blends two separate styles in one: it’s both serif and sans-serif.

On the GIF above, I’m adjusting the interpolation values for the Serif axis, which you can do too with a supporting browser. There’s also an Italic version, which also can be adjusted for boldness and serif interpolated values. This means thousands of different combinations for just two fonts!

My favourite Portuguese pangram. Seemed appropriate.

Check out its buying options, as they’re currently a good deal for such an incredible typeface for the Web.

On the Coffee Scene ☕️

Coffee Design: Kittel In Montreal

Two coffee-related stories caught my attention recently: first, the new coffee boxes from Kittle in Montreal, which are beyond gorgeous, got some much-deserved attention from a Sprudge interview.

The illustrations are to die for; they were drawn by Dutch illustrator Timo Kuilder to create a colourful line of coffees with a vintage travel poster inspired motif… and damn it, don’t they make you want to drink coffee all day and travel endlessly? I especially like this quote which ties in the need for quality of the coffee itself and marketing:

How do we introduce ourselves to new customers. If someone hasn’t had a chance to taste the coffee yet, they’re going to judge it the only way they can: visually. Through the process of this rebranding, we have learned that aesthetics are very relevant, and we are so proud to hear from customers that they love the new look.

The other piece of news is good news indeed for Londoners; as an ex-Londoner who dreaded the thought of walking into Harrods, I’d now have a perfectly good excuse: there’s a new coffee roastery inside! It’s called Coffee Elegance (of course, this being Harrods) and it looks visually stunning. You can find more photos and details of the new coffee shop also in a Sprudge article. Go check it out!

sprudge.com • Share

Did you enjoy this issue?

By Coffee Table Typography

A love for words, letters, language—and coffee.
A digest of curated resources, articles and knowledge sharing about the beauty of typography; in design, on the web, or books.
You will read these over your morning cup of coffee, while the aromas of freshly ground beans are still in the air, quickly realising that words are beautiful and that you might need that second cup after all.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.

With 💙 from Montreal, Canada