Show HN: KernType, a typography game made with Raphaël(type.method.ac)
type.method.ac
Show HN: KernType, a typography game made with Raphaël
http://type.method.ac
54 comments
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.
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.
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?
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.
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.
It's svg so you can just zoom in and out.
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!
Also, scored 93. Woo!
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.
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.
[deleted]
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.
Also, could you add a few different levels of difficulty using more letters and tougher fonts?
Once again, this is nice.
nicking an idea from a friend on IRC: you should set this up as a service for like $5 to crowdsource kerning for logos
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.
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.
I'll sign up if it goes over concepts that will help me design better!
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
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/
http://www.pgdp.net/c/
I like it. Very much like Luis von Ahn's "human computation" projects (reCAPTCHA, etc)
GREAT idea
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.
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.
Uses same shortcuts as Photoshop -- so if you are a hard-core kerner in Photoshop, try out the same keys. Pretty slick!
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.
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.
Please let me deselect letters while I'm kerning them. I find it hard to see the spacing with one letter in bright blue.
You should be able to deselect them by click anything else, if it doesn't work let me know what browser you're using.
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.
I could by clicking somewhere else on the page.
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.
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.
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.
Watch out! It's a nerd-snipe for typographers.
Brilliant and fun. All those years of hand kerning type pays off, finally.
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.
One suggestion: a way to move multiple letters at the same time.
Cool stuff. Typophile and Forrst links in the footer are broken.
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.
How about a slider to scale the spacing between characters and also letting me move the first and last characters?
Just hit 100/100 on screen 3, "holly," in... wait, how do I find out what typeface it is after kerning?
FF Zine Slab Black Italic
http://new.myfonts.com/fonts/fontfont/zine-slab/
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.
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.
Fun, simple, & beautiful. Though, I wish I could turn my monitor upside down.
In WAVE, the A is higher than the W and V. Is that supposed to happen? (MacBook Pro, OSX Snow Leopard)
Thanks for the ego stroke... 91/100! I'd much rather play this than solitaire. :)
edit: typo
edit: typo
I got 100/100 four times, but I had to squint a lot. :)
o/ another squinter here, got 92/100 in the first try :)
93/100, which is surprising considering I was never very good at keming.
77/100 :)
As a developer, this seems like something that should be handled automatically by a typeface.
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.
Also, if you ever designed a typeface (not very likely) then this is a skill you absolutely need.
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.
Adobe (for example) offers automatic kerning. It’s great most of the time but not all of the time.