Vertical Rhythm in iOS Design
I've got a hunch that vertical rhythm is a somewhat mysterious idea for most interface designers. I know it has been for me. Starting out in interface 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. 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 a different story. Apart from a quality article from Aen Tan discussing the idea, vertical rhythm for iOS is an oft-neglected aspect of the interface conversation. We tend to focus on other features with product wide implications; Navigation Patterns, Button Styles, "Flatness", usually steal the show. Nonetheless, vertical rhythm for iOS 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 good examples of the different patterns you'd see in a UITableView class. They're great candidates for studying vertical rhythm. Right away we can see the two main styles Table Views can have - Grouped or Plain. The iOS Settings screen on the left is a Grouped Table View - These present a few additional places for Vertical Rhythm to shape the feel of the view. Instapaper and Mailbox, middle and center respectively, are examples of the Plain Table View. Vertically scrucutred data packaged in cells for users to tap into for additional options.
Grouped Table View
Apple gives a few hints as to how they'd like to see spacing setup for titles, cells and navbars in their example with the settings view.
Plain Table View
A plain table is the main