EMCHART – Finding the Right Ratio at a Glance
As you have seen in the two examples above using a relative unit such as
em is a great way to maintain the vertical rhythm of a web page when users
resize text in their browser. On complex Web sites with lots of different font
sizes for hierarchical headlines, body text and captions with bottom
margins for proper spacing between headlines and body as well as
paragraphs, calculating the respective em values might be time consuming
and cause you some headaches.
Let՚s take an easy example: You՚ve set a bottom margin 7 pixels under your
H3 headline of 18 pixels. When the user scales the text size up on his or her
browser the bottom margin won՚t scale and your vertical rhythm will
crumble as the H3 grows in size but keeps the same 7 pixels of bottom