Show HN: KernType, a typography game made with Raphaël

[JoshTriplett]

I tried this a couple of times, but the first and last letters seem so far apart that this becomes less about "make it look good" and more about "make it look less terrible". I can make the letters look great together with the first letter, which results in nearly a full letter's worth of space between the penultimate letter and the last. Perhaps this just represents an artifact of drawing the font extra-huge, but these fonts all feel like they need condensing to look decent.

[duopixel]

People often track too tight because it looks good when it's large type at a close distance. However, this is absolutely terrible for legibility in real life conditions where you either look at small type from close or large type from far away.

[Adaptive]

Good kerning can be done with tight and loose letter grouping. I much prefer the loose tracking here as it give much greater precision to the final submission.

[alextebbs]

I felt like this as well. I think it needs variable font sizes and the ability to move the first or last letter and then this would be great fun.

[kenferry]

I was originally thinking the same, but I think it's because I was considering everything to be body text in a paragraph. If you think of them as potentially word marks, it seems valid to use tight OR wide overall spacing, really more of a stylistic choice.

Also, scored 93. Woo!

[kreek]

In a past life I was a design major so here's a tip for kerning letters. Kern letters in groups of three, then step back and look at whole word, repeat until it looks balanced. Oh, and a bonus tip the number 1 and l (lowercase L) almost always have too much space to the left of the character, I see so many designs with '2011' badly kerned.

[glhaynes]

I've heard it recommended to flip the piece 180 degrees and look at it that way. I expect great type designers don't do that, but it's given a bit of insight to me a couple of times.

[alphakappa]

This is lovely. Could you randomize the order in which you present the words so that I don't have to go through the same word list every time I visit the website?

Also, could you add a few different levels of difficulty using more letters and tougher fonts?

Once again, this is nice.

[Palomides]

nicking an idea from a friend on IRC: you should set this up as a service for like $5 to crowdsource kerning for logos

[duopixel]

Ah, that's quite clever! Upload as svg and let people kern the letters.

Right now I'm using it to get people interested in my upcoming project [Method of Action](http://method.ac/), an online course on design for programmers.

[cpeterso]

A related idea is the Distributed Proofreaders, a website that crowdsources proofreading of OCR'd public domain books. Unfortunately, proofreading is not very "gamifiable".

http://www.pgdp.net/c/

[tlrobinson]

I like it. Very much like Luis von Ahn's "human computation" projects (reCAPTCHA, etc)

[ecaroth]

GREAT idea

[leot]

I think you need to take the absolute value of the error, rather than the simple sum of negative and positive. I keep getting 100 when I'm slightly off in two directions.

[duopixel]

I'm using the absolute value. The game has "tolerance" depending on the amount of letters you have to kern. So, if you have to kern 1 letter, you get 1px tolerance. 5 letters has 5px tolerance, and so on.

[bprater]

Uses same shortcuts as Photoshop -- so if you are a hard-core kerner in Photoshop, try out the same keys. Pretty slick!

[duopixel]

Thanks for noticing! I put a pretty large effort on making it completely usable without touching the mouse. Safari (but not Chrome) has some gotchas that make it a real pain to work around.

[endtwist]

Please let me deselect letters while I'm kerning them. I find it hard to see the spacing with one letter in bright blue.

[duopixel]

You should be able to deselect them by click anything else, if it doesn't work let me know what browser you're using.

[ugh]

I could by clicking somewhere else on the page.

[zachwaugh]

Pleasantly surprised that it worked perfectly on my iPad with touch and dragging. I always read HN on my iPad and so many sites, especially anything keyboard driven, become useless.

[ugh]

Great fun! I also like that you can submit your own version if you think it’s better. It’s a nice touch that visibly acknowledges the subjectiveness of the game.

[wolfparade]

I'm not a designer so i don't really understand the importance of kerning, but I do run http://use.fontorie.com. So I'm interested in making it easier for developers to do design. I'd like to incorporate kerning if you'd help.

[rcthompson]

Watch out! It's a nerd-snipe for typographers.

[Adaptive]

Brilliant and fun. All those years of hand kerning type pays off, finally.

[stephth]

Nice! Beautiful well thought design, nicely balanced game, and such an intuitive way to understand kerning: let your visual intuition guide you.

One suggestion: a way to move multiple letters at the same time.

[mshafrir]

Cool stuff. Typophile and Forrst links in the footer are broken.

[jamescham]

Disappointed that I got 86/100 but this reminds me of sitting in front of a Mac in college obsessively adjusting the distance between Y and o.

[beaumartinez]

How about a slider to scale the spacing between characters and also letting me move the first and last characters?

[callahad]

Just hit 100/100 on screen 3, "holly," in... wait, how do I find out what typeface it is after kerning?

[robert-boehnke]

FF Zine Slab Black Italic http://new.myfonts.com/fonts/fontfont/zine-slab/

[forbes]

I think this is a really clever way to get people interested in your upcoming courses. I enjoyed the short test, did much better than I thought I would, and look forward to seeing what you release when your 'Design for programmers' course is launched.

[yariang]

A thought, it would be great if it could explain what mistakes you made. Knowing I got a 0/100 is great but I'd really like to know why :) That would turn it from leaning through trial and error into a very useful learning tool.

[stuartjmoore]

Fun, simple, & beautiful. Though, I wish I could turn my monitor upside down.