MASTER DESIGN / TYPE & LAYOUT
Type, controls
and row rhythm.
Compare real letterforms, layout footprints and actionable bounds. The numbers describe these specimens.
Letterforms, spacing and breaks
Frame and visible face
24 px type · 40 px line · real local fonts
Between scripts
專案Alpha已完成24項
專案Alpha已完成24項
no-autospace / normal
Punctuation space
「介面設計」，從細節開始。
「介面設計」，從細節開始。
space-all / trim-start · inspect engine support below
Breaks in a narrow measure
請先確認這個專案InterfaceCraft的設定，再繼續編輯。
請先確認這個專案InterfaceCraft的設定，再繼續編輯。
break-all / normal
Support is checked in your browser when enhancement is available.
One row, three different footprints
normal
compensated
translated
The compact example has room around the row. A 36 px target still needs 36 px of unobstructed space. At large text sizes the specimen grows.
Native table cells
| 專案進度 |
| 專案進度 |
Inside a sentence
請先資料，再儲存。
請先編輯資料，再儲存。
請先資料，再儲存。
請先編輯資料，再儲存。
image
請先
資料，再儲存。
請先編輯資料，再儲存。
icon
請先資料，再儲存。
請先編輯資料，再儲存。
code
請先save()資料，再儲存。
請先編輯資料，再儲存。
superscript
請先2資料，再儲存。
請先編輯資料，再儲存。
Different contents need different space
These bounded rows grow to fit their content. Avatars and fields keep their own size; touch targets may require a taller row.
avatar
thumbnail
