: Should Widgets Follow the Vertical Rhythm? When designing for a vertical rhythm on the web, should form elements also follow along with the rhythm? I am currently working on developing a new
When designing for a vertical rhythm on the web, should form elements also follow along with the rhythm?
I am currently working on developing a new set of guidelines and patterns for an enterprise web based application, including developing both a vertical and horizontal rhythm -- something the traditional product has lacked in the past. This is the first time I've actually paid that much attention to the vertical rhythm, so I've been reading up on it a lot.
I've found one source particularly useful, both in terms of documentation and looking at their CSS as an example. However, when I reached the section about form controls (e.g., buttons) the cadence fell apart. At least, that I could see.
The example was a 6px vertical rhythm. But the default <button> was defined as 32px, with no additional margin.
Should the form controls also fall into the rhythm, or am I missing something when it comes to the controls lining up with the overall page rhythm?
More posts by @YK2262411
1 Comments
Sorted by latest first Latest Oldest Best
They should. Theres no logical reason to exclude anything from your vertical rhythm.
Traditionally vertical rhythm isn't something that has been given much importance in web design (nowhere near as universally as in print design at least). Partly due to technical limitations—it's a lot harder to keep a consistent vertical rhythm with baselines and heights and margins and padding etc. throughout your design when you are coding 4 or 5 metrics that affect your vertical alignment on each and every element on your page, especially when you are using relative units on deeply nested elements that will reflow depending on an near-infinite number of browser widths. Throw in browser inconsistencies (form elements especially have always been inconsistent depending on browser and OS) for good measure.
A baseline grid is a means to an end—a tool and guide. Sometimes you need to break that grid and use your judgement to get a design to 'feel right', and that is perfectly ok. But you need to understand what and why you are making that decision.
If you are designing a framework or set of guidelines you should definitely take form controls and anything and everything in to account. Many wouldn't, and don't, but you should.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.