Headings hierarchy

It’s a common mistake to denote heading level by its font size only. The popular Bootstrap CSS framework does exactly that:

When you see this picture, it makes sense: the higher the level, the bigger the heading. The problem: this works only when you put these headings next to each other. But when you use six levels of headings in a real text, these styles will not help establish the structure. From the reader’s perspective, they would be just randomly-sized headings. To see an example, open the Bootstrap’s own documentation in the middle of its page.

Now look at this example from Wireless DJ help page:

The progression of sizes is not the only design tool here.

There is only one main heading (aka h1) on a well-edited page, and it’s on top. So from the structural point of view it doesn’t matter what it looks like. It makes sense to make it large though.

The second-level headings (h2s) are larger than the body text, but what’s even more important, they have generous margins around them, and the top margins are visibly larger than the bottom ones. This helps link the headings to their text and separate the sections from each other.

The third-level headings (h3s) are not just smaller than the second-level ones. They are actually of the same size as the body text, but are bold. Also, they have no bottom margins at all. This connects them very tightly with their text.

If you want more than three levels, you won’t be able to make do with just font size and margins. You will need to employ other tools:

This example is in Russian, but it’s even better if you can’t read it. Just see how headings of different levels have several attributes that help you recognise them: alternating typefaces, italics, rulers, numbering.

Such a complex hierarchy may be necessary in some legal documents (the example above is from the Russian Civil Code), but in most cases, three levels of headings must be enough.

 701   2017   typography

The letter x is not a multiplication sign

The letter x is not a multiplication sign. Use the times sign (×) to denote multiplication:

Notice how the proper multiplication sign is aligned with other mathematical operations signs. Using x in place of × is as sloppy as using programmer’s quotes (") in place of actual quotes (“...”). Also, when you write 5x, it means 5 multiplied by x or 5×x. Probably, not what you were trying to say.

 306   2017   typography

The Medium typography

What confuses a heck out of me is that so many articles on design and typography are being published on Medium. Why do designers choose Medium?

The Medium typography

It seems like every element has its own font, size, alignment and shade of grey. Vertical spacing is broken: the subheading is too close to the heading, the paragraphs are too far from each other.

The article itself is great though.

I don’t consider myself particularly good in typography, but this?

The Medium typography

It’s all random, isn’t it? And again, a great article.


 435   2016   typography

Ellen Lupton’s “Thinking with Type”

Don’t read this book:

Ellen Lupton’s “Thinking with Type”

The book is split into three sections: Letter, Text and Grid. This gives the illusion of structure, but don’t be fooled. This is the most disorganized book on design I have ever read.

There is no narrative. Ellen jumps from topic to topic as if each spread was from a separate book. She would write about obscure InDesign hotkeys, font licensing, HTML header tags and even proofreader’s marks without any coherence. Sometimes she would pretend the reader has no idea about computers at all: did you know, she would ask, that if you press Shift+Enter instead of Enter, you would get a new line, but not a new paragraph?

Ellen would explain how typeface is not the same as font. Then put a spread of some student works of questionable value. Then write half a page about “branding”. Because why not write about something, if such a thing exists? It feels like Ellen just crammed together everything she heard about typography giving no crap as to how these random facts, thoughts and examples would help anyone get better at anything. None of the topics is given any care, many are given just a couple of paragraphs.

As to author’s credibility, I have to say she thinks that a double prime (˝) is the same as dumb quotes ("). She sets HTML is small caps, but CSS is all-caps — on the same page, that is. She would also explain that CSS is Cascading Style Sheets (very helpful). At some point in the book she mentions Tufte, then tries to redesign a table and comes up with a result that shows that she either did not actually read Tufte or completely missed the point.

If you are new to design and typography, after reading the book you’ll go, wow, there’s so many stuff — I guess I will now have to find real books to figure it all out. Well, just go straight to Tufte, Bringhurst, Tschichold and Müller-Brockmann.

 105   2015   books   design   rants   reading   typography

Ideal link underlines don’t care about letter descenders

Traditionally an underline was used for emphasis:

Underline for emphasis

Some logos use it to look important:

Some logos use underline to look important

Above, underlines are part of the message: they interplay with the letters, drawing the readers’ attention to the underlined words.

But the use of underline for links, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link. The design should only hint at the option to click the link, not scream about it. In fact, the words should not change their meaning the slightest when the linking is removed (i. e. when the text is printed).

In Crafting link underlines on Medium, Marcin Wichary says that an “ideal” link underline would look like this:

Marcin Wichary says that an “ideal” link underline would look like this

But this is not ideal, this is exuberant. You don’t want to break one underline into six stubs with funny optical effects at the gaps. You want the underline to be modest and quiet.

This is not as bad as the new Safari rendering though:

The new Safari underline rendering is disgusting

Only four lines here, but they are thick as logs. And the vertical distance from the text is smaller than the white area around the descenders. Only a blind person could come up with this crazy design.

To make the text and the underline both clear, put them in separate visual layers (see Tufte’s Envisioning Information, Layering and Separation). Make them ignore the existence of each other:

The text and the underline in separate visual layers

Notice how this underline is very thin. It resembles a hair on a piece of paper.

Why not thicker? Again, because it is not a part of the text, it should not divert the reader. It should be as thin as possible, as long as you can see it (see Tufte’s Visual Explanations, The Smallest Effective Difference).

 479   2014   design   typography   web

Font check marks

At Artem Gorbunov Design Bureau, we have created a set of check marks for many popular fonts:

When I say “we have created” I actually mean my colleagues Artem, Michael and Ksenia, as I did not participate in this project. However, as Artem has told me, my constant moaning about the absence of good check marks prompted the idea.

It is a pity that font designers do not take check marks seriously and make no effort in designing them well (if at all). These are very often needed and should be among the first non-alphanumeric characters to design for a font. Like a dollar sign or an ampersand.

But now you can at least use one of ours.

Best of all, it is free if you send us a link or a photo of how you use them.

 100   2013   design   typography

Dealing with legal all-caps

Some lawyers think they should shout at their readers by using all-caps text — this is how they communicate the idea “this is important”. Here’s a fragment of some Apple document:

Why do lawyers use all-caps?

The lawyers do disservice to themselves: all-caps text is much harder to read than normal one. If you are a designer, you are responsible for this, but unfortunately changing it is often beyond your power. So here’s what you do when no one is looking:

Dealing with legal all-caps

And all-caps becomes small-caps:

Here is how you avoid legal all-caps

The text still stands out, but it no longer looks ugly and most importantly it is noticeably easier to read. We’ve used this trick in Getwear’s terms of use and other similar pages. See also: Typography for lawyers.

 74   2013   design   typography