Vertical Rhythm in iOS Design
Post in Progress
I've got a hunch that vertical rhythm is a somewhat mysterious idea for most interface designers. I know it has been for me. Coming into design without prior experience in print media, I've been slow to experience many of the big ideas that profoundly impacted design for the last few millennia.
For screens, vertical rhythm has been implemented since the beginning. If you've got paragraphs you've got vertical rhythm right? Unfortunately - No. Vertical Rhythm on the screen has been a slow building art still being wrangled by interaction designers constantly wanting more flexibility in the way typography, and content pile up into the interfaces we know.
On the Web, the tools for designers to set a vertical rhythm have basically been in place for a long time as well. The line-height property was baked into the very first version of CSS and works marvelously on IE4. But, it did take a while for many of these tools to evolve into what they are today. Wilson Miner's Today, baseline grids are just about as important for web design as Sourceforge was in 2006. Compass, the popular Sass boilerplate has a great baseline grid baked in - GitHub is teeming with them.
On iOS, we see bit of a different story. Apart from a quality article from Aen Tan discussing the idea, vertical rhythm for iOS is one of the oft-neglected aspects of the interface conversation. We tend to focus on other features with application wide implications; Navigation Patterns, Button Styles, "Flatness", usually steal the show. Nonetheless, vertical rhythm in iOS design is a critical piece to the composition of a noteworthy application, especially in the new iOS environment of two device heights.
Let's look at some Table View examples on the iPhone 5 display height - 1136px.
These are some good examples of a few of the different patterns you'd see in a UITableView class and they're great candidates for studying vertical rhythm. One of the ever troubling parts of iOS UI design is finding the right sizing for blocks of text,