Practice — Visual Design Fundamentals (9 questions)

You inherit a mid-size web app's codebase and audit the CSS for font sizes actually in use. You find: 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 24px, 28px, 32px, and 36px — fourteen distinct values, none of them documented anywhere, applied inconsistently (two different components both labeled "card title" use 17px and 18px respectively). Body paragraphs are set at 14px with no explicit line-height (rendering at the browser default of roughly 1.2x), and those paragraphs stretch the full width of the content column, which is unconstrained and often exceeds 120 characters per line on a wide monitor.

1. Propose a replacement type scale (a specific set of sizes, with the ratio or logic you used to generate them) and explain why a team should adopt a fixed scale instead of the current fourteen-value sprawl.
2. What's wrong with the current body-text setup, specifically — name both problems and the mechanism behind each.
3. What would you change about the line-height and the layout to fix it, with concrete values?
4. How would you get engineering to actually adopt the new scale rather than the fix living only in a design file?

A body paragraph on a wide desktop monitor stretches edge-to-edge, rendering at roughly 130 characters per line.

Per the readability range this subject describes for body copy, what's the actual target range for characters per line (including spaces)?

A developer sets body text at 16px with no explicit line-height, so it renders at the browser default of roughly 1.2x.

Per this subject's eye-mechanics reasoning, what line-height range should 16px body text actually use?

A designer reviewing a spec for 8-point-grid compliance finds a component with 13px padding and a 22px gap between elements.

Per the 8-point spacing grid convention, are these legal values?

A brand refresh redesigns a product's primary button into an unfamiliar, asymmetric shape unlike any button pattern users have seen elsewhere, and ships it product-wide, including in the core app.

Using the operated-vs-perceived distinction from this subject, why is this specifically risky?