Examples of vertical grid and progressive line spacing

New Questions

Come and go in a hurry. It has been more than two months since the last release of Vertical Grid and Progressive Line Spacing (Part 1). On the other hand, look at the results from last time. Huh? Why do side bets feel a bit strange?

(demo-6.html)

Or refer to my article about typography: We know

• The most commonly used line spacing on the Chinese Internet is about 1.5
• The longer the line length, the larger the line spacing is needed. (If the line spacing is too small, the reader will easily read the text in series. If the line spacing is too large, the reader will feel that the text is not continuous when reading the line.)

It seems that for the 12px font size of the marginal note, the 24px line height is obviously too large. However, according to the method of the previous article, vertical rhythm requires that the line spacing of marginal notes and the line spacing of the main text should be consistent. So in order to maintain the vertical rhythm, we can only reduce the line spacing on both sides at the same time - summary: unreliable. So how do we adjust the margin line spacing so that the vertical rhythm we have established is effective? This requires us to introduce progressive line spacing .

Progressive line spacing

In general, progressive line spacing is a complement to rigid vertical rhythm. Vertical rhythm requires that marginal notes align with each line of the main text. In contrast, progressive line spacing allows marginal notes to align with the main text as well—but not every line—but every few lines. Generally, alignment is done every 4 or 5 lines. Let's review the previous article and know that the example at the beginning of this article has the following "configuration":

• Body text: Font size 14px, line spacing 24px, paragraph spacing 24px
• h1: font size 24px, line spacing 24px, paragraph spacing 24px, paragraph spacing 24px
• h2: font size: 18px, line spacing 24px, paragraph spacing 12px, paragraph spacing 12px
• Note text: font size 12px, line spacing 24px, paragraph spacing 24px
• Note border: border thickness 1px, padding 11px - don't forget to move it up 12px

We change the line spacing and paragraph spacing of the marginal notes to 18px. Then the situation will be like this:

(demo-9.html)

I wonder if you have noticed why the baseline of the first line is not aligned? This is because the flow layout will align the text block to the top according to the line height. As shown below:

So here, in order to align the first line baseline, we also need to drop the margin down a certain number of pixels. Unfortunately, how many pixels should be reduced? This is a very complicated question. After several attempts, I still can't find a pattern. I can only draw the following three conclusions:

• Suppose the text line height is h px, the side note line height is h' px, and the value to be lowered is d px, then this value will be between 1/2(hh') < d < (hh'). ①
• If the line introduces Western characters (half-width numbers or letters), the baseline of the line may sometimes shift by one pixel compared to when there are no Western characters.
• Different font rendering engines may behave inconsistently.