Vertical Rhythm

Some “vertical rhythm” using horizontal grids. What a pain in the ass:



You have to carefully choose the font-sizes and line-heights so that all the content on the page lines up on the grid. So if the base font size is 16px, and a headline is 21px, and you have to make all of that fit on a constant 24px line-height, then the headline needs to span multiple lines (breaking rhythm within itself) but magically aligns back into the grid. This means setting a parent line-height to a multiple of 24px, vertical centering (which is of course complete shady bs unless you use all-caps and have a consistent font height).

Typesetting is annoying and really poorly explained in tutorials online.

Typical tutorials seems to start with “here is the x-height, serifs, sans-serifs, … bam beautiful” few take the time to expand on the relationship between x-height, the vertical centering algorithm, and how that fits into “vertical rhythm.” I guess I’m just spoiled by programming which logically explains all theory and implementation details from start to finish.

Oh and making image height a modulo of the line-height is difficult since we don’t have a real way to render images at any resolution, so a completely responsive solution will need to do some post-layout javascript junk to figure out how tall the headline is and request an appropriately sized image. That or waste bandwidth serving larger images and then downsampling them in the browser (yuck)

Leave a Reply

Your email address will not be published. Required fields are marked *