Five minute guide to better typography
pierrickcalvez.com
pierrickcalvez.com
For example, when aligning that header, they're moving the leftmost pixels into alignment with the body's leftmost pixels. The correct state is well-defined, it's just not understood by the program.
More complex, the amount of space under a heading. A heading's bottom is neither its bottommost pixel (the space between the bottom of an "a" and "g" is mostly empty), nor its baseline (that space isn't entirely empty); it has a soft bottom, a fade to emptiness. The ideal spacing is a function not only of what's being separated and by how much, but also the gradients that border it.
Does anybody know of good resources on this subject? What I find tends to be more about habit than derivation.
The excellent LAB color space was created this way. Scientists used experiments - for example the MacAdam ellipse to measure what colors are distinguishable - then backfit a model to that. It involves a bunch of cube roots and funny constants, not something you'd reach from a standpoint of mathematical purity. But it works really well.
So if you were looking at rigorously defining typography, I'd look at quantifying how spread out a pattern of ink needs to be before it looks smaller (aligning I and L might not be the leftmost pixel). I'd also look at quantifying some of the gestalt laws of grouping.
Regarding typography however, I argue that there are a multitude of concerns such as readability, aesthetic, and sustainence of focus. People will have different preferences and rankings for which concerns should be most optimized. Thus, the science of typography may need to be parameterized by the context of the text and what it is going to be used for.
[1] https://news.harvard.edu/gazette/story/2016/12/the-story-of-... [2] http://depts.washington.edu/jrphys/ph214A07/albers.pdf [3] https://www.nytimes.com/2016/12/01/arts/design/josef-alberss...
Jan Koenderink's book on color measurement looks good.
However, Josef Albers went beyond his art to make false claims about color theory, how the human brain perceives color and made broad generalizations - based on anecdotal evidence and intuition. He went unchallenged for the most part. See the criticism linked in my original post.
I just checked the book "Color for the Sciences" that you had mentioned. I think I am going to purchase this one! Thanks.
His book and teaching method are all about learning to work with colors through direct experience. To that end, he made students do numerous small projects with colored paper, etc.
(Have you read Albers’s book? I would definitely recommend it, with the proviso that you actually try to do Albers’s recommended exercises, which are really the important part of the book, instead of worrying too much about the text. Reading Albers’s book straight through is like reading a math textbook straight through without doing the problems.)
If you want to call Itten out for nonsensical babble though, go right ahead.
* * *
Edit: here’s Dorothea Jameson’s response to Alan Lee http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.470...
The problem is that "experiential" teaching without any scientific explanation is inadequate and misleading. Teaching part is where you explain the students - why. It is perhaps the approach in art colleges where rigorous science doesn't matter.
The problem stems when Josef Albers made scientific claims which go unquestioned as the factual basis for his cool color experiments. That is wrong and that's exactly the kind of nitpicking we need to do. What you call 'Pedantic nitpicking' is necessary and essential to the scientific process.
It is rather misleading to start the book with "The book does not begin with optics and physiology of visual perception, nor with any presentation of the physics of light and wavelength…. What counts here—first and last—is not so-called knowledge of so-called facts, but vision—seeing." and then go on to explaining his experiments using false claims (which again are highlighted and detailed in Alan Lee's criticism).
Anyhow, even if I am considering Josef's Interaction of Color from an artistic standpoint, he simply points out the cool illusions without any follow up on how to use/implement his concepts. I find it as a casual book that sits on the coffee table, not on my work desk.
Albers is not dogmatic. His purpose is not to prescribe a particular style or method. This is not a recipe book. He wants his students to explore deeply and learn how colors interact by spending a whole lot of time looking at them carefully, and then develop their own methods and styles.
The book is not supposed to be about “scientific progress”. It’s supposed to be a pedagogical tool aimed at artists. If you want a technical explanation, you are looking at the wrong book.
It sounds like you wanted to read a technical color science book. There are plenty of those out there, pitched at various audiences.
Color is relative. Got it. What else does it offer?
>> The book is not supposed to be about “scientific progress”. It’s supposed to be a pedagogical tool aimed at artists. If you want a technical explanation, you are looking at the wrong book.
I understand and I wish that was the case! However, the popularity of it and its fame as a text book (see Amazon reviews) combined with his claims of explaining how brain perceives color - indicates that it is used as THE color theory reference. I have a problem with that.
That’s just not true though. These Amazon reviewers apparently have no idea what they’re talking about. People looking for color science books, or even for dogmatic advice about how to make color combinations (most of which is bullshit, but anyway ...) have many other books to study.
Your criticism is kind of like judging a book about meditation techniques for being neither an answer to all of your life’s problems (despite Amazon reviews claiming so!) nor a complete psychology textbook.
We already have those results: thousands of existing fonts.
The fonts have all been manually optimized. It should be possible to back-fit the optimization process.
There may be a scientific approach to finding the best typography to convey information to a specific group of people but it will never be an exact science or a mathematical formula that will work universally.
This is analogous to that famous Sydney J Harris quote:
The real danger is not that computers will begin to think like men, but that men will begin to think like computers
But letting go of the principles of harmony in favor of "subjective absolutism" seems kind of strange and I would even say harmful. It's like asking about architecture "Well, why should a building be comfortable and durable? If I prefer a dangerous and awful structure, isn't that just another valid subjective preference?" Well, okay, but so then what? Abandon teaching structural integrity?
It's pretty interesting to discuss the differences between arts, crafts, trades, and sciences... but these discussions are also often kind of stupidly polarized between objectivist and subjectivist views.
I had a friend who staunchly refused to learn any music theory, or any patterns of musical tradition, because they were attached to a subjectivist position on music. Actually I think it's a deep position that has to do with the individual's place in civilization! This person's music was outsider music, much of it really cool, but in some way fundamentally alienated.
One of my favorite books ever is Alistair MacIntyre's After Virtue, which (with a somewhat conservative flavor) argues that contemporary subjectivism is because enlightenment rationalism just fails as a basis for ethics, and that this is the reason for "the interminable character of contemporary debates." It makes the case for virtue within traditions and societal roles as the antidote for subjectivism, basically.
So typography is a tradition of virtue in our society, kind of, right? It's like, wow, there's this whole guild of craftspeople stretching back hundreds of years, who have developed a body of practice and theory that forms a coherent framework for font shapes and text layout; that's pretty cool!
Of course there are deep questions like "How are the traditions, skills, and theories of typography modified by the encounter with digital media?"
You could even ask "Is typography (or whatever other creative trade) a gated community of elite tastemakers who just prescribe their own aesthetics as if they were natural laws?"
But at the end of the day you have to look at the alphabet itself. That's not subjective. It's not really "objective" either. It's a cultural heritage and a common standard. If you mess around with it arbitrarily, people will think you're a weirdo, and they might not understand you at all.
That said, if you want to go analytical on typography, you should focus on how it is used in advertising. The original work in the field, Ogilvy on Advertising[0], is still important and fun to read. Given when it was written most of the ads it discusses are quite retro (from what I can tell every industry plot point in the first season of Mad Men came directly out of this book), but Ogilvy was a giant in the field who transformed advertising from "people who write good" to a data driven research activity, starting with typography and layout.
[0]https://www.amazon.com/Ogilvy-Advertising-David/dp/039472903...
Most prolific type designers have at least once toyed with the idea of a mathematically constructed, ideal letter form. The final design is either allowed to offend the human eye or mathematics. I do not know a case where this was not true.
And hence influenced by culture. Much of typography (the aesthetic appeal aspect) is very clearly culture-bound.
But even the one aspect which might seem to be universal/objective (different things but that's another story), ie. legibility, turns out IIRC to be highly variable. I don't have the references, but I'm pretty sure recent research has shown legibility to be generational. The advantages of serifs has dropped off as later generations have been more exposed to sans serif typefaces. And gothic typefaces were more legible to pre-WWII Germans, etc.
If that's right, the best one could do mathematically would be to model a snapshot of the current cultural state. Perhaps the model could have parameters that could be tweaked as culture changed.
Fractals are also very beautiful.
I would argue that there are a lot of mathematical rules in architecture and would argue that this is true for fonts as well.
Same with baseball, by the way. Advanced analytics can complement and enhance your understanding of baseball. But there are people involved. It will never be as straightforward as throw a curve because the count is 3 and 1 in this situation.
Human interaction is always going to be art (and fashion) as much as science.
Typography is supposed to be perceived by human brains. So it will be subject to interpretation. Baseball is absolute: you can measure where the ball flew, where it landed, and who caught it.
If you take the human out of the batters box, you're no longer playing baseball. Baseball is a game. Played by humans for the sake of competition. If you build a robot that is able to hit every ball. Guess what? There's no point in playing baseball anymore. Have you "solved" baseball? Or have you destroyed the usefulness of it?
Approaching baseball by solving the physics of the bat and ball is completely missing the point of the game.
Trying to "solve" typography is equally meaningless. There are no definite answers to be found for the meaning of Coca-Cola red or IBM blue.
Typography can be art. It can also be utilitarian. Most typography is. Imagine if the entire WWW used either Comic Sans or Times New Roman with 1.x or 2.x line spacing. Just no. I am willing to bet you have published stuff online (even this comment; how meta), and your publications have benefited from having good typography. Typography that you didn’t have to think about or arrange or pick out. Making utilitarian typography more beautiful is a benefit to everyone. If only a select educated and experienced few could use beautiful typography because it was an arcane art, as you seem to want it to be, then well, we’d be using Comic Sans. If using more advanced mathematical models results in 99.999% of the readable web being more beautiful, I am for it. It doesn’t preclude someone from doing work by hand to either stand out more or to create art. But it certainly would be good for everyone if more advanced models existed. This is the same as how it is better that we have Google Fonts as opposed to every website owner having to create or commission a from scratch font.
Curves artificially create more space around them in our brains in relation to other letterforms and straight letterforms create less. As an example, type out the word "Highlands" in a very large point size (like 300pt) or in vectors where you can zoom in, in a well designed font. Drop a guideline at the baseline of the letters. You will notice that all of the flat-bottomed letters sit on a baseline and all of the curved strokes drop below the baseline. This makes them optically equal and appear to sit on the same baseline in our minds.
The issue gets more complicated when you start using less geometric-looking fonts with serifs and higher contrast/different weight distributions in the characters. Even typefaces that look very simple and geometric, are still designed with subtle fluctuations in weight to make them feel optically even. Futura is a good example. The "O" character looks like a perfect circle, but if it were, it would look wrong.
There is definitely some science behind all of this, but measuring and testing it seem like it would be very difficult.
By Hand and Eye by George Walker and Jim Tolpin https://lostartpress.com/products/by-hand-eye-1
It's by a couple woodworkers who have been learning about fundamental design principles that used to be used extensively before the introduction of tape measures, calipers and tools that have served to drive design almost entirely into imperial or metric measurement systems. I don't think it can address all of it (e.g. kerning), but some of the things I saw in the guide relate directly (1.2x/1.5x spacing, typeface sized in multiples, etc. I found it fascinating. They have a couple other books about it now too.
You will not find reusable mathematical solutions. I really wish, but I was actually pleasantly surprised at how many of the tips in this article I can imagine being reusable. Concepts are as far as it goes. Typefaces are amazing how they are so engrained into our senses. They correlate below the visual interpretation. They are abstractions of sound. They may feel like geometry but they are far too sensitive. They will always be poetic, rife with the imperfections and emotional toils of aesthetics, and a weakness for contextual influences.
I know what looks good and I design things that way. If you asked me to explain it and justify my choices, I could, and a lot of people are like "does that really matter?" or "wow, I didn't even notice" when I point out subtle details like leading, kerning, etc. Yes, you could pick up books that teach you about these topics in detail and learn the finer points of graphic design from there, but that won't give you imagination or the creativity necessarily. The spark just comes from absorption. Much like supervised machine learning, you do not learn any explicit formula for doing things, but rather you learn a model based on what you've seen, and you use it to rationalize how future things you make might be or might not be. I realize those sound very similar, but the difference is in that actual "learning process".
I personally think habit will take you further than scientific study in this area. It's an art. The more time you spend immersed in it, the better you'll get at finding what works and what doesn't. That's not to say that there aren't "rules", as in a science, but perhaps they are more flexible than you might imagine. :)
From afar (where gravity and drag would dominate), it's been fairly conclusively shown that humans primarily rely on the so-called gaze heuristic to meet the ball at the appropriate point.[1] In the gaze heuristic, you continually adjust your position so that the ball stays at a fixed point relative to the horizon or some other reference point. If you keep doing this, you will meet the ball. Studies have shown that if you disrupt this process--such as by removing reference points or the ability for people to continually move so that their position, the ball, and the reference stay relatively fixed--people suck at catching the ball.
Now, we could argue that this heuristic itself has rules, and in studying the rules we can master them. But the salient point is that, especially in this case, the human is an active participant in the heuristic. Moreover, it works because it trades a nearly infinite number of variables (the heuristic still works even as winds change) for a few simple variables which are intrinsically dependent on context--specifically, context other than those things directly acting upon the ball. And the gaze heuristic isn't the only heuristic used to catch a ball, just the one that works best from afar. The brain simultaneously applies many heuristics, most of which we don't even understand, yet.
Ultimately there's irreducible complexity here and no optimal solution. There's a trade-off. And because our environment is constantly changing (e.g. display material, lighting, and the place and time people read evolve over the years) the trade-offs will change. To be sure there's science involved, but it will never be an _exact_ science in the sense of being able to create a perfect font or completely enumerate a set of typographical rules.
[1] I think I learned this from "Rationality for Mortals: How People Cope with Uncertainty" by Gerd Gigerenzer.
Kerning and metrics are, for example, two parts of typography that lend themselves to formalization and automation. See for example the great results of Igino Marino's ikern: http://ikern.com/k1/ http://ikern.com/k1/collaboration/
Most typographic programs can perfectly understand "align leftmost pictures of title wit leftmost pixels of body".
>The ideal spacing is a function not only of what's being separated and by how much, but also the gradients that border it.
Only there's no real "ideal width". Not only it depends on the look of the heading font as well -- some designs might ask for more or less space, but it also depends on other elements on the page.
Even more so, it depends on the desired intent / impression, which might not be the same when typesetting a math book, a poetry book, a news article, a lifestyle article, a kids story, and so on.
It also varies by culture (country) and by era -- things people thought OK in 1660 look garish today, and even things people though OK in 1970 or 2006 can look out of place today.
At best, the "mathematics" can give something that more or less looks appropriate for certain situations -- TeX does that for math papers.
It doesn't and can't solve a soft science like typesetting in general (not without designer AI).
Obligatory XKCD: https://xkcd.com/1831/
”Beware, @sPECtre! The road to hell is paved with isometric typefaces. :)”
—[Hoefler&Co](https://twitter.com/HoeflerCo/status/836248823458455554) in a series of comments on an initial typeface design.
Good luck. Computer science-types try to do this all the time with music, and it always falls flat.
Typography/visual aesthetics has to be just as hard or harder, considering it's not exactly a linear function underlying visual perception - just take a look at all the different types of optical illusions that exist.
- If your font colour is more thant #333 on white, you're being cruel, especially to those who suffer astigmatism.
- Make sure the font colour contrasts the background for prose.
- Except from "fi" and "ffi", avoid ligatures in Latin scripts. They were useful when fonts were forged in metal and typesetting was manual labour. Dots may connect to serifs, but those "st"s and the ilk hurt my eyes.
- Do not use huge fonts. That's illegible on plebeian displays.
- Do not use very narrow or very light serifs for long texts. Looks cool with titles, brand names and logos, but they are really hard on eyes with anything longer than a short sentence.
- Account for when the user disables your fonts. Use defaults for things that are not needed to be stylised for your brand / website identity (i.e. any prose).
- Avoid stuff that obscures the text on your page (dickbars, links to top, etc).
- Repeating this, but can't repeat enough: make sure you understand the difference between brand identity and prose. If you style your prose too much, it'll become hard to read.
- Honour conventions (i.e. links have underlines, use hyphens and en- and em- dashes correctly, etc.)
- Use the space economically, and try to hit a balance between making things stick out, and making things miles apart. IDK how it is right now, but the Deck network's website was one of the best product websites around. Another good example is https://www.mcsweeneys.net/.
Many of theese the user may overcome by using the likes of reading mode in Firefox (that's a life saver), but why would you want the user to just skip away all that styling you worked on for maybe weeks? Just respect how the eyes work when you're putting together a webpage.
> - If your font colour is more thant #333 on white, you're being cruel, especially to those who suffer astigmatism.
A designer should think hard before reducing contrast. You may be improving the experience for one group at the expense of others:
- A low contrast page is difficult to read on a cell phone in daylight.
- A low contrast page is difficult to read at night on a dimmed display.
I don't meant to discount folks for whom high contrast is a problem, but don't they have a simple recourse? Reduce the brightness or contrast of the display. Most monitors and laptops have controls that allow this.
00 00 00 = R(0) G(0) B(0) for Red, Green Blue
FF FF FF = R(255) G(255) G(255)
That makes 16,777,216 possible combinations (256^3).
For pure red, that's FF0000; green, #00FF00; blue, #0000FF. Mixing those is how you get intermediary colors: red + green = yellow; red + blue = magenta; green + blue = cyan.
When the colors are referenced as single-digit hex numbers, that value is applied for the pairing. This would make #F00 (red) actually be applied as #FF0000.
"more thant[sic] #333 on white"... You could interpret this many ways.
A) You could interpret "#333 on white" to refer to the contrast ratio of "#333/#fff", which according to this calculator [1] is 12.6. In this case "more" is referring to a higher contrast ratio. "#000 on #fff" would fit - even though "#000" is less than "#333" - because the contrast ratio of the two colors is 21.
B) You could interpret the statement as "(more than #333) on #fff", e.g. increasing the numerical value of "#333". Something like "#444 on #fff" - which actually has a lower contrast ratio of 9.7 - fits, because "#444" is more than "#333".
This is dumb, I'm just pointing out that it can be important to be precise with your language.
1: http://leaverou.github.io/contrast-ratio/#%23333-on-%23fff
So my question is, how can I get people to care about this? I've argued for a properly defined corporate style guides as well as adoption of typesetting systems like LaTeX but nobody wants to hear it. Am I just in a minority by being put off by poor typographic and formatting choices and should find more important battles at work? It concerns me that customer facing documentation is severely lacking in quality.
(For PC users, there is “the PC is not a typewriter” (https://www.amazon.com/Pc-not-typewriter-Robin-Williams/dp/0...), but that is even older, so I’m not sure it will be more useful than the original, unless your users are using WordPerfect or Ventura Publisher)
In one word, YES.
But you aren’t alone either. I feel the same way and use LaTeX for any important writing (and I didn’t start using till after uni either oddly). My resume, a bunch of guides and documents I wrote in it, as well as a book I published. My editor (with WROX) insisted I had to use a Word template for it, but I just couldn’t force myself to. Instead I wrote it in LaTeX and then made a converter to output into their specific crappy template.
Atlassian Confluence is a horrible recommendation; it has few tools for typesetting, PDF export is very mediocre and hard to control (there is a plugin that allows you to control pagination), and I once found something that was impossible to produce in its markup (my workaround was to insert a zero-width character and hope no one copied it into a terminal).
l o l
Replying separately because the other response is good and deserves upvotes, please vent your confluence antipathy on this comment’s karma instead.
Even if people understand that this thing matter, if not matter MORE than his others problems then don't expect much change...
Just love the book and his fonts :)
I know it has been posted before, but I just had to ...
Which is described in the page he linked, by the way.
Index page link:
https://practicaltypography.com/index.html
Edit: HN is graylisted by the site, presumably due to large numbers of non-paying referrals.
In a blacklist something is completely blocked. In a whitelist something is absolutely allowed. In a graylist you may be allowed after a certain number of attempts, or after completing some sort of task, etc. It's kind of like a soft block.
In this scenario the website detects the link is coming from HN and "graylists" your visit to the website. You are redirected to a page that explains he's trying to sell a book and people coming from this site just use his bandwidth and never pay. But the website explains if you don't want to pay you can still get to the book by browsing to the website directly -- as opposed to being redirected there from HN.
Here's a 10 second theory class: stick to the four principles of design - remember CRAP (not my theory though)
- C: Contrast -> use contrasting design to make things that are supposed to be dissimilar look dissimilar.
- R: Repetition -> repeat design patterns for similar items. Remember CSS?
- A: Alignment -> don't leave anything just hang in air on the canvas. Align things together.
- P: Proximity -> birds of the same feather flock together. Similar things are closer. Dissimilar ones are farther.
You can open them for editing online in Overleaf to try them out - if you do, any feedback is appreciated, thanks (I'm one of the founders).
Here's a 5 second guide: use larger fonts that are easy to read with lots of white space.
Set max-with and increase line-height. Everything else is just fine as it is.
line-height: 1.4;
max-width: 30em;
line-height: 120%;
max-width: 700px;
http://maxdesign.com.au/articles/ideal-line-length-in-ems/
Also, use the proper typographic characters in body text: https://www.w3.org/2009/cheatsheet/#typo.
For example, Kuffler units within the retina are triggered by the presence of intensity transitions so we have edge detection and enhancement happening very early in the visual system. We don't actually see edges as clearly as we think we do. A number of optical illusions are due to this fact.
Interested to see the advice on doubling type-size for contrast. I thought sticking to the typography scale (10, 11, 12, 14, 16 etc) was a golden rule. The x2 factor looks good though.
And now I can reliably type -, –, and –. That alone's worth the read.
(* sorry the lack of em-dash)
In fact, typography is a solved problem since Donald Knuth gave us TeX in the 80s.
The problem isn't typography. It's people not caring enough, or forgetting and then repeating history.
What makes you think that?
There are always exceptions, of course; Georgia was explicitly designed to be a screen typeface, and there are other serif fonts that look pretty readable once they're at 18px or higher sizes--which is perfectly reasonable as a web font size in today's world, rather than the 13px that everyone seemed to adopt circa 2000. And "high-DPI" displays make even more delicate serif fonts a lot more readable these days.
Personally, I tend to choose serif fonts for body typefaces even on the web nowadays, but tend to keep "UI" elements sans serif.
> … it is better to use a sans-serif font for the body … because it is easier to read. I think that's more true for printed stuff than on the screen though.
It’s truer for the screen rather than the print.
Source: I've worked with magazines and newspapers.
Just check any newspaper or magazine, they all use serif.
^ My one sentence guide to better typography.
My one-liner didn't go into the care that this article went into, I couldn't do the topic justice.
I was thinking it would be interesting to recreate the site with CSS but the animations that show the before and after state change might prove tricky.