5 Typography Tips, From a Type Designer’s Point of View
It’s been some time!
To take some time off the oh-so-many huge projects in the making and craft something for you that’s worth your while, today we’ll be talking about some typography tricks that I find helpful and that I haven’t seen anywhere or that I’ve found the information available unsatisfying.
Another plus for you, some of these came out of designing type, i.e., out of looking constantly at type at a micro level.
So, while I’m satisfying my inner megalomaniac, here’s a small post of some things I’ve learned along the way.
1. Contrast Too High?
This one has a story.
While I was waiting for a meeting at We Came From Space, my curiosity won me over and I had a peek at what Joana Sobral, from one of the studios there, Non-Verbal Club, was doing. She was designing a newspaper and was having trouble with the body typeface.
The typeface was Hercules, set in a very small point. The copy was gigantic, the line-spacing as tight as it could be and the thinner parts of the typeface would simply disappear under 8 points (the point size was 7.5 points).
A bit after I told her “that cut clearly wasn’t designed for such a small size”, it hit me: if a really thin stroke was added around the letterform (in that case, it was something like a 0.05 point stroke), it might do the trick. And it did, along with a slight increase in the tracking to compensate the x-axis growth.
You see, typefaces are designed for a specific size (or, at least, they should). When drawing for small sizes, one of the good practises is to decrease contrast. Other things should be also done, but we were looking for a quick and dirty solution on the spot.
The addition of such a thin outline wouldn’t compromise counters, it would just steal some white space (solvable with the loosening of tracking) and rescue those vanished thin lines.
2. x-Height and Weight (Pairing)
“When pairing typefaces, adjust the size to match the x-heights”.
This is a good advice, but incomplete: it does not consider weight. But let me explain this from another perspective:
The lighter the type, the taller it seems; so, bold cuts are designed a bit larger than their lighter counterparts, to compensate for that optical illusion. Have a look:
So, when pairing typefaces, we should do the same as above. As an example, here’s Minion Pro Regular paired with Futura Bold, first with the same exact x-height, and second with the correction:
3. When Possible, Tint Your Black
When I was starting out as a graphic designer, I had the privilege of working with a printing house composed of a handful of old guys. It was a very small print shop with a lot of old-school machines.
But the better part was the people. They had years and years of manual printing, lots of metal type blocks, a letterpress in the corner, a rusty inoperative Linotype in the backyard and a kind and patient heart to deal with my curiosity.
I’ve learned a big deal with them: they gave me free reign to test everything, while suggesting me small alterations to improve the works in hand.
One of the most precious teachings I got from them was to compensate the text colour with the paper colour, which one can easily extrapolate to other mediums.
3.1 Printing
The principle is simple: if you have a coldish background (paper colour), add a bit of a warm colour to your black. If the background is warmer, add a cold colour. Simple.
What it does is that it improves the silhouette of the letters, sharpening the text, by colour contrast.
Be aware that this only works with direct colour; do not use it by mixing multiple colours, use a dedicated spot color for this instead. So, if you’re printing in offset, only use one composite layer for this, or the overprint will make your text blurry.
3.2 The Screens
The same principal can be applied to screens. I never use pure white or pure black on a screen, and it has its perks:
- No White Burning, No Black Staining: I find the pure white/black combo quite aggressive on screens. When I worked in television, I had the opportunity to colour test a lot of television sets (from plasmas to CRTs, LEDs and the state-of-the-art OLEDs, back then), and one of the first things I did was to test how much they could handle the whites without burning, as well as how much black could you go before shutting the pixels completely.
- Better colour harmony: Using a bit of colour to something apparently monotone gives a more tactile, natural-like feel to the design.
- Sharpening of letters: Like in print, it improves the silhouette, adding clarity to the texture.
- Increased viewing angle: Specially in LED and OLED monitors, not burning the whites and keeping the blacks from staining increases the monitors viewing angle, when it comes to text.
4. Tracking and Size
Default values are not sacred.
I’ve read so many times do not use optical kerning! that is pointless to think that you use it. But the truth is: sometimes you have to (to get closer to a desirable result, you should not take it for face value).
Sure, type designers spend a lot of time around metrics and kerning, to the point of being the most usual complaint in our métier. But expecting to fire up a DTP software, pasting a text and choosing a typeface with no further adjustment is naïve.
Back on track: as we discussed in §1, typefaces are designed for a specific size. And apart from other formal considerations and adjustments, tracking and kerning is also size-specific.
If you’ve already read On Legibility – In Typography And Type Design, this isn’t new to you: if we consider a “medium” point size as our size reference, the bigger the size, the tighter the tracking. And as type size shrinks, tracking should grow.
There are two reasons for this: one perceptual, another one technical:
- Perceptual: The actual physical amount of white space varies according to size. It’s easier to recognize a silhouette when it’s big than when it’s small, so adding white space between glyphs when they’re tiny improves that silhouette-reading process. When it’s big, as long as you retain some white space around the letterform, it will still be recognizable without much deciphering.
- Technical: Not everyone has 20/20 vision (ah, those times!), printers aren’t perfect, screens aren’t perfect. These factors, among others, make the tracking issue, specially at small sizes, paramount. Someone who deals with typography, has to think and deal with deterioration and bad reading conditions, whether is low resolution, ink spreading or a bad rasterizer.
As I’ve mentioned in the readability and legibility article, a good test for deterioration is the Gaussian Blur / Threshold one. Have a look:
5. Justification, Hyphenation and Other Fairy Tales
Composing a block of text isn’t a straightforward nor simple task. There are a lot of factors to consider (mediums, resolution, letter size, leading, paragraph navigation, microtypography, rags, widows and more) as well as technical limitations.
Every solution is, therefore, object(piece)-specific.
With that said, you can imagine my expression when I read/hear people say to never justify text, because font metrics are sacred. Or when I bump into a website with justified paragraph text.
Don’t get me wrong: these scenarios are possible to pull off in an impeccable way; I just find disrespectful to the craft of typography and centuries of test-and-try knowledge.
Let’s get to the point: justification is a matter of navigation, more than a matter of style.
5.1 Justified Text
This is a book style classic, because it’s the most versatile and economic way to compose text. And also the hardest.
The beauty of justified text is that, regarding composition, is a very stable form that relates to the page format and, in a glance, it tells you when a paragraph starts and when a paragraph ends.
The problem is (and I believe this is the reason why some people bluntly tell others not to do this) that it takes time, effort and knowledge.
In order to achieve a good texture with justified text you need to pay attention to hyphenation, rivers, line-breaks, optical margin balance, widows and orphans, line number and text flow: all of this means you’ll find yourself doing letter-by-letter micro adjustments very often.
Note: The reason why I strongly discourage justified text on the web is due to the lack of control you have, specially regarding hyphenation. Sure, there’s manual hyphenation in CSS (and the auto feature is a no-go), you never know if the text block width will remain the same, with responsive sites. So, better safe than sorry.
5.2 Side Aligned Text And Rags
The nice thing about left aligned text is that the only thing that you have to control in the texture is your right rag, so the micro editing consists in line breaks. It also makes the text block a bit more dynamic.
But, as you can see in the image above, when scanning through the right margin, you don’t have any clue on where the paragraph ends (and the next one starts), specially if the last line of the paragraph is a longer one. One actually has to find a period and check the identation of the next line to now if one is dealing with a paragraph or not.
A solution for this is to separate each paragraph with a margin, as you can see below:
This has become the de facto standard for the web, but by doing this you loose a third level of hierarchy in the text, where you could divide the paragraphs by groups, for some reason. Sure, you can add marks – and in the web is a good solution, since there’s no constraint about how much vertical space you can use -, but when you have physical constraints, such as in a book (page count, line count), this can become a problem.
In the image above, you can see an example of when a paragraph ends a line above of where it should, if line count is desired to be respected.
6. Conclusion
I hope you found these tips as valuable as I do!
If you did, please be so kind to share it among those you think that will enjoy this too!
For more goodness, subscribe in the form below!
Cheers from Portugal!
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!