Typography

Luke UI defines semantic typography styles. Each style is a complete treatment: font family, size, weight, line height, letter spacing, and Capsize trim.

Base components

Use Text for body copy and other non-heading content. Use Heading for document and section headings. Heading manages semantic levels and selects a matching typography style by default.

Use Numeral for locale-aware values. It inherits the typography styles. It formats currencies, percentages, units, and compact values. Use Emoji when an emoji needs a reliable accessible label.

Typography styles

Text and Heading use these styles, from smallest to largest:

Text defaults to body. Heading selects a style from its level, and accepts typography when the visual hierarchy needs a deliberate override. An h2 can use heading3 visually without changing its semantic level. There is no heading5 or heading6 style. Those HTML levels reuse lead and body with heading weight.

Capsize trims

Each style includes Capsize trim values for the active font family. A line box normally reserves space above and below its letters. Trim removes that extra space from a block text element. Read Text for how Text infers trim from the element type.

Weight and colour

Each typography style already carries its weight. Pass fontWeight only when you need a different role. Themes expose body, label, heading, and emphasis for that purpose, and for Strong. Text also accepts semantic color values such as primary, secondary, accent, info, success, warning, and danger.

<Text color="secondary" typography="label">
	Last updated 12 minutes ago
</Text>

Applications load any font files required by a custom theme. The theme then assigns that typeface to the shared styles and weight roles. Luke UI computes trim values from that font's metrics.

Continue learning