Foundations

Typography

Segoe UI Variable là typeface đặc trưng của Fluent. Type ramp cố định giúp phân cấp thông tin rõ ràng và nhất quán.

Luôn dùng một style trong ramp — không tự đặt font-size / line-height. Weight chỉ dùng Regular (400) và Semibold (600). Nội dung dài (Markdown, bài viết): chỉnh font và nhịp chữ của Prose ở Typeset.

Type ramp

Display

68 / 92 · Semibold

text-display

Thiết kế trôi chảy

Large title

40 / 52 · Semibold

text-large-title

Thiết kế trôi chảy

Title 1

32 / 40 · Semibold

text-title1

Thiết kế trôi chảy

Title 2

28 / 36 · Semibold

text-title2

Thiết kế trôi chảy

Title 3

24 / 32 · Semibold

text-title3

Thiết kế trôi chảy

Subtitle 1

20 / 28 · Semibold

text-subtitle1

Thiết kế trôi chảy

Subtitle 2

16 / 22 · Semibold

text-subtitle2

Thiết kế trôi chảy

Body 2

16 / 22 · Regular

text-body2

Thiết kế trôi chảy

Body 1

14 / 20 · Regular

text-body1

Thiết kế trôi chảy

Body 1 Strong

14 / 20 · Semibold

text-body1 font-semibold

Thiết kế trôi chảy

Caption 1

12 / 16 · Regular

text-caption1

Thiết kế trôi chảy

Caption 2

10 / 14 · Regular

text-caption2

Thiết kế trôi chảy

Sử dụng

<h1 className="text-large-title font-semibold">Tiêu đề trang</h1>
<h2 className="text-title3 font-semibold">Tiêu đề section</h2>
<p className="text-body1 text-foreground-2">Nội dung thân bài.</p>
<span className="text-caption1 text-foreground-3">Cập nhật 5 phút trước</span>