Thiết kế web luôn mượn các nguyên tắc và định nghĩa từ thế giới thiết kế đồ họa và in ấn. Điều này đặc biệt đúng khi nói đến typography web và cách thức mà chúng ta nhận được letterforms trên các trang web của chúng tôi. Những điểm tương đồng này không phải lúc nào cũng là 1 đến 1 bản dịch, nhưng bạn chắc chắn có thể thấy nơi mà một kỷ luật đã ảnh hưởng đến bản dịch khác. Điều này đặc biệt rõ ràng khi bạn xem xét mối quan hệ giữa thuật ngữ kiểu chữ truyền thống "hàng đầu" và thuộc tính CSS được gọi là "chiều cao dòng".
Mục đích của hàng đầu
Khi mọi người sử dụng để cầm tay bằng kim loại hoặc chữ bằng gỗ để tạo ra kiểu chữ cho một trang in, các mẩu chì mỏng được đặt giữa các dòng văn bản nằm ngang để tạo khoảng cách giữa các dòng đó. Nếu bạn muốn có một không gian lớn hơn, bạn sẽ chèn những phần chì lớn hơn. Đây là cách thuật ngữ "hàng đầu" được đặt ra. Nếu bạn tra cứu thuật ngữ "dẫn đầu" trong một cuốn sách về thiết kế và hiệu trưởng typographic, nó sẽ đọc một cái gì đó để tác động của - "khoảng cách giữa các đường cơ sở của các dòng liên tiếp của loại."
Dẫn đầu trong thiết kế web
Trong thiết kế kỹ thuật số, thuật ngữ hàng đầu vẫn được sử dụng để chỉ khoảng cách giữa các dòng văn bản. Nhiều chương trình sử dụng thuật ngữ chính xác này, mặc dù thực tế rõ ràng là không được sử dụng trong các chương trình này. Đây là một ví dụ tuyệt vời về các hình thức mới về các ý tưởng vay thiết kế từ những người truyền thống, mặc dù việc thực hiện chính xác nguyên tắc đó đã thay đổi.
Khi nói đến thiết kế web, không có thuộc tính CSS cho "hàng đầu". Thay vào đó, thuộc tính CSS sẽ xử lý hiển thị văn bản trực quan này được gọi là chiều cao dòng. Nếu bạn muốn văn bản của mình có thêm không gian giữa các dòng văn bản nằm ngang, bạn sẽ sử dụng thuộc tính này. Ví dụ: giả sử bạn muốn tăng chiều cao dòng cho tất cả các đoạn bên trong phần tử
Điều này bây giờ sẽ gấp 1,5 lần chiều cao dòng bình thường, dựa trên kích thước phông chữ mặc định của trang (thường là 16px).
Thời điểm sử dụng Line-Height
Như đã nêu chi tiết ở trên, chiều cao dòng là thích hợp để sử dụng cho khoảng trống văn bản trong các đoạn văn hoặc các khối văn bản khác. Nếu có quá ít khoảng trống giữa các dòng, văn bản có thể trở nên lộn xộn và khó đọc cho người xem đến trang web của bạn. Tương tự, nếu các dòng cách nhau quá xa trên trang, luồng đọc bình thường sẽ bị gián đoạn và người đọc sẽ gặp rắc rối với văn bản của bạn vì lý do đó. Đây là lý do tại sao bạn muốn tìm số lượng khoảng cách dòng chiều cao thích hợp để sử dụng. Bạn cũng có thể kiểm tra thiết kế của mình với người dùng thực tế để nhận phản hồi của họ về khả năng đọc của trang .
Khi không sử dụng Line-Height
Không nhầm lẫn chiều cao dòng với phần đệm hoặc lề mà bạn sẽ sử dụng để thêm khoảng trắng vào thiết kế của trang, bao gồm cả bên dưới tiêu đề hoặc đoạn văn. Khoảng cách đó không dẫn đầu và do đó nó không được xử lý bởi chiều cao dòng.
Nếu bạn muốn thêm không gian theo các yếu tố văn bản nhất định, bạn sẽ sử dụng lề hoặc đệm. Quay trở lại ví dụ CSS trước, chúng tôi đã sử dụng, chúng tôi có thể thêm điều này:
chính p {line-height: 1.5; margin-bottom: 24px; } Điều này vẫn sẽ có chiều cao dòng 1,5 giữa các dòng văn bản cho đoạn văn của trang của chúng ta (các dòng bên trong phần tử
Trong hầu hết các trường hợp, điều này sẽ hiển thị giống như CSS trước đó.
Giả sử bạn muốn thêm khoảng cách bên dưới các mục danh sách bên trong danh sách với một lớp "menu dịch vụ", bạn sẽ sử dụng lề hoặc đệm để làm như vậy, KHÔNG phải chiều cao dòng. Vì vậy, điều này sẽ là thích hợp.
.services-menu li {