Five minute guide to better typography(pierrickcalvez.com)
pierrickcalvez.com
Five minute guide to better typography
http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
132 comments
I agree that typography could be an exact science, but I think starting with mathematics would be the wrong choice. Rather, it would be better to devise perceptual experiments and back fit a mathematical model to the results.
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.
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.
Edwin Land also made tremendous contributions to color science through empirical measurements and finding the deeper "mathematical" models[1]. Besides his scientific achievements, he was a real renaissance man, a tour de force of human intellect. Unfortunately, Josef Albers's pseudoscience[2] and artistic non-sense get most of the credit[3] when it comes to color theory.
[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...
[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...
I don’t think it’s fair to criticize Albers in this context, and this particular critique seems mostly like pedantic nitpicking at a fairly concise non-technical book; he wasn’t trying to establish a detailed technical model, but rather to teach artists to think. (“The book does not begin with optics and physiology of visual perception, nor with any presentation of the physics of light and wave length…. What counts here—first and last—is not so-called knowledge of so-called facts, but vision—seeing.”)
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...
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...
I read Josef Albers' Interaction of Color years ago and I've also bought the iPad app. I've been disappointed by both.
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.
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.
You’re approaching the book the wrong way. The original came with a big pile of colored papers. You are supposed to spend dozens of hours over the course of months doing careful visual study of various arrangements of them. If you don’t do the exercises in the book you’re not going to get much out of it.
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.
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.
I know what you're saying - I've done a few of his exercises and using the iPad app makes that very easy to do. Literally, simulates the same experience of getting the $200 edition with all the color plates. Drag a shape over another and see the effect.
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.
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.
> indicates that it is used as THE color theory reference
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.
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.
Credit for color science goes to the scientists, credit for artistic effects using color goes to the artists. There's plenty to go around.
Jan Koenderink's book on color measurement looks good.
Jan Koenderink's book on color measurement looks good.
The problem isn't that he used color to make interesting new art. I think he explored new areas of color which were not known before - and I applaud his artistic efforts.
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.
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.
> Rather, it would be better to devise perceptual experiments and back fit a mathematical model to the results.
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.
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.
The CIELAB color space was an attempt to make an invertible and fast-to-compute (for simple hardware devices in the 1960s) approximation to the Munsell color space (a lookup table carefully constructed by studies and expert adjustments done by the Optical Society of America in the early 1940s).
I agree with you. But I'd like to point out that the color specifications and audio response ranges we have are pretty much an exact science despite being informed by human experiment. Human experiment is not at all exclusionary to a topic of study being an exact science; it just makes the truth harder to discern. We are still coming up with new color spaces that claim to match the human range better, after decades of research.
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.
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.
Yes, in the example it looks like they are aligning the vertical stroke of the larger and small letterforms, but this isn't actually always the answer. The goal is to be optically aligned, rather than actually aligned and our brains' optics can really distort things based on size, weight, etc. If you zoom in about 300% you might notice that the larger text is actually still slightly indented, because the weight and size of it artificially occupy more space.
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.
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.
Your example of catching a baseball is apt, but disproves your point.
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.
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.
As someone who does research in the sciences, my eye for typography (which in my humble opinion is well above average, at least for an amateur) is based completely on intuition. I'm sure you can study it scientifically, but to be honest a lot of it is like doing art -- you can train yourself to do it well, and sure there is some scientific aspect to it, but having a good eye and a good sense of style is all you'll really need. Of course, practice also helps.
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. :)
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. :)
This might be a really interesting read for you in your quest:
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.
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.
I disagree completely, typography is an artform and therefore completely subjective. I actually preferred the unaligned header example. Sometimes there is a lot of white-space that makes people perceive things to be aligned. Often perfectly aligned text calls for something unaligned to stand out.
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.
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.
One of the problems with modelling culture-bound phenomena as 'objective' rule-based systems is that the latter can become normative. If a mathematical model of typography gained hold, eventually someone would point to your 'unaligned header' preference, and demand you relinquish it because the model proved you were wrong.
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
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
Completely subjective is too strong! Music is art but harmony is mathematical.
Who says harmony is "good"?
http://www.fretjam.com/right-wrong-music.html
http://www.fretjam.com/right-wrong-music.html
I don't say harmony is good! Basically all music relies on at least some tensions of disharmony, and of course you can make music that is completely unharmonical or antiharmonical, just like you can make arrhythmic music or music with intentionally distorted rhythms to make listeners feel weirdly disoriented if that's what they like.
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.
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.
Typography is not just concerned with maximising readability. It is subject to aesthetics and taste, which are strongly linked to habit and consensus.
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.
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.
> which are strongly linked to habit and consensus
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.
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.
How about the golden ratio? romans and greeks used it often.
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.
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.
Typography can be understood mathematically to the extent that communication can be understood mathematically. You're never going to account for style, trends, or connotation.
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.
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.
Baseball is... I mean if a team of engineers can design a rocket that lands vertically, I am fairly certain they could design a robot that hits balls with a bat. In fact I am surprised we don’t already have robot baseball.
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.
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.
It's amazing how blind to humanity we developers can be.
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.
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.
You are wrong in a subtle way. Robots playing baseball would be silly and useless. Almost as bad as athletes who use steroids (ha!). But baseball is a sport. Sport and art are similar: by humans for humans is usually the winning formula.
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.
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.
I agree that the number of data points needed for study and the number of variables involved are both key factors. The one area that comes to mind where a approach might be easiest is closed platforms like the hardware Kindle reader -- for example, measuring read times by a large population of the same text, with varying fonts, on the same hardware. Improved typography might reduce read times some modest percentage over baseline due to improved readability.
Sure you can use ML and test subjects to maximize readability, but that's only one part of typography. Akin to Google beta testing shades of blue. http://www.zeldman.com/2009/03/20/41-shades-of-blue/
The TeXbook and the METAFONTbook explore the mathematics of typesetting in great detail
One can of course make a precise set of rules that one will follow, and one might even come up with some pretty good ones. But typography is an art as well, by which I mean the range of optimizations potentially desired from a professional layout is intractably large, presenting huge problems for creating an algorithm that can equal or exceed a good human designer. Focus of the eye, retention, recall, mood to be instilled, characteristics of the speaker/brand to be projected, all factor into those decisions.
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...
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...
Frank Blokland is working in this direction. I don't think every aspect of typography is amenable to being reduced to a mathematical model, but some things are.
http://www.lettermodel.org
http://www.lettermodel.org
> I'm convinced that typography is an exact science
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/
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/
[deleted]
Hope your analysis yields interesting fruit, and that it makes it to a forthcoming front page. My hunch is yours, I've noticed that what I perceive as "pleasing" vertical indent for example can usually be expressed exactly as a continued fraction expansion. Which is a totally straightforward heuristic to implement by hand or programmatically: define a hierarchy of tags, then for each element in the block of priority N multiply the 0th element's height by some fractional constant N times. In practice this seems to work pretty well, there's a lot more features latent in a block of text than just vertical whitespace though and the ideal way to split the prescribed amount of whitespace between margin-top and padding-top attributes isn't obvious to me.
As far as I know, the people behind thegrid.io have put a lot of thought into constraint-based design, they may have some insight into ‘the rules’.
Your comment prompted me go go take a look at their website. It comes up a single black page with nothing on it other than a red social media button in the bottom right.
I guess I was hoping to point in the direction of Grid Style Sheets (made by/for thegrid.io folks) using cassowary constraints. It looks like their site is hacked, and the repo of it hasn’t been updated since 2014.
>It's a quest of mine to understand this subject mathematically.
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.
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.
Typography is not an exact science.
”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.
”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.
>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.
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/
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/
I am an artist of all sorts and have done a lot of design work but my foremost qualification on this subject is having been raised by a mother who was a sign painter and a bit of OCD.
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.
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.
My humble appendix wrt online typography ("-" means IM-not-so-HO):
- 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.
- 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.
I think most of your advice is solid, but I take issue with one point:
> - 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.
> - 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.
I read the OP's comment to argue _for_ increased contrast, not against it. Though it isn't fully clear exactly what "more than #333 on white" means.
Colour codes are hexadecimal numbers, 000000 is basically zero, and is for black. FFFFFF is 16777215 and is white. The more the numerical value of the colour the lighter it is, the lower the darker (well, not exactly, but kind of).
Right, but to be pedantic, the OP's original statement was ambiguous.
"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
"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
I'm the OP, and yes, I should've worded that out better.
Expanding on this a little more, it's actually broken up into hexadecimal pairings (or 8-bit numbers).
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.
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.
#666 > #333
And #666 is lighter so less contrast. You’re both saying the same thing.
You seem to agreeing?
What's a dickbar?
A bar across your screen / webpage containing stuff that's of negative value to the user, like ads or please-share-this buttons. See e.g. this: http://scripting.com/stories/2011/03/06/whatIsADickbar.html. The term was coined by John "Daring Fireball" Gruber.
A clickbar with bad keming. But seriously, it’s any clickbar that is bad for the UX
Any bar that someone put across your screen as a Dick move that makes it harder to read the text. https://daringfireball.net/2017/06/medium_dickbars
I have persistently encountered the same problem in this space. Most people I've worked with write documents using the last formatted document they made as a template for the next. Tracing back through their history of documents you find that they are all based off one person who decided it was a good idea to mix fonts and colours of headings, and mess around with font sizes and then save it all as default heading and text styles, and then everyone after them just uses these saved styles to save time because changing them would mean having to work with frustrating aspects of the tool (MS Word).
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.
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.
> Am I just in a minority
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.
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.
The book “the Mac is not a typewriter” (https://www.amazon.com/Mac-Not-Typewriter-2nd/dp/0201782634) may help get them some idea about style. It is 15 years old, targets print, and is aimed at Mac users, but that doesn’t matter that much.
(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)
(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)
Consistent styles might be a battle you could win, but you're mental if you think people are going to learn LaTeX.
Even the consistent style part might take quite a bit of effort. I would be happy already if I could make a certain kind of person drop ClipArt and WordArt, and I don't see this ever happening...
There are countless kinds of cheese. How can we make people care about all those. The subtle taste differences, countries of origin or rippening time.
Same with typography. If you want quality customer facing documentation generate it from plain text.
You will need a semantic word procesor.
Even if people understand that this thing matter, if not matter MORE than his others problems then don't expect much change...
Even if people understand that this thing matter, if not matter MORE than his others problems then don't expect much change...
Latex is too hard for mortals, but I’d suggest Sphinx or one of the markdown alternatives. I think atlassian confluence is another even friendlier alternative, with a price tag.
Tools won't make people care, but they can help produce consistent documents.
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).
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).
We’re talking about alternatives to ms word for mortals.
Confluence? You mean the terrible wiki like software put out by Atlassian? It’s about as relevant as handing someone a typewriter and telling them to use it as an IDE/code editor. Sure, you can type characters out with both, but does that really make them similar tools?
> atlassian confluence
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.
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.
It's 10 min yet also a nice guide: https://practicaltypography.com/typography-in-ten-minutes.ht...
Just love the book and his fonts :)
I know it has been posted before, but I just had to ...
Just love the book and his fonts :)
I know it has been posted before, but I just had to ...
It looks like the author has chosen to "graylist" HackerNews in an attempt to sell copies of his book. I'm not saying there's anything wrong with that, but warning you that anyone clicking on your link is actually redirected to https://practicaltypography.com/graylist.html
Graylist?
I have never personally seen it used the way it was used on this website, but graylisting is the middle-ground between blacklisting and whitelisting.
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.
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.
The posted link leads to an article about typography. Your link leads to an add of some book.
It's an online free-to-read, donation-supported book on typography. He just linked to the wrong page.
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.
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.
A great guide to typography for the reader with a few hours to spare is Butterick's Practical Typography: https://practicaltypography.com/
A nice quick guide. Definitely eliminates a lot of experimentation when in hurry to get going.
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.
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.
I first came across these guidelines in Robin William's books[1]. I read a couple of them (The Non-Designer's Design Book and The PC is Not a Typewriter) back in the mid 2000s and found them to be very useful as an amateur desktop publisher. I thoroughly recommend her books for any lay person with an interest in understanding the basic principles of typography.
1. https://en.wikipedia.org/wiki/Robin_Williams_(writer)
1. https://en.wikipedia.org/wiki/Robin_Williams_(writer)
We learned this in my tech writing class back in school and I still call it to mind when laying out slides and things. Seemed silly at the time but it's very memorable!
Reminds me of the FART photo technique (feel, ask, refine, take).
JIRA could benefit from this. After their big fancy redesign, I was shocked to see that they had re-arranged the old pile of shit into a new pile of shit.
If you're looking for some ideas / examples for nicely formatted documents, there are some amazing LaTeX templates out there, e.g. try browsing https://www.overleaf.com/latex/templates
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).
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).
Nice display of typography, so much data is poorly presented nowadays.
Here's a 5 second guide: use larger fonts that are easy to read with lots of white space.
Here's a 5 second guide: use larger fonts that are easy to read with lots of white space.
Here's a 5 second guide for typography on the web:
Set max-with and increase line-height. Everything else is just fine as it is.
Set max-with and increase line-height. Everything else is just fine as it is.
Yes, and use the correct units when setting max-width and line-height. This is good:
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.
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.
We "see better" than the optical system of our eyes allow. Image processing happens to the signals from our retinas before it arrives at the visual cortex and especially before it arrives at higher levels within the brain. This means that logical letter forms may not be ideal and that actual experiments need to be performed to understand what works well when considering visual perception.
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.
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.
Great guide.
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.
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.
Nice guide, I only personally dislike the blinking animations because they don't allow me to properly stare at it, e.g. the "headless in a bar" example I would really prefer side by side, and the "Bonjour" example I'd really want to see that box all the time to properly be able to see how the lines are (mis)aligned. Fortunately second half of the article had less of those "aargh can't properly see what I want as long as I want" moments. Thanks nonetheless! :)
Another good resource about typography with a focus in responsive layouts http://informationarchitects.net/blog/responsive-typography-... .
Good intentions with bad implementation. Some UX guy could probably use it for his own "five minute guide to better UX", about spacing, blinking elements etc. And dear author, not everyone uses Apple PCs these days. Sincerely, Windows user.
I like this article for its lack of philosophy.
It gives practical advice for people like me who are dumb with typography - what one gets using it is not the next Mona Lisa artwork but something acceptable and readable.
(* sorry the lack of em-dash)
(* sorry the lack of em-dash)
If it's that simple, why can't we just let some ML application do typography for us?
It's such an easy task that a set of rules are totally sufficient - no need to throw ML at it.
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.
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.
While visiting a newspaper for a project, I heard them talk about how it is better to use a sans-serif font for the body and a serif for the heading because it is easier to read. I think that's more true for printed stuff than on the screen though.
On the contrary, serif is easier to read in print.
Source: I've worked with magazines and newspapers.
Just check any newspaper or magazine, they all use serif.
Source: I've worked with magazines and newspapers.
Just check any newspaper or magazine, they all use serif.
> I think that's more true for printed stuff than on the screen though.
What makes you think that?
What makes you think that?
Sans-serif seems easier to read on a screen when the font-size is small. Maybe that's just me though.
No, it's not just you. It's been a long-standing "rule of thumb" in typography that serif typefaces are better for longer passages of text (which is why nearly every magazine and book uses serif type for body), but sans serif type tends to be more legible on screen, in part because screen resolution isn't high enough to make serifs look good.
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.
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.
[deleted]
No, it’s not just you. But that contradicts your earlier comment, which is why I found it strange:
> … 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.
> … 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.
[deleted]
Ironic for an article about good typography to be so hard to read.
Nice quick guide! I definitely need to learn more about typography as I'm convinced the designers I work with don't know enough and what they design doesn't translate correctly in build.
It's a good guide, the only I specifically disagree with for web design might be the 'choose four font weights' bit since Google Fonts warns me of slow loading times when I choose that many.
Read this initially a few days back through codrops.
This information did helped me a lot and the idea of choosing a font with 3+ variations is just awesome. Very helpful, recommended for everyone.
Great page, just remembered me that I have to control flow in my own site. More work to the pile :( :)
Helvetica and you're done.
^ My one sentence guide to better typography.
^ My one sentence guide to better typography.
That's your guide to better typography for OSX users. Then we also have folks using Windows and Linux that doesn't ship with Helvetica. Worth knowing!
I'm always sad to see people say things like "Helvetica and you're done!" There are so many beautiful different fonts to use... imagine if everything was Helvetica? Boring :(
Helvetica and its derivatives are beautiful, they're not boring.
I should of said Helvetica-derivatives.
Using Helvetica doesn't magically increase readability.
That really depends on what you're starting with.
My one-liner didn't go into the care that this article went into, I couldn't do the topic justice.
My one-liner didn't go into the care that this article went into, I couldn't do the topic justice.
I only see a white page when i open the link...
It's almost all images / gifs, maybe they failed to load or you have them blocked?
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.
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.
Yes - I got a white page until I allowed ajax.googleapis.com.
The author hates us, see this xkcd on kerning: https://xkcd.com/1015/ ;)
That's some brutalist website for sure
I think en dashes are good enough to use as comma replacements. I especially like The Economist's style of using a thin space, then an en dash, then another thin space to punctuate the break properly. But in plain text, I'm perfectly fine with using two hyphens together.
Such a great guide. I think a lot of people don't realize just how essential typography is to UI design and development.
Here is some nice typography’s https://goo.gl/eRL1vZ
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.