6 ms·

Typography Spacing Research

109 points by jashmenn 14y ago

exolxe 14y ago
Wow, this is pretty intense. I'm a designer, but even for me it's almost too dense. Would be really if there was a cheat sheet with the main takeaways.
evoxed 14y ago
Interesting. I haven't attended TypeCon in a couple of years but last time I went algorithmic kerning was a fairly hot topic amongst event-goers and some of the people giving talks. Machine kerning is still sort of looked down upon as far as I can tell (in the design world) but as a practical tool it's great that people are working on it and it has certainly improved many times over. It looks like a great article and I'm looking forward to going over it fully to see if there's anything really new but overall it looks quite clear and covers at least a few things that I've tried (maybe less than successfully) to describe to others.
SparrowOS 14y ago
http://www.embeddedrelated.com/usenet/embedded/show/44205-3.php http://www.embeddedrelated.com/usenet/embedded/show/44205-3....
aston 14y ago
The tl;dr of this article is that the author summarizes some really interesting leads on automated letter spacing, but so far hasn't come up with a winner. There are a number of loose ends in there that might be interesting for others to pick up and run with since he's made much of his code available. Most promising to me is the concept of bubble kerning, which not only appears to work in the limited testing the author does here, but also meshes with my intuition about how to space letters.
dfc 14y ago
His Crimson Text font is very attraactive: http://aldusleaf.org/crimson.php#download http://aldusleaf.org/crimson.php#download
- _fn 14y ago
  Google WebFonts serves his font here: http://www.google.com/webfonts/specimen/Crimson+Text http://www.google.com/webfonts/specimen/Crimson+Text I've been using it on my blog for a while.
crazygringo 14y ago
Wow, what a beautiful site, and beautiful typeface (reminds me a great deal of Minion, which was chosen to set The Elements of Typographic Style). And an absolutely fascinating investigation. It's almost like the famous quote of not being able to define something (pornography), but knowing it when you see it. [1] Typography, with its rhythms, is almost the purest example of this. It's so easy for a good designer to kern, set linespacing, etc. until it "looks right" to your eye. But I wouldn't even know where to begin to try to translate this into an algorithm -- because it's not just about spacing between letters, but having that spacing be harmonious as well with the structures within letters (like the horizontal rhythm of an "m"). I personally suspect it's something close to trying to equalize the "area" between adjacent letterforms, but the problem is that depending on angles, case, etc. that "area" is a "blob" we feel, not an easy calculation. I wouldn't be suprised if the best approximation involves some kind of fuzzy-bitmap blobs, rather than any hard of hard exact calculations. I look forward to reading more research results! [1] http://en.wikipedia.org/wiki/I_know_it_when_I_see_it http://en.wikipedia.org/wiki/I_know_it_when_I_see_it
- dfc 14y ago
  The "famous quote" is about obscenity, not pornography.
  - CrankyPants 14y ago
    The most famous opinion from Jacobellis, however, was Justice Potter Stewart's concurrence, holding that the Constitution protected all obscenity except "hard-core pornography." Stewart wrote, "I shall not today attempt further to define the kinds of material I understand to be embraced within that shorthand description; and perhaps I could never succeed in intelligibly doing so. But I know it when I see it, and the motion picture involved in this case is not that."
    - dspig 14y ago
      and the famous tl;dr of that is: "whatever gives the judge an erection".
    - 14y ago
verroq 14y ago
Am I the only that thinks "Wow people actually give a shit about this?". It seems comical how much people are willing tolerate this typographical circle jerk disguised as "designing". I for one, cannot take this guy seriously when the title of his post isn't even antialiased (funnily enough with no kerning present). Or when he commits binary and swapfiles into his git repository.
- dfc 14y ago
  "Am I the only that thinks "Wow people actually give a shit about this?". It seems comical how much people are willing tolerate this typographical circle jerk disguised as "designing"." A lot of people care about the finer points of typography. If you really want to see some "circle jerking disguised as designing" take a look at a book by this nutjob named Donald Knuth: Digital Typography by Donald E. Knuth (Stanford, California: Center for the Study of Language and Information, 1999) "Or when he commits binary and swapfiles into his git repository." Committing binary files is such an atrocious act. I for one am glad that github does not condone such immoral acts by showing the difference between images.
- martinced 14y ago
  By your logic we'd still all be reading books as they were typeset hundreds years ago (hint: they're pretty dense and definitely not convenient to read) and we'd all be driving while trying to decipher poorly typeset roadsigns (which is very, very dangerous). All it takes is a few researchers to actually care, research, blog, write papers about the subject and then we all benefit from that research. Regarding the goold old "eat your own dog food" logical fallacy... By your logic, an engineer should not be allowed to do research, say, on electrical cars if he isn't himself driving an electric car. Sounds pretty extreme to me ; )
idan 14y ago
A fantastic deep-dive. If you want to know just how deep you can take the craft of presenting beautiful type, this is a great example.
mh- 14y ago
Misspelled letters within the first twenty words of an otherwise-excellent article about letterfitting. :)
lucb1e 14y ago
Am I the only one where the typeface on the site bugs? Or perhaps it's supposed to look like this, but it's really hard to read. Windows 7 with Chrome, no uncommon setup. Is's really ironic how most typography blogs have this problem. Same problem occurs on Linux too by the way, which I run on my desktop (this is a laptop). No localized issue.
- anonymouz 14y ago
  I also find it hard to read (on Firefox in Linux). For example in "snugly should" in the first paragraph the space between "s" and "n"/"h" seems way too big. In general, the spacing varies wildly and the text looks very uneven. Not sure what causes this and if it's supposed to look like this though.
hayksaakian 14y ago
Sidebar renders poorly on my nexus 7. http://www.imgur.com/1z5Vv.png http://www.imgur.com/1z5Vv.png The math was quite interesting though.
- tambourine_man 14y ago
  Fixed positioning + allowing zoom is not a good idea.
emanuer 14y ago
Considering that humans are the judge of what constitutes as a well spaced font, one should look at the workings of the human brain. It turnes out we already know the algorithm employed by the visual cortex for edge detection, the _Gabor filter_ http://authors.library.caltech.edu/2653/1/MALjosaa90.pdf http://authors.library.caltech.edu/2653/1/MALjosaa90.pdf Also Wikipedia has a fantastic overview for the Gabor filter: http://en.wikipedia.org/wiki/Gabor_filter http://en.wikipedia.org/wiki/Gabor_filter Of the approaches mentioned in the original article, "wavelet" masks, are the ones closest to the calculation done in the V1. A quick search on http://scholar.google.com http://scholar.google.com for "Gabor space visual cortex" uncovers that much research was dedicated to this topic.
Crake 14y ago
This was really interesting! It's great to see someone taking a quantitative approach to design. Art schools would never teach an algorithmic approach to kerning, but for the programmers/artists who are smart enough to learn it, a breakthrough permitting effective use of this approach would be invaluable.

109 points by jashmenn 14y ago

Wow, this is pretty intense. I'm a designer, but even for me it's almost too dense. Would be really if there was a cheat sheet with the main takeaways.

evoxed 14y ago

Interesting. I haven't attended TypeCon in a couple of years but last time I went algorithmic kerning was a fairly hot topic amongst event-goers and some of the people giving talks. Machine kerning is still sort of looked down upon as far as I can tell (in the design world) but as a practical tool it's great that people are working on it and it has certainly improved many times over. It looks like a great article and I'm looking forward to going over it fully to see if there's anything really new but overall it looks quite clear and covers at least a few things that I've tried (maybe less than successfully) to describe to others.

SparrowOS 14y ago

http://www.embeddedrelated.com/usenet/embedded/show/44205-3.php http://www.embeddedrelated.com/usenet/embedded/show/44205-3....

aston 14y ago

The tl;dr of this article is that the author summarizes some really interesting leads on automated letter spacing, but so far hasn't come up with a winner. There are a number of loose ends in there that might be interesting for others to pick up and run with since he's made much of his code available. Most promising to me is the concept of bubble kerning, which not only appears to work in the limited testing the author does here, but also meshes with my intuition about how to space letters.

dfc 14y ago

His Crimson Text font is very attraactive: http://aldusleaf.org/crimson.php#download http://aldusleaf.org/crimson.php#download

_fn 14y ago
Google WebFonts serves his font here: http://www.google.com/webfonts/specimen/Crimson+Text http://www.google.com/webfonts/specimen/Crimson+Text I've been using it on my blog for a while.

crazygringo 14y ago

Wow, what a beautiful site, and beautiful typeface (reminds me a great deal of Minion, which was chosen to set The Elements of Typographic Style). And an absolutely fascinating investigation. It's almost like the famous quote of not being able to define something (pornography), but knowing it when you see it. [1] Typography, with its rhythms, is almost the purest example of this. It's so easy for a good designer to kern, set linespacing, etc. until it "looks right" to your eye. But I wouldn't even know where to begin to try to translate this into an algorithm -- because it's not just about spacing between letters, but having that spacing be harmonious as well with the structures within letters (like the horizontal rhythm of an "m"). I personally suspect it's something close to trying to equalize the "area" between adjacent letterforms, but the problem is that depending on angles, case, etc. that "area" is a "blob" we feel, not an easy calculation. I wouldn't be suprised if the best approximation involves some kind of fuzzy-bitmap blobs, rather than any hard of hard exact calculations. I look forward to reading more research results! [1] http://en.wikipedia.org/wiki/I_know_it_when_I_see_it http://en.wikipedia.org/wiki/I_know_it_when_I_see_it

dfc 14y ago
The "famous quote" is about obscenity, not pornography.
- CrankyPants 14y ago
  The most famous opinion from Jacobellis, however, was Justice Potter Stewart's concurrence, holding that the Constitution protected all obscenity except "hard-core pornography." Stewart wrote, "I shall not today attempt further to define the kinds of material I understand to be embraced within that shorthand description; and perhaps I could never succeed in intelligibly doing so. But I know it when I see it, and the motion picture involved in this case is not that."
  - dspig 14y ago
    and the famous tl;dr of that is: "whatever gives the judge an erection".
  - 14y ago

verroq 14y ago

Am I the only that thinks "Wow people actually give a shit about this?". It seems comical how much people are willing tolerate this typographical circle jerk disguised as "designing". I for one, cannot take this guy seriously when the title of his post isn't even antialiased (funnily enough with no kerning present). Or when he commits binary and swapfiles into his git repository.

dfc 14y ago
"Am I the only that thinks "Wow people actually give a shit about this?". It seems comical how much people are willing tolerate this typographical circle jerk disguised as "designing"." A lot of people care about the finer points of typography. If you really want to see some "circle jerking disguised as designing" take a look at a book by this nutjob named Donald Knuth: Digital Typography by Donald E. Knuth (Stanford, California: Center for the Study of Language and Information, 1999) "Or when he commits binary and swapfiles into his git repository." Committing binary files is such an atrocious act. I for one am glad that github does not condone such immoral acts by showing the difference between images.
martinced 14y ago
By your logic we'd still all be reading books as they were typeset hundreds years ago (hint: they're pretty dense and definitely not convenient to read) and we'd all be driving while trying to decipher poorly typeset roadsigns (which is very, very dangerous). All it takes is a few researchers to actually care, research, blog, write papers about the subject and then we all benefit from that research. Regarding the goold old "eat your own dog food" logical fallacy... By your logic, an engineer should not be allowed to do research, say, on electrical cars if he isn't himself driving an electric car. Sounds pretty extreme to me ; )

idan 14y ago

A fantastic deep-dive. If you want to know just how deep you can take the craft of presenting beautiful type, this is a great example.

mh- 14y ago

Misspelled letters within the first twenty words of an otherwise-excellent article about letterfitting. :)

lucb1e 14y ago

Am I the only one where the typeface on the site bugs? Or perhaps it's supposed to look like this, but it's really hard to read. Windows 7 with Chrome, no uncommon setup. Is's really ironic how most typography blogs have this problem. Same problem occurs on Linux too by the way, which I run on my desktop (this is a laptop). No localized issue.

anonymouz 14y ago
I also find it hard to read (on Firefox in Linux). For example in "snugly should" in the first paragraph the space between "s" and "n"/"h" seems way too big. In general, the spacing varies wildly and the text looks very uneven. Not sure what causes this and if it's supposed to look like this though.

hayksaakian 14y ago

Sidebar renders poorly on my nexus 7. http://www.imgur.com/1z5Vv.png http://www.imgur.com/1z5Vv.png The math was quite interesting though.

tambourine_man 14y ago
Fixed positioning + allowing zoom is not a good idea.

emanuer 14y ago

Considering that humans are the judge of what constitutes as a well spaced font, one should look at the workings of the human brain. It turnes out we already know the algorithm employed by the visual cortex for edge detection, the _Gabor filter_ http://authors.library.caltech.edu/2653/1/MALjosaa90.pdf http://authors.library.caltech.edu/2653/1/MALjosaa90.pdf Also Wikipedia has a fantastic overview for the Gabor filter: http://en.wikipedia.org/wiki/Gabor_filter http://en.wikipedia.org/wiki/Gabor_filter Of the approaches mentioned in the original article, "wavelet" masks, are the ones closest to the calculation done in the V1. A quick search on http://scholar.google.com http://scholar.google.com for "Gabor space visual cortex" uncovers that much research was dedicated to this topic.

Crake 14y ago

This was really interesting! It's great to see someone taking a quantitative approach to design. Art schools would never teach an algorithmic approach to kerning, but for the programmers/artists who are smart enough to learn it, a breakthrough permitting effective use of this approach would be invaluable.