Cards fill their fields edge to edge at every breakpoint; the guides show whether card edges land on column lines.
measuring…One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
A much longer body. Margins define a type area, the type area divides into fields, and a field is an integer number of text lines tall. The vertical gutter between two fields is exactly one line, which is what makes the arithmetic close — or should.
One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
The same row with and without rhythm: with it, card heights should be whole raster lines and the text should seat on the drawn baseline.
measuring…One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
A much longer body. Margins define a type area, the type area divides into fields, and a field is an integer number of text lines tall. The vertical gutter between two fields is exactly one line, which is what makes the arithmetic close — or should.
One line of body copy.
Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.
A much longer body. Margins define a type area, the type area divides into fields, and a field is an integer number of text lines tall. The vertical gutter between two fields is exactly one line, which is what makes the arithmetic close — or should.
A grid in a card's content slot: the inner columns measure the card's content box, and the gutter matches the outer grid.
measuring…Two or three lines of body copy — long enough to wrap at most widths, so the card is taller than its neighbour.