Typography thường bị bỏ qua trong thiết kế web. Nhưng nó là nền tảng của cách chúng ta tiêu thụ nội dung văn bản trực tuyến.

Chọn đúng font chữ

Với nội dung chính, font serif như Merriweather mang lại khả năng đọc tốt hơn trong bài viết dài. Các nét serif hướng dẫn mắt theo dòng, giảm mỏi mắt khi đọc lâu.

Với tiêu đề, một font sans-serif sạch sẽ như Inter tạo ra sự tương phản và phân cấp mà không tranh giành sự chú ý.

Độ dài dòng quan trọng

Độ dài dòng lý tưởng để đọc là 50-75 ký tự mỗi dòng. Quá rộng, mắt bạn khó theo dõi về đầu dòng tiếp theo. Quá hẹp, việc xuống dòng liên tục làm gián đoạn dòng chảy.

Blog này sử dụng chiều rộng tối đa 680 pixel — đủ rộng để đọc thoải mái, đủ hẹp để duy trì sự tập trung.

Khoảng cách và nhịp điệu

Typography tốt không chỉ là chọn font:

  • Chiều cao dòng: 1.7 cho nội dung chính giúp chữ có không gian thở
  • Khoảng cách đoạn: Lề rộng rãi giữa các đoạn tạo ra những điểm dừng tự nhiên
  • Phân cấp tiêu đề: Sự khác biệt kích thước rõ ràng hướng dẫn người đọc qua nội dung

Chi tiết nhỏ

Những chi tiết nhỏ cộng dồn. Đường cong tinh tế của dấu ngoặc kép. Việc sử dụng đúng dấu gạch ngang. Những thứ này có thể không được chú ý riêng lẻ, nhưng cùng nhau chúng tạo ra trải nghiệm cảm thấy đúng.

html {
  font-size: 18px;
  line-height: 1.7;
}

Typography không phải là trang trí. Nó là giao diện qua đó ý tưởng đến với tâm trí bạn.