Hiểu về typography Viết cho Web

Trong Thiết kế Web, chủ đề của typography rất quan trọng khi xem xét tất cả các lĩnh vực trải nghiệm người dùng. Mỗi trang web đều có nhu cầu về văn bản và có những hướng dẫn bạn có thể làm theo để xây dựng bố cục đặc biệt ấn tượng. Đường lưới, chữ, chiều cao phông chữ, khoảng cách văn bản, bảng màu và các thuộc tính tương tự khác đều phải được xem xét.

Trong bài viết này tôi muốn đi sâu vào lĩnh vực đánh máy web. Chúng tôi sẽ xem xét ý tưởng phổ biến đằng sau việc thiết kế các văn bản trang web đáng tin cậy. Trên đường đi, tôi sẽ giới thiệu một vài thuộc tính CSS3 hữu ích điều mà các nhà thiết kế thường quên.

Tôi đã cố gắng tập trung hơn vào lý thuyết và ý thức hệ cho Web. Điều này mang lại sự tập trung rộng hơn vào văn bản kỹ thuật số nói chung và bạn, nhà thiết kế web sau đó có thể chọn kiểu nào sẽ áp dụng cho mục đích nào. Bối cảnh luôn là chìa khóa và bạn phải xác định điều này một cách thích hợp cho từng dự án bạn làm việc. Hãy xem hướng dẫn này một gói tham khảo chứa đầy các xu hướng web hiện đại từ các nhà đổi mới chính tả trên khắp hành tinh.

Đo đoạn văn của bạn

Bạn sẽ không cần phải vượt ra khỏi thước đo cho loại đo lường này. Trên thực tế, số đo liên quan đến kiểu chữ đề cập đến chiều rộng (theo chiều ngang) của bất kỳ đoạn nào được đưa ra trên trang của bạn. Đây không phải là một chủ đề luôn được thảo luận, nhưng nó ảnh hưởng đến khả năng đọc nội dung của bạn. Theo nguyên tắc chung, bạn muốn giới hạn bất kỳ dòng nào dài khoảng 75-85 ký tự (không nhất thiết phải bao gồm khoảng trắng).

Bây giờ, điều này có vẻ như một chút kéo dài cho một số bố trí rộng hơn. Đặc biệt là nếu thiết kế của bạn trôi chảy và có nghĩa là thích ứng khi người dùng thay đổi kích thước cửa sổ trình duyệt của họ. Bạn luôn có thể đặt CSS chiều rộng tối đa tài sản trên div nội dung chính của bạn. Mã hóa lề và kích thước phông chữ theo đơn vị có thể mở rộng (tỷ lệ phần trăm, phần tử) thay vì pixel sẽ cho phép linh hoạt như vậy trong bất kỳ bố cục nào.

Không có đơn vị đo lường tối đa để cảnh giác. Cách bạn viết nội dung và hình thành từ thành câu quan trọng hơn nhiều so với chiều rộng của mỗi dòng. Nhưng hãy nhớ rằng các câu dài khó đọc hơn nhiều so với các câu ngắn gọn, súc tích.

Giải thích hàng đầu

Trong thiết kế, cùng với thước đo đoạn văn của bạn, bạn cũng nên xem xét ý tưởng của hàng đầu. Từ này được phát âm “ledd-ing”, chẳng hạn như chì được sử dụng trong bút chì. Tên này bắt nguồn từ những ngày cũ của việc sắp chữ cơ học, nơi các dải chì được đặt ở giữa các dòng văn bản.

Dẫn đầu vẫn là một khái niệm rất quan trọng trong thiết kế web và đi đôi với các biện pháp đoạn văn. Khi chiều rộng đoạn văn của bạn tăng lên, bạn nên áp dụng mức tăng tương đương với số lượng hàng đầu, hoặc khoảng cách giữa các dòng văn bản. Không gian thêm này làm cho việc đọc dễ dàng hơn nhiều trong mắt bạn.

Nếu bạn lướt qua văn bản vết thương rất chặt, bạn có thể thấy khó tập trung vào một dòng duy nhất. Nếu đây là trường hợp, hãy thử tăng số lượng hàng đầu với CSS chiều cao giữa các dòng bất động sản. Bạn luôn muốn có nhiều không gian hơn giữa các dòng văn bản hơn là giữa các từ. Nếu không, các khối văn bản của bạn có thể xuất hiện dưới dạng in báo và sẽ không thân thiện với người dùng để lướt qua.

Một kỹ thuật vững chắc là áp dụng nhiều không gian hơn mức cần thiết ban đầu và giảm bớt nếu cần thiết. Không phải tất cả văn bản đều được tạo bằng nhau và chắc chắn bạn sẽ cần các đoạn văn có định dạng nội bộ khác nhau, chẳng hạn như từ in đậm, liên kết neo, gạch chân, v.v. Với một số thay đổi bổ sung, những thay đổi này sẽ không cảm thấy mất cân bằng so với văn bản khác.

Sử dụng cỡ chữ tự nhiên

Vẫn còn một số trang web chọn gắn bó với kích thước phông chữ nhỏ hơn mức trung bình. 11px-12px có thể xuất hiện nhiều hơn “tiêu chuẩn chuyên nghiệp” cho bố trí doanh nghiệp. Nhưng những kích thước này không giúp được phần lớn khách truy cập đang tìm kiếm thông tin cụ thể.

Nói chung các trình duyệt web mặc định là 16px nếu bạn không áp dụng bất kỳ quy tắc CSS nào. Thậm chí điều này có thể được coi là hơi nhỏ nếu bạn có thêm phòng trong bố cục của mình để chứa văn bản lớn hơn. Kích thước phông chữ lớn hơn trông đẹp hơn và dễ dàng hơn để lướt qua các từ khóa tương đối. Phông chữ Serif thường không được chọn làm tài liệu đoạn văn, nhưng bạn vẫn có thể tránh xa chúng. Tôi đề nghị sử dụng kích thước văn bản lớn hơn nhiều cho phông chữ dựa trên serif để cải thiện khả năng đọc và thu hút sự chú ý.

Đáp ứng với môi trường của người dùng

Khi bạn thử các họ phông chữ và kích cỡ khác nhau, khu vực nội dung của bạn sẽ phải điều chỉnh cho phù hợp. Đơn vị tiêu chuẩn tôi gắn bó là trẻ em vì chúng có thể dễ dàng thay đổi kích thước dựa trên không gian và độ phân giải màn hình có sẵn. Điều này tối ưu hóa hiệu suất ở phần cuối của người dùng, điều quan trọng nhất.

Nhưng khi bạn có nội dung linh hoạt, nó làm cho bố cục của bạn dễ bị lỗi. Nội dung trong khu vực chân trang hoặc thanh bên của bạn có thể bị lệch hoặc mất cân bằng trong một số trình duyệt. Hoặc bạn có thể gặp khó khăn khi xếp hình ảnh hoặc các hình thức truyền thông khác trong văn bản chính của bạn. Có một số lựa chọn thay thế khác cho việc sử dụng ems nếu bạn cần bố cục kiểu cố định - nhưng hãy thử cả hai giải pháp để xem cái nào bạn thích nhất.

Hãy nhớ rằng chiều rộng cố định và kích thước đoạn văn sẽ khóa rất nhiều cài đặt trong thiết kế của bạn. Thật tuyệt vời cho nội dung bao gồm nhiều hiệu ứng thẩm mỹ cố định - nghĩ hình ảnh nền hoặc nhiều tiện ích thanh bên được trang bị. Đây cũng là một quy trình đơn giản để xây dựng một vùng chứa chất lỏng trong cột bên trái với các thanh bên cố định ở bên phải.

Phong cách dựa trên bối cảnh

Một số thủ thuật CSS thực sự gọn gàng khác đã bị ẩn khỏi thiết kế chính. Cụ thể, có những xu hướng được sao chép từ công việc in có thể được áp dụng trong bối cảnh thích hợp.

Nhiều nhà thiết kế web thậm chí chưa bao giờ sử dụng thuộc tính CSS thụt lề văn bản. Bạn cung cấp một giá trị để thụt dòng đầu tiên của bất kỳ đoạn nào được nhắm mục tiêu theo quy tắc này. Các đơn vị tuân theo các tùy chọn văn bản tiêu chuẩn như pixel, điểm, ems, tỷ lệ phần trăm. Chắc chắn đó không phải là xu hướng bạn sẽ tìm thấy trong hầu hết các blog. Nhưng nó cung cấp một nhịp điệu trang đẹp trong khi đọc qua các khối văn bản lớn.

Có một loại bộ chọn CSS khác được gọi là yếu tố giả. Điều này có thể nhắm mục tiêu một phần cụ thể của bất kỳ bộ chọn nội dung. Bộ chọn giả thư đầu tiên CSS3: hoàn hảo để tạo các kiểu ưa thích trên các đoạn quan trọng. Bạn có thể viết lên thư mở đầu của mỗi đoạn - tương tự như một cuốn truyện khá hay - sử dụng chữ in đậm, in nghiêng hoặc thậm chí thay đổi kiểu chữ. Hãy xem ví dụ tuyệt đẹp này về mũ thả bao gồm một số mã CSS bổ sung mà bạn có thể sử dụng.

Chơi với khoảng cách chữ

Tôi chắc rằng nhiều người trong chúng ta đã nghe thấy thuật ngữ theo dõi trước đây nhưng chưa bao giờ nhận ra đó là ý tưởng giống như thuộc tính khoảng cách chữ CSS. Hai khái niệm này là một trong cùng một, liên quan giữa kiểu chữ in và kỹ thuật số. Đơn vị liên quan đến khoảng trắng giữa các chữ cái trong bất kỳ dòng văn bản nào. Đây là một hiệu ứng thực sự gọn gàng để áp dụng cho các tiêu đề và thậm chí một số khối nội dung nhỏ hơn trong trang web của bạn.

Điều quan trọng là không nhầm lẫn giữa các thuật ngữ khoảng cách chữ với k sâu. Cả hai đều liên quan đến kiểu chữ và khoảng cách giữa các chữ cái. Tuy nhiên, k sâu đặc biệt đề cập đến khoảng cách giữa 2 chữ cái riêng lẻ trong một từ. Thuộc tính khoảng cách chữ sẽ áp dụng cho toàn bộ yếu tố của văn bản, có thể là một từ hoặc đoạn hoặc tiêu đề hoặc liên kết neo. Hãy ghi nhớ điều này khi bạn chơi xung quanh với những ý tưởng mới cho phong cách.

Tôi thường sử dụng một vài pixel / điểm khoảng cách chữ trong các tiêu đề với tất cả chữ hoa. Điều này phá vỡ các ký tự riêng lẻ với một số khoảng trắng thừa và cũng xuất hiện dưới dạng rất xác định “tiêu đề” nhìn. Khoảng cách chữ tiêu cực cũng hoạt động tuyệt vời trong bối cảnh đúng. Tôi thường bám vào các đơn vị nhỏ hơn, có thể tối đa -0,03 hoặc -0,1em.

Kết hợp và kết hợp kiểu chữ

Các khái niệm thiết kế đằng sau kiểu chữ web chắc chắn là một hình thức nghệ thuật, không quá khoa học. Có những hướng dẫn bạn có thể làm theo, nhưng không có quy tắc kiên định nào mà bạn bị giới hạn. Điều này có nghĩa là bạn có rất nhiều quyền tự do để thử nghiệm trộn và kết hợp các phông chữ khác nhau mà bạn có quyền truy cập vào.

Cho đến nay, sự kết hợp phổ biến nhất của kiểu chữ bao gồm phân tách serif / sans-serif cho nội dung tiêu đề và đoạn văn. Tôi muốn chuyển lên cả hai, nhưng thường xuyên hơn tôi sẽ sử dụng phông chữ serif trong các phần tiêu đề. Các dấu và nét thêm trên mỗi chữ cái làm cho chúng có vẻ phẳng hơn khi văn bản trang chiếm ưu thế.

Ngoài ra, phông chữ sans-serif sạch hơn và dễ dàng hơn để ghép lại với nhau trong câu. Điều đó không có nghĩa là phông chữ serif sẽ không hoạt động trong các đoạn văn. Trong thực tế có rất nhiều ví dụ tuyệt vời! Nhưng một khái niệm ít được biết đến có tên x-height rất quan trọng để phân biệt sự phức tạp của một kiểu chữ. Từ việc nhìn vào đường cơ sở của một vài từ bạn sẽ biết được cách các phông chữ đó sẽ “phù hợp với” với nhau.

Cũng đáng lưu ý tầm quan trọng của không gian giữa các yếu tố khác nhau này. Bạn có thể sẽ sử dụng 2 hoặc 3 kiểu tiêu đề khác nhau, vì vậy mỗi kiểu sẽ xuất hiện với sự xuất hiện khác nhau. Tôi có xu hướng giữ các yếu tố h2 / h3 của mình gần hơn một chút với khối đoạn văn sau, vì điều này ngụ ý có một mối tương quan giữa nội dung.

Mối tương quan này đặc biệt hữu ích khi bạn sử dụng hai kiểu chữ hoàn toàn khác nhau ngay cạnh nhau. Tôi đề nghị không quá 3 họ phông chữ khác nhau cho mỗi bộ nội dung. Sau quá nhiều tùy chỉnh, các từ của bạn xuất hiện lộn xộn với nhau và toàn bộ trang xuất hiện trông giống như một loạt các phông chữ bị hiểu sai.

Phần kết luận

Tôi hy vọng những khái niệm này sẽ làm sáng tỏ chủ đề phức tạp của kiểu chữ kỹ thuật số. Có thể khó thực sự tham gia vào công việc như một nhà thiết kế, đặc biệt nếu toàn bộ chủ đề xa lạ với bạn. Nhưng hãy tiếp tục học và chắc chắn sẽ luyện tập cả đống!

Tuần tới: Hãy theo dõi khi chúng tôi sẽ xem xét một số công cụ và tài nguyên hữu ích cho kiểu chữ web tốt hơn.

Hơn…

Dưới đây là nhiều bài viết liên quan đến typography:

• Giới thiệu các thiết kế web với kiểu chữ đẹp
• Kiểu chữ tốt hơn cho các trang web hiện đại
• Hướng dẫn nhanh về kiểu chữ: Tìm hiểu và được truyền cảm hứng