Reading / Reading text
Prose
Readable typography for paragraphs, headings, lists, and quotations.
Basic usage
Make information clear
Different ways of reading call for different densities. Finding a single entry in a catalog and understanding a report deserve different layouts.
- Take density from spacing.
- Give numbers meaning.
- Show what remains unknown.
HTML
<div class="prose">
<h3>Make information clear</h3>
<p>Different ways of reading call for different densities. <strong>Finding a single entry</strong> in a catalog and understanding a report deserve different layouts.</p>
<ul><li>Take density from spacing.</li><li>Give numbers meaning.</li><li>Show what remains unknown.</li></ul>
</div>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.prose | A reading container for semantic HTML. |
.prose-wide | Removes the normal reading-width limit. |
code / kbd / blockquote | Inline code, key names, and quotations use standard HTML elements. |
Usage notes
Choose heading levels by the structure of the document, not by the size you want.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.