Keyline

A keyline is a vertical line that is never drawn. It is a decision, held across a whole screen, about where a class of content begins: every row’s text starts here, every avatar’s left edge sits there, the title in the bar lines up with the first list item below it. Nothing on the finished screen shows the line. What shows is the absence of raggedness, and what shows when a keyline is missed is a list that feels loose without anyone being able to say which row is wrong.

The word comes from the first Material Design, which specified two keylines for a phone layout and gave them numbers. Content started 16dp from the screen edge, and in a row with a leading avatar or icon, text started 72dp in, so the text of a row with an image and the text of a row without one began at the same place. Those numbers were the useful part: they turned “align things” into a value you could put in a spec and check in a review. Material has since moved on, and the page that named them belongs to the first version of the system, but designers kept saying keyline, because no better word arrived for the thing it names.

It is worth being precise about what a keyline is not. It is not a layout grid, which is a repeating structure of columns and gutters across the page; a keyline is one line, chosen for one kind of content, and it usually does not fall on a column edge at all. It is not a divider, which is a drawn line doing a visible job. And it is not the safe area, which is the region a device guarantees is uncovered: the safe area tells you where content may go, and the keyline is your own decision about where it starts within that.

Where keylines earn their keep is in a list, and specifically in a list whose rows are not all the same shape. As soon as some rows have an avatar, some an icon, and some nothing at all, three plausible text positions exist and every one of them is defensible in isolation. Naming a single keyline makes the choice once, and the rows that have no leading element indent to it anyway. That is the discipline the term is really about: a shared line is worth more than each row being locally correct.