✅ 1. Kích thước vùng nội dung (Content Width)
| Màn hình | Chiều rộng nội dung đề xuất | Ghi chú |
|---|---|---|
| Desktop (≥ 1280px) | ~700px đến 900px | Đây là độ rộng lý tưởng để đọc văn bản dài (blog, mô tả sản phẩm...) |
| Tablet (768px – 1279px) | 90% chiều ngang màn hình | Tự động co lại – vẫn giữ bố cục 1 cột |
| Mobile (≤ 767px) | Toàn bộ chiều ngang – padding 16~24px hai bên | Tránh sát viền gây khó đọc |
👉 Trên desktop, nếu bạn dùng layout dạng container, đặt max-width: 860px cho nội dung chính là rất tối ưu.
✅ 2. Cỡ chữ (Font Size) & Line Height
| Vị trí | Cỡ chữ đề xuất | Line height | Ghi chú |
|---|---|---|---|
| Nội dung chính (body text) | 16px – 18px | 1.6 – 1.75 | Càng dài dòng càng cần thoáng |
| Tiêu đề H1 | 28 – 36px | 1.3 – 1.4 | Hấp dẫn, rõ ràng |
| Tiêu đề H2 | 22 – 28px | 1.4 – 1.5 | Phân khúc nội dung dễ đọc |
| Tiêu đề H3 | 18 – 22px | 1.5 | Định hướng cho mục phụ |
✅ 3. Các yếu tố bổ trợ trải nghiệm đọc
-
Khoảng cách giữa các đoạn (margin-bottom): 16–24px
-
Khoảng cách giữa dòng (line spacing): ít nhất 1.5 trở lên
-
Font chữ nên dùng:
-
Web serif hiện đại: Georgia, Merriweather, Playfair Display
-
Sans-serif dễ đọc: Roboto, Open Sans, Lato, Inter
-
