Text views

Design a text-view component for reading long-form content inside a product. Treat the page as a focused reading surface, not a marketing layout. The main job is to make dense copy easy to enter, scan, and continue reading without distraction.

Build a clear type system: article title, section headings, body text, pull quotes, links, captions, and metadata such as author, date, or reading time. Show how spacing, line length, and contrast support readability on desktop and mobile. Include a state for selected text and inline actions such as highlight, copy, or share if they fit the interaction model.

Add reader controls that belong near the content: font size, theme toggle, and line-height or width adjustments. Show loading, empty, and error states, plus a long-content state with sticky section navigation or progress. The component should still read well when text is short, very long, or mixed with links and embedded elements.

Spruce up your text view design with a 'typography scale'—proportional sizing that maintains harmony and visual hierarchy, guiding the reader's eye smoothly through the content.