apply-typography-scale

A UI typography scale uses intentional font sizes, weights, and line-heights to establish clear visual hierarchy. It enforces px/rem sizing, minimum UI readability weights, and line-height constraints to produce coherent, readable text across marketing and dense application interfaces.

Structure visual hierarchy using intentional size jumps between headings and body text rather than mathematical scaling. Combine limited font weight options (400/500 and 600/700) with line-height and line-length constraints to reduce cramped or overly wide text.

Yes, this typography scale works for both marketing pages and dense application interfaces. It provides context-aware recommendations that produce different scale targets depending on whether the UI is for marketing, application, or content contexts.

Set readable line-height by following proportion constraints that reduce cramped text, and use minimum UI font weights of 400. Limit your UI weights to two options, typically 400/500 for regular text and 600/700 for emphasis, to maintain consistency.

Use px and rem for UI typography sizing to prevent em compounding issues across nested elements. Enforcing px/rem usage ensures consistent font sizes and predictable scaling throughout the application interface without compounding errors.