I stopped at 21 px for the main font size because at some point the text will become too big and not serve its purpose.

Naturally you can’t just take 12px text and put it in 360px column and hope that everything will look great. The real design process is far more complex but is interesting when patterns emerge like in this case.

I would have measured against x-height rather than nominal size. If the extenders are long they tend to fill up space that otherwise would be interline space, so that the nominal size is inflated. Also the nominal size of a font corresponds may include significant interline space.

It is unfortunate that CSS treats fonts with the same nominal size as if they were interchangeable.