Which technique helps typography scale with screen size?

Which technique helps typography scale with screen size?

• A. Fixed px font sizes
• B. Relative units like em/rem and viewport units
• C. Use only serif fonts
• D. Use uppercase text

Answer: (B)

Using relative and viewport-based sizing is how typography scales with screen size. Relative units such as em and rem adjust font sizes based on another size in the document: em scales with the font size of the parent, and rem scales with the root font size. This means if you increase or decrease the base size, all text set in these units scales proportionally, keeping hierarchy and rhythm consistent across devices. Viewport units like vw (and vh) tie font size directly to the size of the viewport, so text naturally grows on larger screens and shrinks on smaller ones, helping maintain readability without manual tweaks for every breakpoint. This approach is why fixed pixel sizes don’t scale well: they stay the same regardless of the device, which can make text too small on mobile or unnecessarily large on desktops. Choosing a font family or transforming text to uppercase doesn’t address scaling; those choices affect appearance, not how size responds to screen dimensions. Together with strategies like clamp() for sensible min and max sizes, relative and viewport units create responsive, accessible typography across devices.

Using relative and viewport-based sizing is how typography scales with screen size. Relative units such as em and rem adjust font sizes based on another size in the document: em scales with the font size of the parent, and rem scales with the root font size. This means if you increase or decrease the base size, all text set in these units scales proportionally, keeping hierarchy and rhythm consistent across devices. Viewport units like vw (and vh) tie font size directly to the size of the viewport, so text naturally grows on larger screens and shrinks on smaller ones, helping maintain readability without manual tweaks for every breakpoint.

This approach is why fixed pixel sizes don’t scale well: they stay the same regardless of the device, which can make text too small on mobile or unnecessarily large on desktops. Choosing a font family or transforming text to uppercase doesn’t address scaling; those choices affect appearance, not how size responds to screen dimensions. Together with strategies like clamp() for sensible min and max sizes, relative and viewport units create responsive, accessible typography across devices.