Floating Labels are Problematic

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

I feel like all these issues are handleable, but the damning issue is #3: they need space to move into. Labels can’t go away and need to be readable at all times, so a floating label pattern doesn’t actually save any space. You could have just put the labels where they float to to begin with. It’s still a neat effect, but it doesn’t buy you anything and may just cost you something.

Update: Matt D. Smith:

As the guy who made the original design that the majority of the Float Label craze was based on, I feel somewhat obligated to share my perspective on the matter.

Matt responded directly to the criticism about space saving:

If you agree that the Float Label is an artifact, rather than an instruction, you might also agree that it’s ok to go slightly smaller in text size than a standard label.

And with a smaller text size, say 12px instead of 16px, you would effectively save 4 or more pixels of space. Possibly even 8px since you wouldn’t need to add extra margin below the label in the traditional sense.

We’re really getting down into the weeds here, pixel-wise, but a great interface designer will be painfully aware of a 4px discrepancy and the affects it can have on the whole design if used properly or improperly.

Direct Link →