Typography

Usage

Live example

Rust

1use herogpui::prelude::{Typography, TypographyType};
2
3Typography::new(
4    "Typography sets the size, weight and line height of a run of text.",
5)

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

TypographyProse

Typography is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Typography uses.

Styling

Typography styling
Style	Description
`text_color(colors.foreground)`	Base primitive: foreground color only; every metric comes from the type modifier.
`H1 => text_size(px(36.)) + line_height(px(40.)) + FontWeight::SEMIBOLD`	36px semibold at the 40px text-4xl leading. `tracking-tight` is an honest limitation: GPUI 0.2.2 has no letter-spacing.
`H2 => text_size(px(30.)) + line_height(px(36.)) + FontWeight::SEMIBOLD`	30/36 semibold; `tracking-tight` unsupported (no letter-spacing in GPUI).
`H3 => text_size(px(24.)) + line_height(px(32.)) + FontWeight::SEMIBOLD`	24/32 semibold; `tracking-tight` unsupported (no letter-spacing in GPUI).
`H4 => text_size(px(20.)) + line_height(px(28.)) + FontWeight::SEMIBOLD`	20/28 semibold; `tracking-tight` unsupported (no letter-spacing in GPUI).
`H5 => text_size(px(18.)) + line_height(px(28.)) + FontWeight::SEMIBOLD`	18/28 semibold; `tracking-tight` unsupported (no letter-spacing in GPUI).
`H6 => text_size(px(16.)) + line_height(px(24.)) + FontWeight::SEMIBOLD`	16/24 semibold; `tracking-tight` unsupported (no letter-spacing in GPUI).
`Body => text_size(px(16.)) + line_height(px(28.))`	16px body copy at the 28px leading-7.
`BodySm => text_size(px(14.)) + line_height(px(24.))`	14px text at the 24px leading-6.
`BodyXs => text_size(px(12.)) + line_height(px(20.))`	12px text at the 20px leading-5.
`Code => font_family(MONO) + bg(colors.default.color) + mark_radius + px(px(6.)) + py(px(2.)) + text_size(px(14.)) + line_height(px(20.))`	Inline code chip: mono 14/20 text painted on the `bg-default` chip at the mark radius with 6px/2px padding.
`TextAlign::Start => text_left`	Start alignment, the default.
`TextAlign::Center => text_center`	Centered alignment.
`TextAlign::End => text_right`	End alignment.
`TextAlign::Justify => text_left`	Justified text: GPUI 0.2.2 has no `text-justify`, so falls back to start alignment.
`TextColor::Default => colors.foreground`	Default color role.
`TextColor::Muted => colors.muted`	Muted color role.
`truncate()`	Single-line ellipsis truncation; the port's root div is already a block, so only the truncation applies.
`FontWeight::Normal => gpui::FontWeight::NORMAL`	Normal (400) weight override, demonstrated in the gallery weight examples.
`FontWeight::Medium => gpui::FontWeight::MEDIUM`	Medium (500) weight override, demonstrated in the gallery weight examples.
`FontWeight::Semibold => gpui::FontWeight::SEMIBOLD`	Semibold (600) weight override, demonstrated in the gallery weight examples.
`FontWeight::Bold => gpui::FontWeight::BOLD`	Bold (700) weight override, demonstrated in the gallery weight examples.

API reference

Builders

Typography builders
Builder	Type	Default	Description
`kind(TypographyType)`	`TypographyType`	`TypographyType::Body`	Semantic typography style, carrying the tagged scale's size/line-height pair, the heading weight and the code family. Named `kind` because `type` is a Rust keyword.
`align(TextAlign)`	`TextAlign`	`TextAlign::Start`	Text alignment. GPUI 0.2.2 has no `text-justify`; justify falls back to start alignment.
`color(TextColor)`	`TextColor`	`TextColor::Default`	Text color role.
`weight(FontWeight)`	`FontWeight`	—	Font weight override over the type's default.
`truncate(bool)`	`bool`	—	Truncates the text to one line with an ellipsis.
`ParentElement::extend`	`AnyElement`	—	Text content, either as the constructor's text or as composed children.
`heading(u8, text)`	`u8, text`	`1`	Maps to `type="h1"` through `type="h6"`; higher levels clamp to h6.
`paragraph(ParagraphSize, text)`	`ParagraphSize, text`	`'base'`	Maps to the `body`, `body-sm` and `body-xs` types.
`code(text)`	`text`	—	The inline code text; `Typography.Code` is the `code` type.

Parts

Typography parts
Part	Description
`Typography`	Root primitive: maps each type to its semantic element (`h1`–`h6`, `p`, `code`) through Text, and headings tighten their tracking. GPUI 0.2.2 has no semantics and no letter-spacing, so the same metrics, weight and color render on a plain div.
`Prose`	Prose container: `text-foreground` with the children rendered in order. The per-tag descendant styles in `.typography-prose h1`, `p`, `code`, `a`, lists and friends need CSS selectors GPUI does not have, so nothing is inherited automatically.

Kbd