Mar 31, 2019

Coffee Table Typography - Issue #65

By Coffee Table Typography • Issue #65 • View online

✍️ Friends!

The most cheerful article was shared with me the other day, written by Boris Müller with If Your Favourite Typefaces Were Celebrities. Boris does an excellent job at explaining why a typeface choice isn’t just pragmatic, and how a sense of coherent style plays a big role in choosing one. Turns out, comparing typefaces to celebrities is one way of doing it.

One of the most beautiful typographic designs I’ve seen recently, as well as, very likely, a fine magazine on its own, comes from the Visions, a magazine featuring the iconic Marvin Visions that we’ve shared a lot in this newsletter plenty of times. The web site design along is worth your time, sharing prints of the magazine itself which are to die for.

Fast Company recently published a small but interesting article with the concise history of 5 classic typefaces, from author to historical context. The article is based on the new Sean Adam’s book The Designer’s Dictionary of Type, which I’m personally very curious about.

Also worthy of sharing are these two gorgeous captures of metal Umlauts in a gate in Berlin, once again shot by the great Berlin Typography friends. Book wise, I came across a book specifically made about Variable Fonts, and boy am I curious about it. It’s called On The Road to Variable, and its cover is absolutely delicious. A true typographical coffee table book — if you’ve read it, let me know what you think.

While browsing FutureFonts earlier this week, I came across Alga, a work in progress typeface (which is the whole premiss of Future Fonts) which immediately caught my attention. Bold, elegant and beautiful — can’t help but to urge you to take a look at its features in full display. Shaping up to be another wonderful release from the Portuguese Nova Type Foundry.

Until next time, type friends,

—Ricardo

The First Printed Math Books

Oh mathematics. For many, a necessary evil to go by your every day life; for others, a beautiful art form. The folks at I Love Typography bring us a wonderful article on the origins of the first printed math books; their origins, what it looked like, how it evolved. And they’re a beauty to look at.

Throughout most of the Middle Ages, Boethius’ De arithmetica (‘On Arithmetic’) was, in Europe, the principal source for most math textbooks and remained so until the twelfth century, when the works of Arab mathematicians (via Spain) were translated into Latin. We’re talking circa 526, around the time which his famous The Consolation of Philosophy was being written.

Fibonacci, or Leonardo of Pisa to be more precise, played a huge role in popularising Hindu-Arabic numerals, introducing aspects of Arabic math in Europe as the Book of Calculation was published in 1202. In fact, here’s an article on how to do division with Roman Numerals; good luck and godspeed.

From the fourteenth century, it became increasingly common for German merchants and entrepreneurs to send their youth to Italy – typically Venice and its surroundings – to learn the mercantile arts, for which the Italians had a fine reputation. Therefore, it comes as no surprise that during the fifteenth century, Italy was to lead the way in the production of math books.

Let’s skip ahead to the 15th century; the ‘Treviso Arithmetic’, or Arte dell’ abbaco is the first printed and dated arithmetic and is filled with math problems for merchants, farmers, tailors, builders, and more. A proper textbook for students, written mostly using the Venetian dialect.

A page from the 1478 ‘Treviso Arithmetic’

And here’s an interesting typographical fact of the time:

A curious typographic oddity is the frequent use of the letter i in place of the numeral 1. It appears that the printer simply had too few ‘ones’ in his type case and so substituted the scarcer 1for the much more common i. However, as readers were already familiar with the lowercase i featuring in Roman numerals, no-one would have had any difficulty parsing them.

A few years later, Pietro Borghi came with his Qui comenza la nobel opera de arithmetica, or Aritmetica mercantile: it ran to an incredible seventeen editions, and it must have been an incredibly difficult book to typeset. Just glance at its complexity below:

From the mid-15th century on, complex math books simply exploded. Euclid’s Elements, published in Venice in 1482 (again by Ratdolt) and Luca Pacioli’s 615-page Summa de arithmetica, geometria…, first printed in Venice by Paganinus de Paganinis in November 1494 – are a few interesting examples to look at.

Make sure to check the original article by ILT, which contains a lot more information and gorgeous examples of these incredibly detailed books. Math never look so good.

Designing Gotham's Type Specimen

Danyelle Brady shares one of my favourite articles this month, in which we’re guided through the process of designing a gorgeous type specimen for the ever so iconic typeface Gotham.

Even if you don’t think you know Gotham, you probably do. It was designed by (just as iconic) Tobias-Frere Jones in 2000, originally commissioned by GQ Magazine, it took a lot of inspiration from New York City itself. Despite being almost as ubiquitous as sliced bread, Gotham is a fine typeface which requires a ton of baggage if you want to design a type specimen for it.

The first thing which was done was collecting thoughts; use cases, quotes, descriptions of Gotham’s use in the wild. Without being attached to a visual mood yet, this helped set the tone. As an example,

“They’re the matter-of-fact neon signs that emblazon liquor stores and pharmacies, and the names of propreitors plainly painted on delivery trucks. These letters are straightforward and non-negotiable, yet possessed of great personality, and expertly made.”

Overwhelmed with NYC as a theme (too broad, too many subcultures, icons, landmarks, design systems!), Danyelle chose instead to focus on just one aspect: the infamous New York city cab.

And with that, came the original colours and layout for the type specimen:

In the process, he also filled up the blank specimen pages with random blocks, making room for randomness and space to play with:

With the unoccupied spaces in my booklet, I wanted to have some fun by displaying some of the quotes/blurbs I found during my research and do explore some more fun ways to display the fonts.

Interestingly enough, the theme he finally decided on for the specimen, NYC cabs, also ended up dictating not just the colour scheme but also how it was presented. Starting with how the specimen is initially presented:

Don’t miss the article in its entirety, as Danyelle discusses more about the process from no-inspiration at all to full-fledge creative design; a position I’m sure many of us find ourselves often in.

NYC is planting secret messages in parks using this typeface for trees

A quick one for you today, typeface and world lovers. Artist Katie Holten has literally planted secret messages in New York, by creating an interesting tree typeface. Here’s how.

Linden. Oak. Virginia pine. Elm. Side-by-side, they might look like four random trees. But if you speak the tree language of the New York City, you know these trees spell something else. Linden. Oak. Virginia pine. Elm. Love.

The Tree Alphabet, which you can download, was built in conjunction with NYC Parks, which aims to be so much more than just a typeface or a concept.

Back in 2015, she developed her first so-called Tree Alphabet, made up of sketches of 26 different trees that each stood for its own letter. The project led her to publish a book, About Trees, typed in forests rather than paragraphs. “I’m interested in creating something that lets us translate our words into something beyond us,” writes Holten over email. “It forces us to slow down and think about what we’re writing, or reading.”.

On her website Holten is accepting messages, whether “words, poems, messages, or love letters,” and plans to choose a group of them to plant. (You can even test out how “Write with Trees” will work for yourself.) The trees can obviously be planted to say anything at all. To source her messages, Holten says that people can simply email her.

Think outside the bounding box, friends. And for the sake of type, let’s plant a tree.

www.fastcompany.com • Share

Introduction to Font Metrics

Weston Hayer wrote an incredible and well-detailed article last month, all about font metrics and how to understand how a font file really works under the hood. This is a good learning experience for both designers and developers, so stay tuned. To begin with: what are font metrics?

If a font is a digital representation of a typeface that consists of a series of glyphs, font metrics are the parameters which help the computer determine things like the default spacing between lines, how high or low sub and super scripts should go, and how to align two differently sized pieces of text next to each other.

There’s an anatomy behind the letters that makes up this sentence. As the example below shows, the curve of an “s” is called the spine—or the white space inside an “a” or “o” is the counter. Then there’s that imaginary line that all letters “sit” on (baseline), the tops of capital letters (cap height), and the tops of lowercase letters (x-height).

Baseline, as you probably know, is of utmost important to any design with type. Even with information with different hierarchy, a shared baseline helps with information grouping, like in this example from Google Maps:

The baseline is also helpful for creating vertical rhythm

Cap height is another metric defined in every font file; this is typically the height of the capital letters of a typeface. If you ever moved around a text block in Sketch or Figma, you’re familiar with the top alignment line suggestion for type; these metrics are what make it possible.

Design software alignment displaying font metrics

Have you wondered how Sketch automatically “snaps” a block of text you’re dragging to its baseline, when you’re nearing an edge? Font metrics metadata is used byt hese tools to power features like smart guides, which can help you snap the baseline to a layout grid.

In Sketch, the bounding box is represented by selection handles. In CSS, you can see it by setting a background-color. All type positioning is in relation to the bounding box, so if you wanted 100px from the top of the screen to a paragraph, our tools yield 100px to the top of the box, not to the top of an “L” (cap height) or the bottom (baseline).

But what I really love about this article, and by learning more from how font metrics work, is the endless possibility for automation with sensible defaults. On the web, for instance, the ability to use CSS to tell the browser to centre an icon by cap height, is enough for us to avoid hacks like extra custom margin or paddings to optically align icons with text.

And, web developers out there, just fall in love with the potentially upcoming leading-trim CSS property.

The rest of the article does share a few more interesting things on font metrics, which I encourage you to take a look at. If you’re looking for a lot more information, you can always take some time to read this fantastic essay-like article on CSS font-metrics.

Typeface Du Jour ✍️

Pulpo — Floodfonts

Pulpo, from Floodfonts, was designed by Felix Braden, and it not only is a gorgeous looking typeface, but is showcased with a typographically beautiful specimen website just as well. Felix defines the typeface as:

A Clarendon style typeface with the skeleton of Century Schoolbook. Longer extenders give text a bit more air to breathe and improve legibility in small text sizes.

It’s a full fledged family (10 weights) with extended language support, too. What I truly love about it is how it manages to possess slightly quirky and uniquely distinct characters without becoming too distracting in full-length body copy:

You can get the individual weights directly from MyFonts, but don’t miss out on its beautiful specimen page either.

On the Coffee Scene ☕️

This Apartment Building In Ho Chi Minh City Is Full Of Cafés

An old apartment building in Vietnam has been brought back to life by numerous cafes, fashion boutiques, and co-working spaces.

popupcity.net • 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