Examples of vertical grid and progressive line spacing applications

New issues

Come also hurriedly, go also "dash". It's been two months since the last publication of vertical grids and progressive line spacing (above). In turn, look at the last results. Eh How do you feel the side note a little strange?

(demo-6.html)

or refer to my article on typesetting: we know

• The most commonly used line spacing on Chinese internet is about 1.5
• The longer the President, the greater the spacing required. (line spacing is too small for readers to read when changing lines are easy to serial.) line spacing is too large for the reader to feel the text is discontinuous.

It seems that for the 12px font size of the side note, the 24px row height is obviously too large. However, according to the method of the previous article, vertical rhythms need to be consistent between the line spacing of the edges and the body spacing. So in order to maintain vertical rhythm, we can only reduce the left and right side of the line--summary: not reliable. So, how do we adjust the margin spacing, but we can get the vertical rhythms that we're building into effect? This requires that we introduce progressive line spacing .

Progressive line Spacing

In a nutshell, progressive spacing is a complement to rigid vertical rhythms. Vertical rhythms require that each line of the side note and body be aligned. In contrast, progressive line spacing aligns the edges and body--but not every row--but is aligned once for each row. It is usually aligned once every 4 lines or every 5 lines. Let's review the previous article and know that the example that was started in this article, "Configuration" is as follows:

• Text: Font size 14px, line spacing 24px, after the paragraph from 24px
• H1: Font size 24px, line spacing 24px, segment before 24px, segment back from 24px
• H2: Font size: 18px, line spacing 24px, paragraph before 12px, paragraph after 12px
• Side note body: Font size 12px, line spacing 24px, after paragraph from 24px
• Edge-note border: thick border 1px, inner filler 11px--don't forget to move it up 12px.

We modify the margins of the margin and the spacing is 18px. Then the situation would be like this:

(demo-9.html)

Do not know you reader found no, why the first line of the baseline is not aligned? This is because the flow layout aligns the blocks of text to the top of the row height. The following figure:

So, here, in order to align the first line of the baseline, we're going to drop the side note down a certain pixel. The hateful thing is, the number of pixels that need to be dropped--this very complex problem, at least after a few attempts, has not seen a rule, but only to draw the following three conclusions:

• Set body line height is H px, side note line high is H ' px, need to drop the value of D px, then, this value will be between 1/2 (H-h ') < D < (H-h '). ①
• If the line introduces a Western character (half-width number or letter), the baseline of the line is sometimes offset by one pixel over the absence of a western character.
• Different font rendering engines may behave differently.