In order to reinforce the spatial order and structure of the page it is important to cross align side notes, captions and headlines.
In the first example 21 lines of caption text cross align with 12 lines of body text. In the second example 7 lines of caption text cross-align with 10 lines of body text. In the third example 4 lines of caption text cross-align with 5 lines of body text.
When I employ cross alignment I usually aim to have the first line and the last line of a heading or caption aligning with the body text. If the text allows you can also aim for sophisticated cross alignments such as 4 lines of caption to 3 lines of body text; this would be used when you have perhaps a 12 line side note. Many other configurations are possible by varying the leading.
Web
Same rules apply. Cross-align navigation, quotes and captions. I do not however use this rule in all my web work. Sometimes I use the same leading, expressed as a multiple in the stylesheet, which remains the same for all text sizes. I use this technique when color is more important than cross alignment.
