Chiều cao line height tối ưu giữa các dòng ở phần nội dung.. Thích hợp hơn cho bạn khi sử dụng một đương vị tương đối, chẳn hạn như "em" hay "%" để xác định khoảng cách line height "em
Trang 1Chiều cao (line height ) tối ưu giữa các dòng ở
phần nội dung
Line height trong PTS là là biểu tượng
Chiều cao Line height sẽ luôn phụ thuộc vào kích thước font bạn lựa chọn
Do đó trình bày bằng biểu đồ lựa chọn phổ biến sẽ không có ý nghĩa Thích hợp hơn cho bạn khi sử dụng một đương vị tương đối, chẳn hạn như "em" hay "%" để xác định khoảng cách line height
"em" là một đơn vị đo lường trong lĩnh vực typography Đơn vị này xác định tỷ lệ chiều rộng và chiều cao xung quanh một chữ đối với kích thước điểm px của chữ đó
Theo nghiên cứu của chúng tôi:
Line height (pixel) ÷ cỡ chữ phần nội dung(pixel) = 1,48
Lưu ý rằng 1,5 là một giá trị thường được đề nghị trong các cuốn sách kinh điển về typographic, do đó nghiên cứu của chúng tôi sao lưu các nguyên tắc này Rất ít các trang web sử dụng tỉ lệ ít hơn thế Số lượng các trang web mà trên 1,48 giảm khi bạn nhận được thêm những giá trị này
Line length (pixel) ÷ đường cao (pixel) = 27,8
Line length trung bình là 538,64 pixel (không bao gồm margins và paddings ) là khá lớn, lưu ý rằng nhiều trang web vẫn còn sử dụng 12-13 pixel cho kích thước font nội dung
Trang 2Trong Typography Line length là chiều rộng chiếm bởi một khối câu chữ văn bản , được đo bằng inch, picas và pixel
Trong Typography, margins là không gian bao quanh nội dung của trang Margin giúp xác định nơi một dòng văn bản bắt đầu và kết thúc
Không gian giữa các đoạn văn (pixel) ÷ Line height (pixel) = 0,754
Chúng tôi đã rất ngạc nhiên bởi kết quả này Nó chỉ ra rằng khoảng cách giữa các đoạn (tức là khoảng trống giữa những dòng cuối cùng của một đoạn văn và dòng đầu tiên của kế tiếp của 1 đoạn khác ) chỉ gần bằng với chữ đầu dòng – the Leading (đó là đặc điểm chính của nhịp điệu thẳng đứng hoàn hảo )
Chữ đầu dòng (The Leading ) – là chữ cái được làm lớn khi bắt đầu một phần nội dung
Thường xuyên hơn, khoảng cách giữa các đoạn (pharaghap spacing) là 75% của line height Lý do có thể là chữ đầu dòng thường bao gồm các không gian đưa lên bởi descenders (ngược với ascender – là phần gạch trên của các chữ như chữ d - descenders là phần gạch dưới của các chữ như chữ q, p), và bởi vì hầu hết các ký tự không có descenders, thêm khoảng trắng được tạo ra theo dòng
AIGA là một ví dụ hoàn hảo tối ưu Kích thước font của nó là 13,21 điểm (chuyển đổi từ ems) và chiều cao dòng của nó là 19,833 pixel(chuyển đổi từ ems) Trong thực tế, 19,8333 ÷ 13,2167 = 1,5011 (Chữ I là the Leading )
Trang 3Vì vậy, một khi bạn đã quyết định kích thước font nội dung, nhân giá trị này lên 1.5 sẽ cung cấp cho bạn số Line height tối ưu Một khi bạn đã có điều đó, bạn có thể nhân giá trị mới này bằng 27,8 để có được chiều dài dòng tối ưu Lưu ý rằng cách bố trí cũng cần có gutters, margins and padding
Gutter là không gian giữa các cột của văn bản in, đôi khi gọi là alley
The New Scientist có 20 pixel của khoảng cách giữa các đoạn
7 Bao nhiêu chữ trong một dòng?
Theo một quy luật cổ điển của web typography, 55-75 là một số lượng tối
ưu của các ký tự trên mỗi dòng Đáng ngạc nhiên, nghiên cứu của chúng tôi cho thấy hầu hết các trang web có số lượng cao hơn
Trang 4Chúng tôi đếm có bao nhiêu chữ có thể phù hợp trên một dòng bằng cách sử dụng kích thước font mặc định Kết quả là trung bình 88,74 ký tự trên mỗi dòng (tối đa ) là rất cao
Giữa 73 và 90 ký tự trên mỗi dòng là một lựa chọn phổ biến trong thiết kế, nhưng chúng tôi cũng tìm thấy ngoại lệ: Monocle (47 ký tự/ dòng) và Boxes and Arrows (125 ký tự/ dòng)