Tạm biệt pixel, hoan nghênh ch: Đơn vị đo lường mới cho thiết kế web hiện đại

Pixel là một lời nói dối. Ngay cả khi bạn nghĩ mình đang vẽ một thứ gì đó với độ chính xác 'pixel perfect', màn hình của bạn vẫn đang lừa bạn. Không có lưới pixel hoàn hảo nào cả.

Trong CSS, pixel là một lời nói dối gấp đôi. Lưu ý rằng 1px không nhất thiết bằng một pixel phần cứng vật lý. Trên màn hình độ phân giải cao (HD), nó có thể trải dài nhiều pixel vật lý. Tương tự, 1cm trong CSS thường không tương ứng với một phần trăm mét SI — trên màn hình TV lớn, nó luôn dài hơn. Những độ dài này mang tính tri giác: 16px trông gần giống nhau trên điện thoại, laptop hay TV ở khoảng cách xem thông thường.

Blog của tôi dựa trên chữ viết — tại sao không đo theo chữ?

Blog này chủ yếu là nội dung văn bản. Tôi muốn chiều rộng của văn bản dễ đọc cho người trung bình. Vì vậy, thay vì đặt chiều rộng chính theo phần trăm màn hình, tôi đặt nó dựa trên đơn vị ch — không hẳn là một ký tự chính xác nhưng đủ tốt cho mục đích của tôi:

--width-content: min(75ch, 100%);

main {
  max-width: var(--width-content);
}

Khi nói đến padding và margin, điều tương tự cũng áp dụng. Nếu tôi muốn một khoảng trống quanh phần tử, tôi muốn khoảng trống đó tỉ lệ với văn bản bên trong nó. Cho chiều rộng, việc tái sử dụng đơn vị ch là hợp lý — khoảng trống nên tỉ lệ với chữ.

Về chiều cao — dùng ex có phải là giải pháp?

Nhưng cho chiều cao, có lẽ không hợp lý khi biểu thị khoảng cách dọc theo chiều rộng ký tự. Trong trường hợp đó, đơn vị ex có thể được sử dụng. Nó là kích thước của một chữ thường điển hình trong font chữ hiện tại. Điều này tạo ra một hệ thống đo lường nhất quán hơn, dựa trên loại hình học thực tế của văn bản thay vì một đơn vị nhân tạo.

Giống như ý tưởng loại bỏ các class CSS khỏi HTML của tôi, có thể đi quá xa với cách này. Tôi chưa thay đổi mọi tham chiếu từ px sang ch — tôi chỉ đang thử nghiệm xem nó có hoạt động hiệu quả không.

Không có gì sai với px — nhưng ch và ex mới là tương lai

Không có gì sai, vô đạo đức hay xấu xa khi dùng px — hoặc bất kỳ đơn vị đo lường nào khác.

Việc dùng ch và ex phù hợp với sở thích cá nhân của tôi, đặc biệt khi blog chủ yếu là nội dung đọc. Đối với các nhà phát triển web Việt Nam, đây là một gợi ý hữu ích: hãy thử so sánh hiệu suất đọc giữa px và ch trên các thiết bị di động phổ thông tại Việt Nam, nơi tỷ lệ màn hình và khoảng cách xem rất đa dạng.

Nếu bạn muốn tối ưu trải nghiệm người dùng cho nội dung văn bản dài, hãy cân nhắc chuyển từ px sang ch cho chiều rộng và ex cho chiều cao — thử nghiệm này xứng đáng với thời gian đầu tư.