9 ms·
A Beginner’s Guide to Kerning Like a Designer
- chris_wot 11y agoOnly show this to someone you really hate. [1] 1. http://xkcd.com/1015/ http://xkcd.com/1015/
- KineticLensman 11y agoThis [1] doesn't concentrate on kerning as such, but it is my favourite typeface-related comic strip. [1] http://wondermark.com/650/ http://wondermark.com/650/
- pavlov 11y agoI know a guy who has owned various-sized printing companies since the late seventies. He told me that, when desktop publishing started happening in mid-'80s, the consensus in his business was that computers wouldn't have much of an impact on "real printing" because the kerning you got from digital sources was so bad. When I hear people saying "there's no way a computer could do that properly", I think of 1985 print shop owners confident in how their handmade kerning provides value to customers.
- k__ 11y ago> their handmade kerning provides value to customers Did it?
- ryandrake 11y agoI'd love to see an actual measurement of this, if only a simple test. Two otherwise identical websites, one kerned by a professional designer, and one just using some default. Serve each of them to a random 50% of your customers and see which one converts more users or sells more widgets or whatever the metric is. Does the kerned version bring in more value than it cost to have the designer fiddle with the fonts? My belief has always been that all design work should be measured and have to withstand the "does it actually provide value" test, since otherwise, how do you know one design is better than another?
- flycaliguy 11y agoJust sit on the subway and browse the ads above your head. Some will be designed by a pro and the typography will be properly handled. Others will make you want to poke your eyes out if you examine them closely. I'm going to say that yes, 100%, it provides value by creating a more appealing display. Frankly, it's embarrassing to have your brand displayed without the typography handled properly. If you don't see the difference then maybe you should do yourself a favour and not delve into the art of type because there is no turning back once you start noticing the bad stuff.
- drostie 11y agoThe question presented is not whether it makes a stylistic difference visible to those in-the-know but rather whether it makes a motivational difference visible in the actions of the mud-people. Those are two very different questions.
- hodwik 11y agoI worked for a multi-billion dollar finance company that worked primarily with middle and lower class people. Our marketing department swore by bad design. Not just simple, accessible. Intentionally bad. They believed it grabbed more attention, and that their customers felt safe/found them more trustworthy. When we tried out more polished marketing we had measurably fewer responses.
- 1812Overture 11y agoIf it is achieving the intended impact, it's good design not bad design. I've seen looking at direct mail response rates that a very slick polished classy piece can underperform something more FUCKING LOOK AT ME MY LETTERS ARE BIG COLORFUL HERE'S CLIP ART OF A GUY HOLDING CASH!!!!!
- hodwik 11y agoThat's still bad design. It may be good marketing though. Not the same thing.
- pavlov 11y agoI'm sure it did, to a point. Customers wanted professional-looking results. But eventually digital became good enough to be largely indistinguishable to the unprofessional eye, while also being 10x cheaper. Point being: the print shops may have misinterpreted "customers want professional-looking results" as "customers want handmade kerning on offset plates". The specific technique wasn't really relevant, even though it seemed that way to the ingrained pros. (There's perhaps a lesson there to today's web developers who spend their time arguing about frameworks, languages and flat design icons rather than customer-oriented results.)
- jdnier 11y agoJust ask ad agencies. I worked for an old-style typesetting outfit as late as 1995 that still did lots of display type work for ad agencies. I found this kind of remarkable, considering how long desktop publishing had been around. The agencies outsourced the work (kerning and other typographic best practice) to "the professionals" because, well, it was still a valued specialist skill.
- pkaye 11y agoMy dad used to run a printing shop till the late 80s when he passed away. I think the bulk of his business was producing 10k-100k copies of books/documents for people at a lower unit code than any other methods. Once those machines were setup, they could crank out 3-4 copies a second. He used to do a lot of the game manuals for a video game company and they used to give him finished video games every year for us kids to play.
- mruniverse 11y agoI wonder what the equivalent is for developers. What do we mistakenly see as our "real value". Something we think that can't be replaced or become irrelevant.
- 1812Overture 11y agoIdentifying a problem, choosing an algorithm to solve it, and implementing that algorithm. I'd say 1 is the hardest for computers and 2 and 3 are the hardest for humans. There's a cliff in artificial intelligence that people have been saying is just on the horizon for decades. Eventually they'll be right.
- tripzilch 11y agoI hope it's fixing bugs.
- glossyscr 11y agoNice post but the essential info is missing—the CSS property font-kerning. The font-kerning property controls the usage of the kerning information; it controls how letters are spaced. The kerning information is stored in the font, and if the font is well-kerned.
- ekianjo 11y agoHere: https://www.w3.org/TR/css3-fonts/#propdef-font-kerning https://www.w3.org/TR/css3-fonts/#propdef-font-kerning Question is, how do you find fonts that have proper kerning information attached ?
- glossyscr 11y agoJust get the expensive all-time classics from the big guys like URW++, Linotype etc. EDIT: Or just go to MyFonts.com, to any font and type a sample text which includes some kerning, such as the word 'WATER'; eg try it here for the Helvetica Neue family and voilà it has kerning: http://www.myfonts.com/fonts/linotype/neue-helvetica/ http://www.myfonts.com/fonts/linotype/neue-helvetica/
- mozumder 11y agoIf you have time, then add them into the font yourself with FontForge.
- jahewson 11y agoMost do. Try the word "AVAVA" as a test. You'll also need to set `text-rendering: optimizeLegibility;` for WebKit.
- imurray 11y agoA kerning game: http://type.method.ac/ http://type.method.ac/
- maroonblazer 11y agoMy god this is wonderful and addictive. Is there something similar for leading?
- JohnHammersley 11y agoThanks for sharing this -- it's remarkably addictive. It's not the first thing one would think of when coming up with a game design concept, but they've somehow made it work! I wonder if they're storing all the results to do an analysis on peoples' eye for kerning.
- scrollaway 11y agoThis is indeed surprisingly addictive. As a game designer, I love it.
- liotier 11y agoCrowdsourced manual kerning !
- melling 11y agoThis recent article is also useful if you want to learn a little more about typography: https://medium.com/martiancraft-s-syndicate/why-san-francisco-b86bd45f3273 https://medium.com/martiancraft-s-syndicate/why-san-francisc...
- laxentasken 11y ago>>designschool Got a big pop-up over my screen asking for signing the mail list while reading the article. I'm sorry but into the trash it goes.
- itp 11y agoI got the same pop-up. I clicked the X button, which didn't seem like too much of a burden to continue reading this relatively interesting and free content.
- marssaxman 11y ago...thereby contributing to the problem by reinforcing the irritating behavior.
- Splendor 11y agoIt's hard to see their design advice through all of the clutter. http://i.imgur.com/lSTSTQk.png http://i.imgur.com/lSTSTQk.png
- doki_pen 11y agoIt seems that the rules are pretty well defined. Why can't computers auto-kern?
- 542458 11y agoThey can. Most software (MS Word) will just use kerning pairs predefined in the font, but more complex design software (Adobe InDesign and Illustrator, for example) can automatically optically kern text - it works pretty dang well. Maybe I'm not picky enough as a designer, but I only very rarely kern something by hand, and that's usually when I'm working with some weird display font that auto kern doesn't handle well and has poorly defined kern pairs. Sometimes logos as well, but for 99% of text it's really not worth the trouble IMHO.
- kazinator 11y agoYou're probably not gonna kern by hand anything that isn't an attention grabber in a huge font, or a logo or product label, and the like.
- egwynn 11y agoI wondered the same thing myself. I suspect they can/do, but that their guesses aren’t great for general, more complicated fonts. That might make it inappropriate for larger print work.
- JohnHammersley 11y agoIf you want to produce a nicely typeset document, LaTeX (or XeLaTeX) is the way to go -- it does almost everything you could want (kerning-wise) automatically, and has an active community supporting new packages and new fonts. There are also many templates[1] to help you get started. [1] https://www.overleaf.com/latex/templates https://www.overleaf.com/latex/templates (and if you give Overleaf a try let me know what you think - I'm one of the founders, and always like to hear feedback from new users)
- jahewson 11y agoNo, the article is about kerning a typeface, not simply rendering existing kerns contained in font files. LaTeX does many things but auto-kerning is not one of them. It can only execute embedded kerning pairs (metric kerning) it can't infer its own (optical kerning).
- elbigbad 11y agoKerning.js is a really good css/js library to include in your projects if you're interested in this stuff but not a professional. It lets you take control of what's going on with the typography on your site. http://kerningjs.com/ http://kerningjs.com/
- empressplay 11y agoYou don't need a guide, you need an eye for it.
- jack_jennings 11y agoWhile the tips presented are fine if you actually need to kern something, in realty the only time you would ever need to do this is if you're using a font that is poorly made, or if you're designing your own typeface. If you've paid for a decent typeface, it more than likely works as it should and has all of the common kern pairs already defined. If you're typesetting a language that is less common, you may run into combinations of letter that haven't been kerned, in which case any designer worth their salt would be happy to get an email showing the issue (so they can amend their font files in this and other typefaces they have produced). In the end kerning is a very very time consuming process, and you can save yourself a lot of time just by starting with a decent typeface in the first place.
- rangibaby 11y agoIt will be less of a problem in the future, but a lot of the versions of classic fonts floating around have funky kerning. Neue Haas Grotesk is the first properly digitized version of Helvetica, for example.
- jack_jennings 11y agoI agree, and there will always be bad digitizations or just bad fonts. My practical advice is mostly that if you find yourself having to kern more than one or two pairs you're better off finding a better typeface.
- hammock 11y ago>in realty the only time you would ever need to do this is if you're using a font that is poorly made, or if you're designing your own typeface. Or logo design. A few examples: FedEx http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/11/FedEx.png http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/... USA Network http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/11/usa.png http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/... ebay http://www.howdesign.com/wp-content/uploads/i-also-find-this-to-be-acceptable-13454-1347576021-1.jpeg http://www.howdesign.com/wp-content/uploads/i-also-find-this...
- Angostura 11y agosee also the nicely named Reddit sub /r/keming
- amenod 11y agoI wonder why this process is not automated? I mean, it should be fairly easy to create an algorithm which would adjust letter spacing based on the actual printed letter. Another milestone for AI, now that Go is conquered? ;)
- jahewson 11y agoIn 1994 Adobe created an automated kerning system which outperforms humans. It's built into InDesign and Illustrator. They call it "optical kerning".
- Rumudiez 11y agoIt is, actually, and in two instances, even. Type designers use software to automatically create all common kerning pairs and to then try its best to align them on its own, after which the designer goes through them one by one to correct the program as necessary. The other way this can be used is with any endpoint design software like InDesign, which has the option to set type in the 'metric' or 'optical' modes [0]. Metric uses the font's built-in kerning pairs (if any exist), while optical overrides them with the application's own algorithm. If you're using a font that doesn't have built-in kerning pairs, though, you're probably better off choosing another typeface than blindly trusting this software in hundreds of pages of body copy. Browsers AFAIK still don't support kerning pairs and rely on their own hideous kerning algorithm, toggled on through `text-rendering: optimizeLegibility;` in CSS. [0] http://type-ed.com/2013/12/08/metrics-vs-optical/ http://type-ed.com/2013/12/08/metrics-vs-optical/
- jahewson 11y agoWebKit has supported kerning pairs via `text-rendering: optimizeLegibility;` since 2010. It works just fine.
- mrestko 11y agoMost heinous example of poor kerning in a professional publication: http://i.imgur.com/Z1869gK.jpg http://i.imgur.com/Z1869gK.jpg
- populacesoho 11y agoThe game is totally cool. It's not just about typespacing. It really tests your eye, eye for compositions and relative distances. If you can do this ( attain scores 75+ ), you can probably draw, take photos, and assess art. My final score : 81 I got 2 100s.
- jahewson 11y agoI see quite a few HN commenters asking, "why isn't this automated?" Well, it is! In 1994 one of the pioneers of vector fonts, Peter Karow, worked at Adobe on "optical kerning", which inferred kerning pairs for a font automatically. Adobe's algorithm models the whitespace between two letters as a viscous fluid which resists flowing into tight areas. They compared it to hand-kerning and found that neither approach was perfect, but that there were 120% more deficiencies when kerning by hand and 30% redundancy in the kerning pairs. So computers, can and do kern better than humans. However, there are still many poorly kerned fonts around, even digital versions of classics such as Times don't ship with particularly good kerning pairs, so designers often find themselves having to tweak kerns.
- gioele 11y agoAnd do not forget Igino Marini's iKern [1] used to kern plenty of forts. [1] http://ikern.com/k1/ikern/the-ikern-theory/ http://ikern.com/k1/ikern/the-ikern-theory/
- sp332 11y agoA little Google easter egg: https://encrypted.google.com/search?q=kerning https://encrypted.google.com/search?q=kerning or https://encrypted.google.com/search?q=keming https://encrypted.google.com/search?q=keming
- kriegslustig 11y agoKerning.js sounds like a horrible idea. It's bloating your DOM, real bad. That's especially bad for SPAs that are constantly diffing and changing the DOM. The project also has a ton of open and unanswered issued, of which some sound pretty severe. Edit: Grammar
- seanmcdirmid 11y agoFor those unfamiliar with how easy it is to get kerning wrong, I suggest this fantastic sub-reddit: https://www.reddit.com/r/keming https://www.reddit.com/r/keming I remember old terminal style fonts where pom would read like porn, and vice versa. Fun days.