Optotypes? No, Optician Sans!

0. Introduction

If you ended up here, you probably heard about Optician Sans. I mean, it’s everywhere, from Fast Company to Gizmodo, introducing me to the experience of finding time to do e-mail and podcast interviews. I have even considered turning Behance notifications off, due to the constant phone buzzing (yes, I have now turned the vibration off for notifications – #smartFábio).

If this sounds snobberish, arrogant and ungrateful, it’s quite the contrary: I am flabbergast about how this came to be: all of this attention was completely unexpected to me.

Part storytelling, part making of, part as an outlet to process this phenomenon, I’m writing this so I can tell you what this typeface is and how it came to be in a degree of detail that I couldn’t do otherwise.

Alright, let’s do this!

1. The Backstory

1.1 Hello Reddit! Hello Simen!

After Optician Sans’ release into the wilderness that is the Internet, during a videocall to plan some stuff, I asked Simen Schikulski how he found me.

Simen is a gentle person, soft spoken and with dreamy eyes, that – once the conversation gets going – unveals his excitement and inner drive from his quiet demeanour. And he happens to work at ANTI Hamar, the Norwegian studio that commissioned me the production of Optician Sans – in fact, he was the person who started the typeface.

It was on Reddit: you offered me help to finish the typeface!, he told me. I had completely forgotten about it.

Simen’s post on /r/typography caught my eye for two reasons: first, I usually go around the subreddit to help people out; second, because it was about optotypes – at that time, I was researching about it myself to produce materials for my Masters’ students.

2. Optotypes

2.1 Optotypes?

Hold on, what’s an optotype? Right.

According to the Merriam-Webster entry on optotype, we have the following definition:

Optotype: figures or letters of different sizes used in testing the acuity of vision — usually used in plural.

Even if you are in no need of glasses — and unless you live in North Sentinel Island (how did you get an Internet connection over there, by the way?) — the chances are that you’ve had several close encounters with optotypes, most likely through a Snellen or LogMAR chart.

For a long time, looking at these at the optometrist and/or physician, I’d think something in the lines of oh, that’s horrible!, considering them poorly designed. This was, of course, a conclusion out of my own ignorance – but they still look ugly, though.

2.2 Visual Acuity, Not Legibility

In the midst of all these articles and interviews, I stumped into a widespread idea that was somewhat surprising to me – that optotypes are more legible. They’re not.

In fact, if optotypes were constructed to be highly legible, it would defeat its purpose: these are built to measure visual acuity, i.e., to test how capable your eyes are to distinguish between small details. As you can deduce, ambiguity is somewhat key and, as I stated before, ambiguity isn’t really legibility’s best friend.

But how is accuity measured? Why these charts?

Erik van Blokland has explained this way better than I could, but I’ll still try to summarize it:

If you have noticed at the optometrist, you look at the chart from a specific distance. And each optotype size corresponds to a different angle from your eyes’ lenses.

If that image projects itself onto your retina at different angles, the smaller the angle, the less photoreceptors are being used to see that figure.

For example, the 20/20 line corresponds to 5 arcminutes and we then know that around 10 photoreceptor cells are being used (in the fovea, where the highest concentration of cones is).

That is why optotypes (at least Schellen and Sloan) are designed in a 5×5 grid – each stroke corresponds roughly to 2 cells at 20/20.

3. Making Optician Sans

3.1 The Commission

As stated in §1, ANTI Hamar hired me to produce a bespoke typeface for one of their clients. The client is Optiker-K, a family-held Norwegian small business, providing optician and optometrist services since 1877.

So, for Optiker-K’s rebranding, Simen designed a first draft of the typeface, but something wasn’t quite right: at this stage, we stumbled upon eachother and he ended up hiring me.

3.2 The Brief

Initially, this was a calibration commission: to balance strokes, proportions, to correct node placements, to space it and hint it, to compile the typeface in a distribution-ready package.

In spite of this, what I got from the conversation with Simen was some sort of hey, can you make this work? proposal, so I started to look for inconsistencies – and ending up detouring from the brief.

You see, the Sloan letters weren’t built to work as a typeface: if you compare, say, the S with the C or the O, they seem stylistically unrelated. At some point, it struck me that we were dealing with glyphs from two different typefaces, almost randomly picked and joined together.

But our goal was to have a consistent look for the brand. Secretly (read: without asking), I redrew from scratch what Simen provided (in FontLab VI, as usual, since you’ve been asking), in two character sets: a more rounded, friendlier one (inspired by the O and C shapes); and a more blocky one (looking at the S).

Then, with a hint of fear, I pitched them to Simen, who cheerfully agreed straight away. *phew*

3.3 Logo-in-a-font

Apart from the two alternate character sets, Optician Sans offers an Easter Egg: while looking for a fast way to deploy Optiker-K’s logotype, we decided to include it inside the font itself; so whenever you type O-K or Optiker-K, the logotype automagically appears!

4. Hello Internet!

Free. Yes, for free.

The client, Optiker-K, decided to release the typeface for free. So you can send e-mails to them and to ANTI Hamar, filled with heart emoticons and unicorn hugs.

Upon release, well, the web went crazy, way beyond what we expected, especially for a font made to work in English and Norwegian only.

So thanks for the love, everyone! It feels really good to have made something that everyone is enjoying so much!

4.1 The Future – Present, actually.

With all this attention and cheering crowd, we decided to take some small steps forward:

• The typeface is available on GitHub – if you want to keep track and fork it to your own servings, please do!
• The License changed to SIL OFL to make this possible;
• We’re slowly expanding the font to support more languages!

5. Wrapping Up

I hope enjoyed knowing a bit more about this typeface. If you wish to know a bit more on ANTI’s side, check Simen’s article on Medium.

And, if you haven’t already, subscribe below to keep in touch! Cheers!

References and Further Reading:

1. Optician Sans microsite;
2. Completing the work of a typeface that was started decades ago, Simen Schikulski;
3. Testing The Limits of Human Vision, Verge Science;
4. Optics, Erik van Blokland;
5. Visual Acuity, Wikipedia;

The Art Of Eyeballing – Part IV: The Stroke (Optics)

Index

Introduction | Learning To See | Overshooting | The Stroke: Optics

This is the first article of three, in our series, to talk about the stroke.

We briefly introduced the idea (in the previous article) that the stroke width has an effect on perception and, for this reason, should be adjusted. So, this article is just about that: optical adjustments to stroke.

May I state it right now: this is not rocket science and the more elaborated considerations about stroke (such as modulation, for example) will be covered in the next articles. For now, we want to approach a very simple case – a monoline construction – and try to achieve balance.

And without further ado (and because I’m starting to feel way to serious while writing this), let’s skip to the good part.

1. Horizontal vs. Vertical

Let’s get right to it: in the image above, which are the thickest strokes? Vertical or horizontal? Take your time. Horizontal, right?

If you thought “they’re equal”, you’re right. But do they seem equal? To me, they don’t. And to most people, they also don’t.

But for many years, I simply trusted the computer. And, as always, the computer was right, so who was I to judge mathematical perfection? Well, this is about perceptual balance, not the first. Again, trust your eyes.

And here’s a correction (with horizontal strokes being about 1% thinner than the vertical ones):

But why does this happen? In honesty, I don’t really know, although I have some theories about it:

1. We have two eyes, distributed horizontally, making our area of eyesight wider than taller; and this might add relevance to vertically distributed elements;
2. In type, we have millennia of broadnib and flat brush writing, usually with 30 to 40º angle from an horizontal position, making horizontal strokes wider than vertical ones. But again, this could be due to a perception/optical/neurological phenomena.

If you’re wondering about how this works in typefaces, have a look here:

2. Orthogonal vs. Diagonal

Consider the following example:

Again, all the 3 lines have exactly the same stroke width. We already talked about how to compensate the horizontal line, so let’s just do that:

If it wasn’t obvious in the first image, now it is: the diagonal line also looks heavier than the orthogonal ones.

So, for comprehension’s sake, let’s give the diagonal line the same stroke width has the (already compensated) horizontal line:

… which makes the diagonal line too thin.

Before we get into the solution, I’d like you to consider a couple of things:

• This example is not random, i.e., I’ve picked a 45º angle to the diagonal line for a reason that you’re about to find out;
• We can only apply this to monoline fonts, although this is just a starting point (the next articles will cover more cases and correspondent corrections).

So, if neither of the horizontal nor the vertical strokes’ width is applicable to the 45º diagonal (which, again, is half-way rotated between the orthogonal axis), what happens if we pick the exact in-between stroke width? Here you go:

Does it look alright? *wink*

And now, you might be asking about other angles. If we apply the same width stroke to any diagonal, we get this:

If you compare the first two lines, the second looks too thin; and if you compare the last two, the former looks too thick.

So here we can start to acknowledge that the thickness of a diagonal line should vary according to it’s angle, and that it’s a progression between the horizontal and vertical widths.

Here’s a linear progression of angles and widths:

2.1 Tackling Slants and Widths

If you’re anything like me, by now you’re doing some stressful mental schemes on how to calculate the exact width of a diagonal, depending on the horizontal and vertical strokes’ widths.

So, in order to save you some stressful times, here’s a quick and dirty way to do it:

1. Draw an ellipse that has the same width as the vertical stroke and the same height as the horizontal stroke;
2. Adjust the strokes to be tangents to this ellipse.

Two steps method. This is what I call workflow optimization! Here’s a visual representation of the method:

And, to implement a tradition, here are these principles applied to type:

3. Straight vs. Curve

And we’re coming closer to an end.

Let’s start with the following image, where all the strokes are exactly the same (and the O is already overshot):

And now, let’s make the corrections that we already know about (horizontal and vertical, in this case):

Same kind of question: do the straight and curved strokes feel equal? You might want to take a step back it see the images from afar.

The H seems to pop out more that the O. And, as I mentioned, the O is already overshot, so it’s not a case of overshooting. Or is it?

Well, curves seem thinner that straight lines for the same reason we have to overshoot them: a lot of white space is created and positive mass is decreased, so we have to compensate for that.

But the thing to retain here is that curves seem thinner than straight lines and the amount of compensation needed isn’t as extreme as the one we do in the verticle / horizontal cases, so it’s closer to an overshooting compensation.

Let’s correct our example:

4. How Much?

If you’ve noticed, I wasn’t blunt about how much to compensate; in fact, I only gave one example in §1.

I could provide rules-of-thumb that would be percentage ranges of compensation, but I feel that this is a trap.

First (and again), I advise you not to make calculations; providing you such rules (on how much to compensate) would oblige you to make these calculations and I want you to design as freely as you can.

So take what you’ve learned today and trust you’re eye. If it looks awkward, well, it’s awkward. Teach yourself to pay attention to the forms, counterforms and whitespace. Inspect the curve/line segments on by one and compare them to the whole form. And to the whole group of forms.

Even if we dabble in maths and geometry, here, keep in mind that these are means to an end, not the end itself.

I hope you’ve enjoyed this article, see you in the next one! Cheers!

References:

• The Stroke – Noordzij, Gerrit (Hyphen Press, 2005);
• Size-specific adjustments to type designs – Ahrens, Tim / Mugikura, Shoko (Just Another Foundry);
• Make Your Fonts Suck Less – Phinney, Thomas (video)

The Art of Eyeballing – Part III: Overshooting

Index

Introduction | Learning To See | Overshooting | The Stroke: Optics

You probably heard about overshooting, specially if you came from a visual arts background. If you haven’t, welcome! And if you have, well, it doesn’t hurt to refresh our knowledge and explore what we know in a more in-depth way.

1. Definition

So, what’s overshooting?

If you search the web for a definition (as I just did), you’ll end up reading about economics theory or mechanical engineering jargon. Is this somehow related or interesting to this topic? Not really, but amusing, nonetheless.

Overshooting, in visual arts, is the optical correction of forms in relation to other graphic elements, more specifically to their construction rectangle, in order to achieve perceptual balance. Still amusing, right?

Let’s check the About.com definition of overshooting:

The main parts of letters generally fall between the baseline and x-height or cap height. The overshoot is where rounded portions of a letter (such as O or n) extend slightly above or below those lines. This slight overshoot creates an optical illusion that the letters are the same relative size as non-rounded (flat) letters like L or H.

Apart from the casual humor, I wrote that almost unintelligible definition because this second one is incomplete:

1. It doesn’t contemplate shapes with straight lines that need optical compensation (A and V, for example);
2. Has no consideration for horizontal overshooting.

 1.1 A Matter Of Perceptual Mass

So, what is this all about?

Well, as we discussed on chapter 2, the way we perceive things around us isn’t accurate (for biological and cultural reasons), let alone mathematically perfect.

Using the classical example, consider this image:

Now, do the circle and triangle feel to you that they have the same weight has the squares? Truth is, they’re all the same height, they just have a different area, or more precisely, a different visual mass.

But then again, area and visual mass are not the same thing. If they had the same area, they would look like this:

2. Perception versus Geometry

Of course, there’s more to this. As we could see above (and discussed in the previous chapter), being mathematically precise doesn’t provide visual or perceptual balance.

So, lets approach the problems of the previous image and correct them.

2.1 Alignment

As you can  guess, all the elements are aligned to their center. But if we try to come um to a base and top line, we would get something like this:

And, if we’re trying to achieve a stable composition, this doesn’t seem to be working out very well, right?

Lets then take the square as our standard element and extend the lines from it. We’ll get something like this:

The most evident problem here is the triangle’s bottom. Oh, sorry, the bottom-most part. *blushes*

So, apart from the platonic discussion about the sexyness of triangles, our seems to be falling down from the baseline, for two reasons:

1. It creates a huge amount of mass below the baseline;
2. Since the triangle’s base (or bottom, now I can’t get this off my head!) is perfectly horizontal, it’s pretty much stable, as a form; hence, the need for compensation below it’s baseline is nonexistent.

OK, now lets align the triangle to the baseline:

The base (I’m avoiding the word bottom, now. Or maybe not.) just got better. But what about the top? Too much stuff protruding there, right? As we saw in the first image, reducing the square to align the square just doesn’t work. And neither aligning it just to the baseline.

Lets try to scale it down a bit, while keeping the bottom (there we go again) aligned to the square:

Ah!, relief!

Still, the circle seems odd. The reason for this is the same: too much mass protruding above and below. Scaling it a bit down, aligned to the square’s center, we’ll get this as result:

Success! And here’s the composition without the guidelines:

2.2 Whitespace

Apart from being a really cool (or incredibly lame) name for a classic rock type designer’s band, every time you affect a form, you affect the white space around it: there is a constant play between positive and negative form and achieving balance of form requires attention to both, as New Age as this can sound. Or Confucian.

So, if we consider the vertical extremes of a form for optical compensation, we should do the same the horizontal ones.

Usually, horizontal compensation is neglected when we talk about overshooting, because it’s a matter of metrics. But since we are talking about perceptual (or optic, although the latter is not a very precise term, as we could see in chapter 2) compensation and this is not exclusive to type design, but rather generalistic, visually speaking, we should talk about this.

Consider the following image:

The circle and the triangle are compensated according to §2.1 and equal space is maintained between each element. The reason why squares are paired is to have a reference of spacing, since we saw that the square has no need for optical compensation. Here’s an image with the spacing margins:

Due to the triangle and circle’s irregular form (or better, non-square form), a big amount of white space is created, making these seem separated further apart from the squares, in comparison to the space between a pair of squares.

Again, we’re not aiming for mathematical calculations of space, but visual balance. With this said, if we were to calculate the white space area and make it equal, the circle and the triangle would overlap its neighbour square.

Instead, we’ll reduce the side spacing in the same proportions as we did vertically:

And here’s the same composition, without the guides and spacing blocks:

2.3 Some considerations

1. I haven’t told you how much you should compensate, with the exception of the previous example. I did so because there isn’t an exact answer: we could talk about ranges, but these are form-dependent;
2. If we’re designing free-form elements, as most glyphs are, the notion of exact calculations seems like a complete waste of time. It’s easier to test and decide than to write a complex software just to make that kind of decision for you and, most likely, with an unappealing result;
3. The reason why I was able to tell you to compensate the same horizontally that was made vertically is because these forms are symmetrical horizontally, and, in the case of the circle, symmetrical in both axis. And to tell you the truth, the compensation in the triangle’s horizontal spacing is slightly bigger than vertically (meaning the spacing was further reduced), to keep a nice flowing rhythm.

4. Counter-forms

As stated in § 2.2, there’s an ever-going dialogue between positive and negative forms; and I say form instead of outline because we should also consider negative forms inside positive ones, because this also has an effect in optical compensation.

Here’s an example:

Here are some observations regarding the previous image:

• Proportionally, when we apply a stroke inside our forms, the amount of white space reduction, proportionally, is bigger in the circle than in the square;
• A thick stroke makes the circle look smaller than the square, for the reason above;
• A thin stroke goes above the top alignment, making the circle look bigger than before;
• The stroke has also an effect on horizontal spacing and should be compensated accordingly.

The conclusion here is that we should increase the amount of compensation as we increase the stroke, paying attention to balancing the counters. In fact, when we have counter forms, they overpower the form’s outline and their equilibrium becomes more significant than the solid form itself.

5. Conclusion

So here we covered the basics of overshooting, opening a door to the world of optical calibration.

Thanks for reading the article and I hope you’ve enjoyed it. If you believe that it can be useful to others, please share it!

See you in the next article!

References & Further Reading:

• Type Mechanics: 001 – Frere-Jones, Tobias