#57 — The Book Paintings

We’re no strangers to the amazing work that Matej Latin has been doing for typography lately, and this time he’s kind enough to share with us an excerpt from his book. Combining fonts is one of the trickiest parts of typography, a hard one to master for everyone, but in this article he goes over a few great ways to get us started.

I love how he makes the case for the necessity of smart font combinations:

In fact, if you take a look at the example given from the 18th century, notice how only the family of Baskerville was used to create an interesting and functional layout/design. So what are the rules, in a nutshell?

As Eric Gill pointed out, It is a safe rule not to mix different styles of letters on the same page, or different faces of type in the same book. Minimalism can go a long way if you choose a font family that’s diverse enough; playing with hierarchy, empty space and type size is often enough. Matej suggests thinking in a 4-step process:

Mixing styles is all about creating contrast. If it’s too much, it’s distracting, too little and it goes unnoticed. Contrast and harmony are the two most basic principles when it comes to design, architecture and art. Both are crucial when it comes to typography as well. Some evaluations described in this process will only work as a contrasting combination, some only as a harmonic one and some as both. 

And, it works. Baskerville and Futura are a good combination of classic and classic-contemporary, which you can think of as complementary colours. Matej then mentions harmony: this is when two fonts share the same style, but are different enough to complement each other without clashing.

There are more technical tips on this article, of course, and one of my absolute all-time favourites is considering x-height. Combining fonts with similar x-height is a very handy way of thinking about pairing:

Wise words, Matej.

I won’t go into a lot of depth for the next tips, because I’d really like you to read the article in its entirety, but I’ll briefly mention the remaining tips. Another good idea is to combine fonts from the same foundry, or better yet, from the same type designer! Most type designers don’t really start a font from scratch and tend to use similar structure or approaches to their overall shape. This means it’s highly likely that most typefaces from the same author will be, in a way, a perfect match for each other.

There’s so much more in this book chapter, including practical examples of good and not-so-good font pairings, that you’ll want to bookmark it for sure.

In this excerpt from Flexible Typesetting, Tim Brown’s latest book, he articulates the challenges facing the modern web typographer. We’re lucky that Tim is kind enough to share this excerpt with us, showing us just the kind of quality we can always expect every time he gets busy at work.

In this action packed article/chapter, Tim talks us through the value of typesetting and its place within the practice of typography. He also introduces a neat new concept of “pressure” to help us understand how sometimes typesetting can feel wrong. On why care about good typesetting:

Of course, we know that some typefaces just work better than others for headlines or body copy. Ornate type can be simply too much; too much detail, too many things going on. And, according to Tim, just as traditional text typefaces are not great for signage and user interfaces. Sleek, geometric fonts can make small text hard to read.

Knowing the characteristics of all these, as well as the requirements (and mood) of our project, is key to making good design decisions.

I love how Tim breaks down typesetting into 3 different kinds of jobs:

Setting type well makes it easy for people to read and comprehend textual information. It covers jobs like paragraphs, subheads, lists, and captions.

Arranging type turns visitors and passersby into readers, by catching their attention in an expressive, visual way. It’s for jobs like large headlines, titles, calls to action, and “hero” areas.

Calibrating type helps people scan and process complicated information, and find their way, by being clear and organized. This is for jobs like tabular data, navigation systems, infographics, math, and code.

Tim goes deeper into each one of these jobs, but I’ll let it up to you to read it in his own words. In the meantime, let’s jump to the question of “why do some websites just feel wrong?”

If a website is uncomfortable to read or feels off, it’s almost certainly due to something which went wrong in the typesetting front. But, as Tim points out, it’s not that the typographer made a whole bunch of bad decisions along the way. An experienced designer can still inadvertently produce a website that feels off somehow. Tim calls this pressure: Specifically, websites feel wrong when they put pressure on typographic relationships.

Different typefaces have different size and line-spacing metrics, often varying from each other a great deal. A single glyph stays inside an “imaginary box” which defines where the glyph sits on the baseline — changing a font’s size is effectively changing the size of the box.

Tim so elegantly and eloquently describes how pressure works, and what we should do/worry about when we’re working with a type system, that I’m stopping right here; read on the rest of the article on A List Apart to know the nitty gritty details. Or just go ahead and blindly buy Tim’s book.

The brief history of emoji is far more interesting than it has any right to be, and who better than our beloved Keith Houston to tell it for us? The first emoji were truly the first shady characters ever to appear, and their history has a lot of quirks.

And as the best stories do: it star­ted with a heart.

This is fascinating, as I’d never link emoji to pagers. While the pager scene pre-dates me, it makes a lot of sense when you consider how they were being used, and the numerical codes in agreement to signify various feelings. Here’s why:

In Japan, things were a little bit more advanced as far as these codes went. There was suddenly an opportunity for a new thing on the market: in 1995, a new Pager model was launched that could trans­late pairs of di­gits dir­ectly into Ja­pan­ese char­ac­ters, de­mand was so high that the com­pany had to tem­por­ar­ily stop ac­cept­ing new cus­tom­ers.

Another consideration for Japan were the Olympics. As the first host coun­try in the mod­ern Olympic era to use a non-al­pha­betic script, the Tokyo games of 1964 pi­on­eered the use of sym­bols (⛵️) rather than text to help for­eign vis­it­ors find their way. And that same non-al­pha­betic script it­self provided in­spir­a­tion: in kanji, the ideo­graphic script that Ja­pan in­her­ited from China, Kur­ita saw how power­ful it was to be able to ex­press com­plex ideas like “love” in a single char­ac­ter.

12x12 pixel icons started to appear next to menus on screens, and to help convey meaning in other signage. Devices adapted to display these as seamless as they possibly could:

Even though this first part only covers the historical foundations of what much later become Emoji, there’s already so much to digest here. There’s a fantastic 1997 article about Pager-speak, which you should read with a never-ending smile on your face, and an interview with the first Emoji designer, Shigetaka Kurita. We can’t wait for part II, Keith!

“An artsy, peculiar, humanist display typeface that has a peculiar personality flowing through its European humanist silhouette” is how Grayscale, a Hong Kong-based design agency, describes Farro. It’s indeed a very quirky and distinct typeface, which apparently didn’t start out having those characteristics as its intentions — but as the best things in life always do, joy is found when one carries on anyway!

Best of all, it’s completely open source and free of charge; but unlike many other free typefaces out there, Grayscale didn’t skimp out on language support, either. You can try it out on its website, and be sure to bookmark it for whenever you need something fresh and playful on your design toolkit.

We just love releases this this one!