Making a Font: Maximal – Part II
I hope you guys had a great Easter (if you’re culturally inclined for such practice – if not, I hope you had a great week).
So, here we are, back on track. In the previous post, we talked about some preparatory steps regarding the conceptualization of the font in hand. Today, we’re going to start analysing an initial prototype, so we can make some early choice of the development to come.
But before we dive into it, I want to thank you guys for such an overwhelming response to the first post. I was really shy to promote it, since I thought it was a very initial approach to this subject, and I thought it was best to leave a more intense promotion to later on, when there was more reading material.
I’m humbled that you guys found a preparatory post interesting enough to share it so much, so my deepest thank you for your attention! I owe my motivation to you and your kindness, so I have nothing to do but my best! Thank you all!
So, to avoid more sappiness from my behalf, let’s get to the point.
1. How many styles?
At this point, this is the most crucial decision to make. As we are going to see in §4, this factor determines how lengthy this process will be.
The only reason why I should be concerned with the time this will take to make is that I want to keep you interested. Since most of you guys are casual visitors (meaning not subscribers [but you can subscribe at the bottom of this page]), this attention can easily go into the void.
To avoid that, I have to consider time. Or you can simply scroll down and subscribe to the newsletter.
Let’s say that we don’t have to worry about time. In this scenario, if we consider the “repetition” model (read about it in the previous post, §3 and §5), a linear incrementation would be the best one, right? Well, sort of.
Yes, it would give you more manual control, but the point here is about random substitution. And the glyph width variation should be extreme enough, since this is not about subtlety, but boldness.
Still, a natural or organic progression, although extreme, is welcome. So, here’s the solution: the Fibonacci sequence. The sequence goes like this:
1, 1, 2, 3, 5, 8, 13, 21, 34, …
The logic here is that any number is the addition of the previous two. In our case, we can skip the 1’s, since that’s our base glyph. And since we want 5 variations of expansion/repetition to each side (and both), we’ll use the numbers from 2 to 13.
So, we have 1 (our base glyph), 2, 3, 5, 8 and 13. The variations look something like this:
Then, as you saw in the image that opens this section, the same happens to the other side of the glyph and then to both sides. And then we make the “expanded” variations, using the repetition as the base. We’ll talk about that in a tick, in §3.
So, with 5 variations to each side, as well as 5 for both, in two sets (“expanded” and “repetition”) we have 30 stylistic sets, apart from the default glyph. That means 31 variation per letter. *heavy breathing*
2. The Base Glyphs
I have only two characters drawn, at this stage: E and F. And their 30 variations.
Now I’m more concerned with prototyping it, or better, to get the tech stuff sorted out before the drawing process; that’s why you’re seeing the same letters over and over again.
As this series go through, expect the tech geekness to decrease (although the next post or two will be about OpenType programming and maybe some Python macro stuff) and the drawing aspects to be mentioned more and more.
But as formal characteristics, the E can tell a lot, in our case. It can tell us quite nicely how the serifs will work, as well as how these elements work with the expansion/repetition. Of course, I’m still in the dark about the curved and diagonal shapes (although they’re playing cheerfully in my head, but that doesn’t mean it will play out properly once drawn).
I’m hoping to draw some very classic, rational and somewhat bland capitals. I want the magic to occur with the variations, not with the base forms.
3. Expanding Processes
After we have the base glyph, the expansion is pretty simple.
Each glyph is divided in two components: one for the left repetition, another one for the right one. Have a look:
I’m sure you can tell where this is going now: the components are propagated, on top of the base shape, to left, right or both sides, and so we get the “repetition” styles:
For the “expanded” set, we take the corresponded “repetition” glyph and simply delete what’s not needed. Here’s an animation of the process:
Et voilá!
4. The Math Of Going Overboard
As I’ve mentioned in the previous article, this font will be Latin-only. So, how many glyphs will it have?
I could go for a basic Type 1 Western/Roman character map (256 glyphs), but that would leave some languages aside. So, after the usual checking of language support tables, I’ve decided to go for the OpenType Latin Pro encoding (433 glyphs). If you think, as I do, that this is an OK character table, let’s make some further calculations.
Let’s consider a basic character map (Type 1 Western/Roman): 256 glyphs. As we saw on §2, we have something like 30 stylistic sets. Added with the default glyph, we have 31 variations of the same letter. How many glyphs are necessary for this? Here you go:
256 × 31 = 7.936
7936 glyphs. Ouch. And what about the OpenType Latin Pro?
433 × 31 = 13.423
Holy s***. Well, this might take a while.
But giving it a second thought, this font is all-caps, and that means that half of the alphabet is a duplicate. So, instead of 433 glyphs to draw, we have 310:
310 × 31 = 9.610
OK, this looks more manageable. *sighs*
5. Wrapping Up
This is all for today! I hope you’ve enjoyed the article!
If you’re a newcomer, be sure to read the previous post of this series an, while we’re at it, check the rest of the blog for some more juice! Oh, and don’t forget to subscribe at the bottom of this page, as well as to share it, if you think it’s valuable!
Thanks for your attention! Cheers!
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:
- We have two eyes, distributed horizontally, making our area of eyesight wider than taller; and this might add relevance to vertically distributed elements;
- 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:
- Draw an ellipse that has the same width as the vertical stroke and the same height as the horizontal stroke;
- 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!