Hệ thống Thiết kế · 06.B

Typography — 3 typeface, 8 cấp độ.

Be Vietnam Pro làm primary cho mọi text. Lora Italic làm accent cho Heritage variant. Inter Tight cho số liệu (tabular numerals) trên cả 2 variant.

Be Vietnam Pro · Sans-serif primary

64px / 600 Trồng giá trị

48px / 600 Heading H1

32px / 600 Heading H2

24px / 500 Heading H3

18px / 400 Lead — Đoạn dẫn mở đầu mỗi mục, dẫn dắt người đọc vào nội dung chính của trang.

16px / 400 Body — Đoạn văn chính của site, kích thước mặc định cho mọi paragraph dài

14px / 400 Body small — caption, metadata, link phụ

12px / 500 Caption · Eyebrow · Tag

Lora Italic · Heritage accent only

Cách dùng: Chỉ dùng để emphasize 1 cụm từ trong heading H1/H2 hoặc pull-quote. Không dùng cho body text. Không dùng trong Modern variant.

64px / 500i đồng hành cùng

36px / 500i Thành công cùng nhà nông

24px / 400i Niêm yết HOSE từ năm 2007

Inter Tight · Tabular numerals

Cách dùng: Cho mọi số liệu cần căn cột thẳng (BCTC, KPI block, stock chart). Heritage variant dùng làm secondary; Modern variant dùng làm primary.

88px / 600 tnum 4.820 ₫

48px / 600 tnum 1.847 tỷ ₫

24px / 500 tnum ▲ +1.69% · 2.847.500 CP

14px / 500 tnum P/E 9.76 · P/B 1.12 · ROE 14.2% · EPS 432₫

Hiệu suất tải

Tổng dung lượng 3 typeface ở build production (subset Vietnamese + Latin, format WOFF2):

Be Vietnam Pro · 4 weights · woff2 ~ 124 KB
Lora · 2 weights italic · woff2 ~ 38 KB
Inter Tight · 4 weights · woff2 ~ 52 KB
Tổng ~ 214 KB

Self-host trên CDN của HAI để tránh phụ thuộc Google Fonts. Dùng font-display: swap + preload weight 600 cho heading hero.

Tiếp tục: Components · 06.C →