Skip to main content
Normal UI

Typography

Every text element as base.css renders it, in the content rhythm (the default; .pd-content inside an app). Nothing here uses a class: this is what plain HTML looks like in Normal UI. Sizes and line heights are in Tokens; the app scale is in the Heading rhythm template, and a whole post in the Blog post page.

Headings

One h1 per page, then the levels in order. Never skip a level to get a smaller size.

Heading 1: the page title

Heading 2: a section

Heading 3: a subsection

Heading 4: a minor heading

Heading 5: a small heading
Heading 6: the smallest heading

Body text after a heading. A heading sits half a line from the text it introduces and further from the text before it, so it groups with its own section.

Paragraphs

Body text is 16px on a 24px line in the operating system's UI font. Paragraphs leave one line below them and none above. Keep lines under about 75 characters by limiting the width of the container (this page does it with max-width), and let the last line wrap evenly: paragraphs use text-wrap: pretty, so a single word is never left alone on a line.

Small text is for fine print and captions only. It is 0.83em and nothing is smaller.

Inline text

Text-level elements, each with its purpose and a live example
ElementUse it forExample
a A link: names its destination, always underlined. Read the refund policy.
strong Importance: the words a skimming reader must not miss. Orders after 14:00 ship the next day.
em Stress that changes the meaning of the sentence. Return it before you ask for a refund.
b Draws the eye without extra importance: a product name in a list. The Rattan tray is back in stock.
i A different voice: foreign words, ship names, technical terms. Woven in the anyaman style.
u Rare. Never for emphasis, since it looks like a link. A misspeled word, marked by a spell checker.
s No longer accurate, but kept for reference. Was Rp 350.000, now Rp 289.000.
mark Highlight: one fact per section, or search matches. Black on yellow in both color schemes. Returns are free until 31 October.
small Fine print, captions, notes. 0.83em, the smallest text allowed. Prices include VAT.
code A fragment of code, a file name, a value. 1em in the platform monospace. Set data-color-scheme="dark" on <html>.
kbd A key or keys the reader presses. Drawn as a keycap: 1px border on surface-muted. Press Ctrl + K to search.
samp Output from a program. Browser default. The page says Payment declined.
var A variable in maths or code. Browser default (italic). Delivery takes n + 1 days.
abbr An abbreviation, expanded in its title. Dotted underline. Shipping by JNE.
dfn The defining instance of a term. Browser default (italic). A drop-off point is a shop that accepts returns.
cite The title of a work. Browser default (italic). As reviewed in Rumah Kita magazine.
q A short inline quotation. The browser adds the quote marks. She called it the best tray I own.
sub / sup Subscripts and superscripts; superscript for footnote marks. They do not change the line height. CO2 neutral shipping1 on 1st orders.
del / ins Removed and added text in a revision. Delivery in 5 3 days.
time A date or time, machine-readable in datetime. No visual change. Posted on .

1 Footnote target for the superscript example.

Lists

Unordered

  • Hand-woven rattan trays
  • Batik table runners
    • Pekalongan patterns
    • Solo patterns
  • Teak cutting boards

Ordered

  1. Open Your orders and choose the order.
  2. Select Return items and say why.
    1. Wrong size
    2. Arrived damaged
  3. Show the QR code at a drop-off point.

Description list

Standard delivery
3 to 5 working days. Free over Rp 250.000.
Express delivery
1 to 2 working days in Java and Bali. Rp 35.000.

Quotations

We stopped using bubble wrap last year. Every tray now ships in a box of recycled board and dried banana leaves, and not one has arrived broken.

Sari Wulandari, Packing notes

Use blockquote for a quotation of a paragraph or more, inside a figure with a figcaption naming the source. Indented 40px, as the browser sets it.

Code blocks

<details name="faq">
  <summary>What does delivery cost?</summary>
  <p>Free over Rp 250.000.</p>
</details>

pre keeps whitespace, uses the platform monospace at 1em, and scrolls sideways inside its own box so the page never does.

Figures and images

Orders per month, May to September: 210, 260, 245, 330, 412
Orders per month, May to September 2026. Images and SVG never grow wider than their container.

Tables

Orders by category, September
CategoryOrdersRevenue
Clothing623Rp 180.047.000
Home and kitchen298Rp 43.570.000
Food96Rp 9.216.000
Total1,017Rp 232.833.000

Rules, addresses and disclosures

A thematic break between two parts of a section:

The next part continues after the hr, which is a 1px rule line.

Toko Rumah
Jl. Braga No. 12, Bandung 40111
help@example.com

address is contact information for the page or article it sits in (browser default, italic).

Can I change my address after ordering?

Yes, until the order is packed.