

Show HN: KernType, a typography game made with Raphaël - duopixel
http://type.method.ac

======
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.

~~~
Scottish
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?

------
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.

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

~~~
duopixel
Yes, it's not about the _how_ , it's about the _why_. Here is a bit of more
perspective: <http://method.ac/blog/design/programmers-designers.html>

------
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.

~~~
sneak
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.

------
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.

~~~
timknauf
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.

------
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.

------
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.

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

------
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.

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

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

edit: typo

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

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

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

------
malkia
77/100 :)

------
rorrr
Great game, though a bit subjective.

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

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

~~~
duopixel
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.

