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

http://type.method.ac

by duopixel • 15 years ago

268 53 15 years ago

type.method.ac

rorrr• 15 years ago

Great game, though a bit subjective.

sprice• 15 years ago

I personally think it's more about having a few rules + math than having a subjective "eye for design". fwiw i got 90/100.

stuartjmoore• 15 years ago

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

endtwist• 15 years ago

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

ugh3• 15 years ago

I could by clicking somewhere else on the page.

duopixel7• 15 years ago

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

timknauf• 15 years ago

For the first three or so I could de-select by clicking elsewhere, but then it no longer worked. My Google Chrome version string is "14.0.835.202 (Official Build 103287) m". I'm currently on a Windows machine.

mshafrir• 15 years ago

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

ugh3• 15 years ago

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.

imjoel• 15 years ago

Thanks for the ego stroke... 91/100! I'd much rather play this than solitaire. :)

edit: typo

cpeterso2• 15 years ago

I got 100/100 four times, but I had to squint a lot. :)

nprincigalli• 15 years ago

o/ another squinter here, got 92/100 in the first try :)

Palomides• 15 years ago

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

ecaroth• 15 years ago

GREAT idea

cpeterso2• 15 years ago

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/

thatjoshguy• 15 years ago

http://www.google.com/recaptcha

duopixel7• 15 years ago

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.

auston• 15 years ago

I'll sign up if it goes over concepts that will help me design better!

tlrobinson2• 15 years ago

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

kreek• 15 years ago

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• 15 years ago

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.

beaumartinez• 15 years ago

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

jamescham• 15 years ago

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.

bprater• 15 years ago

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

duopixel7• 15 years ago

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.

sneak• 15 years ago

I don't use Photoshop much, but this is the kind of attention to detail that the world needs more of. Rock the fuck on, sir.

JoshTriplett• 15 years ago

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.

alextebbs• 15 years ago

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.

patrickaljord• 15 years ago

It's svg so you can just zoom in and out.

duopixel7• 15 years ago

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.

Scottish• 15 years ago

Hi, I just wrote to you on Twitter before seeing this thread. I agree with you here, but the issue is that your default setup is close, large type :) Zooming with the browser does indeed help. Perhaps you should call attention to the fact that one can do that?

Adaptive2• 15 years ago

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.

kenferry• 15 years ago

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!

rcthompson• 15 years ago

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

wolfparade• 15 years ago

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.

stephth• 15 years ago

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.

tlrobinson2• 15 years ago

93/100, which is surprising considering I was never very good at keming.

alphakappa• 15 years ago

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.

leot• 15 years ago

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.

duopixel7• 15 years ago

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.

callahad• 15 years ago

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

robert-boehnke• 15 years ago

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

malkia• 15 years ago

77/100 :)

yariang• 15 years ago

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.

Adaptive2• 15 years ago

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

wavephorm• 15 years ago

As a developer, this seems like something that should be handled automatically by a typeface.

Nat0• 15 years ago

It would be really interesting to see software that would accomplish this. The tricky part is that the correct kerning changes based upon what font size the text is. Most typefaces are optimized for body copy, not headlines.

ugh3• 15 years ago

Adobe (for example) offers automatic kerning. It’s great most of the time but not all of the time.

duopixel7• 15 years ago

Yes, it is. But sometimes you need to adjust it depending on your needs. For example, highway signage needs extra tracking (space between letters) and you often need to adjust it manually.

Also, if you ever designed a typeface (not very likely) then this is a skill you absolutely need.

zachwaugh• 15 years ago

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.

forbes• 15 years ago

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.

DanBC• 15 years ago

In WAVE, the A is higher than the W and V. Is that supposed to happen? (MacBook Pro, OSX Snow Leopard)

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

Related Stories