Brand components

Typography

Brand text elements: two-voice headline, kicker, lede, body, drop cap, pull-quote, figure and meta.

Analysis

Read it in serif, use it in sans

A newspaper of record sets its headlines in one voice and answers in another.

By the Editors · 9 November 2026

Every story opens with a rule. The type does the rest: a headline that carries weight, a lede that explains, and body text that rewards the careful reader.

Structure comes from rules, not boxes.
Style guide

Names and figures are set in capitals so they can be scanned at a glance.

Install

bash

npx shadcn add @eloquent/typography

Usage

tsx

import { Body, Headline, Kicker, Lede, PullQuote } from "@/components/ui/typography";

<Kicker>Analysis</Kicker>
<Headline as="h1" tail="use it in sans">Read it in serif,</Headline>
<Lede>A newspaper of record.</Lede>
<PullQuote cite="Style guide">Structure comes from rules, not boxes.</PullQuote>

States

Heading 1

Heading 2

Heading 3

Heading 4

Two voices, with an italic tail

Kicker

Lede in Source Serif 4.

Body text in Source Serif 4.

Meta text in Barlow.

Circulation: 12,400

State	Treatment
`Headline highlight`	Marker highlight sweeps under the headline on hover or focus
`DropCap`	First letter in Playfair Display 900, floated
`PullQuote`	Heavy rule on top, Playfair italic 700

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Phân tích

Đọc bằng chữ có chân, dùng bằng chữ không chân

Một tờ báo lưu chiếu đặt tiêu đề bằng một giọng và trả lời bằng một giọng khác.

Ban biên tập · 9 tháng 11, 2026

Mỗi bài viết mở đầu bằng một đường kẻ. Phần còn lại là chữ: tiêu đề có sức nặng, đoạn dẫn giải thích, và nội dung thưởng cho người đọc kỹ.

Cấu trúc đến từ đường kẻ, không phải khung.
Cẩm nang phong cách

Tên và con số được viết hoa để có thể quét qua trong chốc lát.

Ink adaptation

Upstream's grey, sans h1-h4, p, lead, muted and blockquote become Playfair Display 900 headlines with an italic 700 tail, Source Serif 4 body, a heavy-rule pull-quote and Barlow Condensed figures. All text is ink: no grey body text.