[klodolph]

The black keys are in the wrong place! The black keys within a group are supposed to be spaced farther apart, and there should be less space between groups.

For example, C# and D#, in the diagram, are too close to each other. C# should be farther left, and D# should be farther right.

[robbrown451]

Yes that is true and is a common mistake. The keys at the back of the keyboard should all be about equal width to one another, regardless of whether they are black or white.

There is an interesting "fudging" that has to happen, though, because 5/12 is not exactly equal to 3/7 (each of which should be the width of CDE relative to CDEFGAB.... 5 keys out of 12, or 3 white keys out of 7 white keys)

I actually discuss it in detail here (and all the weird ways people mess this up): https://youtu.be/xwKlKcymfDs?t=33

Here is some JavaScript code for calculating where each key should go. You can paste in the final numbers at bottom if that's easier. They start at the left of C (zero) and assume each white key is width of 1:

  var firstFiveWidth = 3/7; // c-e, 3 white keys
  var lastSevenWidth = 4/7; // f-b, 4 white keys

  // assume each of the 5 is equal width at back
  var cSharpMiddle = firstFiveWidth * (3/10);
  var dSharpMiddle = firstFiveWidth * (7/10);

  // assume each of the 7 is equal width at back
  var fSharpMiddle = firstFiveWidth + lastSevenWidth * (3/14);
  var gSharpMiddle = firstFiveWidth + lastSevenWidth * (7/14);
  var aSharpMiddle = firstFiveWidth + lastSevenWidth * (11/14);

  // average width of what a key in first five and a
  // key in last seven should be (then halve it)
  var halfBlackKeyWidth = (((firstFiveWidth/5) + (lastSevenWidth/7))/2)/2;

  var keys = [
    0,
    cSharpMiddle - halfBlackKeyWidth,
    1/7,
    dSharpMiddle - halfBlackKeyWidth,
    2/7,
    3/7,
    fSharpMiddle - halfBlackKeyWidth,
    4/7,
    gSharpMiddle - halfBlackKeyWidth,
    5/7,
    aSharpMiddle - halfBlackKeyWidth,
    6/7
  ]
  console.log("black key width: " + (halfBlackKeyWidth*2*7))
  console.log(keys.map(function(item){ return item *7}))

And here are the numbers I got: ( C to B)

  black key width: 0.5857142857142857
  [
   0,
   0.607142857142857,
   1,
   1.807142857142857,
   2,
   3,
   3.564285714285714,
   4,
   4.707142857142857,
   5,
   5.85,
   6
  ]

[squeaky-clean]

Wow, I've been playing keyboards for years (as a hobbyist) and never noticed this but you're 100% right. Now I can never unsee this.

[kazinator]

It more or less of has to be: the string courses are evenly spaced inside the instrument, and it probably behooves the implementation of the entire linkage from the key to the hammer to be in one plane, on-center with the string course.

[yesenadam]

Hmm I don't agree. That spacing looks right to me, but, now you mention it, the E,F,B and C notes look quite a bit too wide, I think that's the problem.

[klodolph]

The spacing of the black keys is so far from the actual spacing on a real keyboard that I question how it could possibly look right to you. I would love to know if you actually have a real physical keyboard on hand, like I do, or if you are just going based on memory.

[robbrown451]

You should check out google images for piano key clip art. Almost all of them get it wrong. They assume a black key is centered between two white keys, but that is only true for g#.

The width of all keys, white or black, should be equal to one another at the back of the keyboard.

The width of the white keys should be exactly equal to one another at the front of the keyboard.

Those can't both be true (since 5/12 isn't equal to 3/7), so the former has to be fudged a bit.

My formula is in a different comment. :)

[userbinator]

For some reason, this reminds me of "What happens when you ask people to draw a bike": https://news.ycombinator.com/item?id=17699017

The black and white keys are instantly recognisable as a piano, but need a bit more inspection to notice the error.

[robbrown451]

Interesting. Some people got the bike right. I'm quite sure I can draw a proper bike, but I have a long history in drafting and mechanical design.

[noduerme]

Literally just came across this thread after playing piano for the last couple hours, and I wouldn't have noticed it if it weren't pointed out. I think when you play you're just used to seeing all kinds of shorthand. I remember portable synthesizers from the 80s that actually did have this kind of relative size on black keys.

[kazinator]

The spacing of the white keys is correct in the sense that they are of equal width. However, the black keys on a real keyboard are not centered between adjacent white keys (except for the G# between G and A).

The placement so that the two groups of black keys, C#-D# and F#-G#-A#, are a little bit wider than the naive on-center placement, as if they were repelled from each other.

The thin parts of the white keys that are between the black keys are evenly spaced with the black keys: i.e. all 12 semitones are equally spaced at the back. The rear ends of the keys directly link to the striking mechanism, which lines up with evenly-spaced string courses.

[JellyBeanThief]

https://www.shutterstock.com/image-vector/realistic-piano-ke... shows a more correct image.