Font Size
Kích thước hiển thị của ký tự văn bản. Được chỉ định trong CSS sử dụng các đơn vị như px, em, rem và vw.
Font size là thuộc tính chỉ định kích thước hiển thị của ký tự văn bản. Trong CSS, thuộc tính font-size chấp nhận nhiều đơn vị: px (pixel), em (tương đối với phần tử cha), rem (tương đối với phần tử gốc), vw (tương đối với chiều rộng viewport) và % (phần trăm). Là nền tảng của typography web, nó ảnh hưởng trực tiếp đến khả năng đọc, khả năng truy cập và tính nhất quán thiết kế.
In web design, 16px (1rem) is the standard baseline for body text, with headings scaled up according to hierarchy. Common scales include h1 at 2rem (32px), h2 at 1.5rem (24px), and h3 at 1.25rem (20px). These ratios are known as type scales, often based on mathematical ratios such as 1.25x (Major Third) or 1.333x (Perfect Fourth). Sách cơ bản thiết kế CSS teach font sizing principles.
Mỗi đơn vị có đặc điểm riêng biệt. px cung cấp kiểm soát tuyệt đối chính xác nhưng không thể phản hồi cài đặt kích thước trình duyệt của người dùng. em tương đối với kích thước phông chữ của phần tử cha, khiến tính toán phức tạp trong cấu trúc lồng nhau sâu. rem tương đối với kích thước phông chữ phần tử gốc (html), duy trì tính dự đoán bất kể độ sâu lồng nhau. vw co giãn theo chiều rộng viewport, cho phép kích thước động phản hồi theo kích thước màn hình.
Thiết kế đáp ứng ngày càng sử dụng hàm clamp() cho fluid typography. Bằng cách chỉ định giá trị tối thiểu, ưu tiên và tối đa như font-size: clamp(1rem, 2.5vw, 2rem), kích thước phông chữ co giãn mượt mà theo kích thước màn hình. Khác với thay đổi theo bậc qua media queries, cách tiếp cận này tự động áp dụng kích thước tối ưu trên mọi chiều rộng màn hình.
For accessibility, rem units are preferred over px so users can adjust font size through browser settings. WCAG 2.1 Success Criterion 1.4.4 requires that text can be resized up to 200% without loss of content or functionality. A minimum of 16px is recommended for body text, as text below 12px becomes difficult to read for many users. Sách thiết kế web đáp ứng cover practical font sizing strategies.
Về mặt đếm ký tự, kích thước phông chữ ảnh hưởng trực tiếp đến số ký tự hiển thị trên mỗi dòng. Trong cùng một container có cùng chiều rộng, kích thước phông chữ lớn hơn giảm số ký tự trên mỗi dòng trong khi kích thước nhỏ hơn tăng lên. Đối với các ngữ cảnh có giới hạn hiển thị, như bài đăng mạng xã hội hoặc meta description, việc thiết kế với nhận thức về mối quan hệ giữa kích thước phông chữ và số ký tự là thiết yếu. Đối với văn bản tiếng Nhật, nơi ký tự toàn chiều rộng chiếm gần gấp đôi chiều rộng ký tự nửa chiều rộng, ảnh hưởng của cài đặt kích thước phông chữ đến bố cục hiển thị càng rõ rệt hơn.