Design theory: Vertical Rhythms in web design

Original:
http://ued.taobao.com/blog/2009/03/31/vertical-rhythm-and-the-incremental-leading/

Preparatory work

Last year, Qingyun published an article on grid systems. We know that the grid system of the Web page is designed with a fixed lattice layout to make its style neat and concise. Visually, the grid system can be divided into small areas of large areas, clearly show the layout of the page, and can guide the visual line across the plate scanning, reading. From the information point of view, the grid system makes the presentation of information more intuitive, so as to effectively improve readability.
But most grid systems are in the horizontal direction of the layout, in fact, our vertical direction is also a grid system-that is, our "vertical rhythm."

The vertical rhythm is like the one we hold in our hands, with a line of grid lines, arranging the vertical text layout. "The space in typesetting is like the rhythm of music." Although there are many changes in the tempo of music, almost every song has a fixed beat to master the rhythm of the whole song. This is why grid systems generally use fixed-width grid arrays to guide and standardize the layout and distribution of information in Web pages.
In fact, then, in a Web page, vertical rhythms should be controlled by three factors:

• Font size (font-size)
• Line Spacing (line-height)
  Specific definitions can refer to my "font, concise introduction to Typography" line from this section
• Spacing (margin,padding)
  Carefully consider the values of these three factors in order to achieve vertical rhythm.

Start

Base line Spacing

In vertical rhythms, the basic unit is line spacing. Setting an appropriate line spacing across the page is a necessary condition for vertical rhythms to be rhythmic. This line spacing, we will apply to the entire page of all the text, including body text, title, sidebar and so on. For example, we now set our font size (CSS font-size) to 12px, leading (CSS line-height) to 18px. For Chinese XXFarEastFont-Arial, 12px is the smallest font size that can be clearly displayed. To ensure readability, the 12px 1.5 times-fold spacing is 18px. At the same time, 12px/18px is also the most commonly used font size and line spacing in Chinese Internet. We do vertical grids in the vertical direction of the blank page in 18px, just like the lines on our grid book, each gridline is the alignment line of the baseline. Next, we put three paragraphs (12px/18px) as examples to explain.

(demo-1.html)

Spacing between paragraphs

Paragraph spacing between paragraphs is not only beautiful, but also easy to visually distinguish between the paragraphs. Note, however, that the most easily broken vertical rhythms are the vertical gaps in the two elements. So, to make the text of the next paragraph fall in the grid, we want to set the paragraph spacing to a multiple of the base. For example: We can set the front distance of a segment to be 9px, the segment is 9px,9px+9px=18px, or set the segment front (CSS margin-top) to be 0, the segment back (CSS Margin-bottom) is 18px, or the segment front and back margins are 18px. Here, we choose the second scheme, that is, to set the front distance to 0, and the interval to 18px. As you can see in the picture, the text in each paragraph falls into the grid. Closing the grid reveals that the paragraphs are clear, much easier to read than before.

(demo-2.html)