Nhịp điệu / lưới cơ sở trong thiết kế web

Gần đây tôi đã đọc một số bài viết về tầm quan trọng của nhịp điệu dọc tốt / sử dụng lưới cơ sở cho kiểu chữ tốt trong thiết kế web. Tôi đã quyết định thử sử dụng lưới đường cơ sở, như lưới 960 trong hình dưới đây, làm hình nền cho thiết kế web / chủ đề WordPress mà tôi hiện đang làm việc.

Tôi thấy rất khó khăn để có được mọi thứ xếp hàng đúng cách trong lưới điện. Tôi đã quản lý để có được mọi thứ trong lưới dọc ở kích thước văn bản mặc định (16px), nhưng khi tôi bắt đầu lộn xộn với kích thước của các tiêu đề, thêm hình ảnh, v.v., các mục không phải luôn luôn được căn chỉnh đúng trên lưới.

Tôi muốn biết làm thế nào để cải thiện kiểu chữ của tôi bằng cách sử dụng nhịp điệu dọc. Có ai có bất kỳ lời khuyên hoặc kỹ thuật tôi nên sử dụng?

Lưới cơ sở trong thiết kế web là một câu đố học thuật cần thiết nhưng chủ yếu là không thực tế từ quan điểm toán học được mã hóa cứng. Vì CSS không có khái niệm về đường cơ sở cho loại, về mặt kỹ thuật không thể có đường cơ sở phù hợp.

Bạn có thể đến gần để sắp xếp mọi thứ, nhưng cuối cùng bạn kết thúc với một thứ có thể có ý nghĩa khi nhìn vào các con số, nhưng có khả năng là tắt trực quan và cuối cùng bạn đi lạc khỏi công thức để đảm bảo mọi thứ trông ổn.

Vì vậy, tóm lại, một nhịp điệu thị giác rất quan trọng, nhưng hãy xây dựng nó từ ruột của bạn chứ không phải một số phương trình sẽ giúp bạn thực hiện đúng cách trên web.

Bên cạnh đó, lưu ý rằng khái niệm lưới đường cơ sở xuất phát từ thế giới thiết kế in ấn ... cụ thể là bố cục nhiều cột như trong một tờ báo mà bạn muốn loại xếp hàng từ cột này sang cột khác theo sở thích. Để dễ dàng sắp xếp loại ấn phẩm đó, lưới cơ sở có ý nghĩa và tương đối dễ thực hiện trong thế giới của các ứng dụng DTP.

Nhịp điệu dọc không khó thực hiện, đặc biệt nếu bạn bắt đầu với thiết lập lại CSS . Tôi tình cờ thấy liên kết này http://24ways.org/2006/compose-to-a-vertical-rbeat một thời gian trước đây và từ đó đã sử dụng kỹ thuật này trong tất cả các thiết kế của tôi.

Những gì tôi đã tìm thấy là sau khi làm việc với một bộ khai báo kiểu "đóng hộp" trong tệp CSS của tôi (h1 - h6, p, v.v. - cụ thể, kích thước, chiều cao dòng, lề dưới) rất dễ triển khai.

Đây là một hình ảnh nền đã giúp tôi nhìn mọi thứ rõ ràng hơn một chút ... đặc biệt, khi tôi lần đầu tiên sử dụng nhịp điệu dọc.

Có thể khó nhìn, nhưng khi nó được lặp lại dưới dạng hình nền: bạn sẽ thấy lưới 20x20.

HTH

Lưu ý: Tôi thích kiểu chữ trong các trang web đã sử dụng kỹ thuật này tốt hơn các trang web không có. Tuy nhiên, trong cả hai trường hợp, dường như luôn có một hoặc hai yếu tố phải "lừa hệ thống" để trông "đúng". Tôi cũng nhận thấy rằng việc chú ý đến chiều cao tổng thể (giả sử 18px cho cơ sở phông chữ 12px) làm cho việc thiết lập lề và đệm xung quanh hình ảnh, tiêu đề đồ họa và tương tự như vậy (18px). Ngoài ra ... mong muốn tính toán mọi thứ sẽ biến mất ... bạn sẽ bắt đầu nhận thấy "nhịp dọc" về bố cục và có thể kéo phần đệm / lề / chiều cao đường thẳng phù hợp từ danh sách giá trị rất ngắn trong đầu bạn.

Bài viết rất hay này trên Tạp chí Smashing về nhịp cơ sở và nhịp dọc cho bạn cái nhìn sâu sắc về cả tầm quan trọng của đường cơ sở trong thiết kế web và cách triển khai chúng trong css của bạn. Nó sử dụng kích thước phông chữ, chiều cao dòng, phần đệm và lề trên các phần tử html mặc định để sắp xếp mọi đường thẳng với lưới đường cơ sở của bạn.

Để giúp khớp mọi thứ với lưới, một hình nền rất hữu ích, như Dawson gợi ý.

Tôi đã theo đuổi kỹ thuật này cho một vài thiết kế mới nhất của tôi và tôi nghĩ nó thực sự được đền đáp.