Paragraph Hoàn Hảo trong Thiết Kế Web

Tran Minh Hong 04.02.2012 0

Trong bài viết này, tôi muốn giúp bạn làm quen lại với phương tiện truyền đạt thông tin căn bản nhất, đó chính là paragraph. Paragraph được dùng khắp nơi và thực tế là có rất nhiều rủi ro liên quan. Mặc dù paragraph được sử dụng phổ biến nhưng dường như chúng ta vẫn thường bỏ qua cách trình bày và đó là một sai lầm khá lớn. Ở đây, chúng tôi sẽ đề cập đến một số kiểu sắp xếp chữ truyền thống lâu đời, nhấn mạnh về khía cạnh dễ đọc và cung cấp những hướng dẫn nhằm thích ứng theme với các thiết bị và màn hình một cách hiệu quả. Chúng ta sẽ thấy việc dùng @font-face không phải là giải pháp cho tất cả thách thức liên quan đến Typography.

Một trang web đầy chữ

Năm 1992, Tim Berners- Lee đã cho ra đời một tài liệu có tiêu đề “HTML Tags” với phác thảo của 20 tag, rất nhiều trong số đó giờ đã lỗi thời hoặc chuyển thành hình thức khác. Paragraph tag là tag đầu tiên được xác định trong tài liệu này, sau anchor tag. Đến năm 1993, một cuộc thảo luận sôi nổi về image tag đã xuất hiện.

Sự bùng nổ của hình ảnh, tương tác, motion và những rắc rối kèm theo, ngày nay World Wide Web vẫn chủ yếu chuyển tải thông tin thông qua văn bản. Trong HTML5, việc tập trung vào văn bản và tác giả là rõ ràng nhất. Hiển nhiên rằng các yếu tố như article và aside luôn xuất hiện. Ngoài ra, HTML5 còn mang lại cho chúng ta nhiều hơn thế nữa, đó là một document.

Không chỉ đặc điểm kỹ thuật được thay đổi. Hầu hết các tag được tạo từ thuật toán của google, bắt đầu bằng việc ưu tiên văn bản và nội dung có giá trị hơn ( bao gồm cả việc phát triển chiến lược nội dung.) Các chương trình của Google ngày nay đều có các câu hỏi đại loại như “Bài viết có được edit tốt?” hoặc “Bài viết được thực hiện một cách cẩn thận hay cẩu thả? “Bài viết có làm rõ chủ đề?” … một loạt câu hỏi mà các vị giáo sư luôn muốn đưa ra.

Những hỗ trợ này giúp tăng chất lượng của nội dung, liên kết với book-like tiện lợi và các tablet, điện thoại thông minh, điều đó có nghĩa là không gì tốt hơn khi đọc online. Nhiệm vụ còn lại là làm cho nội dung trở nên thú vị để có thể đọc.

Paragraph hoàn hảo là gì?

Là một designer, chúng ta thường xuyên lầm tưởng rằng công việc của chúng ta là làm mọi thứ trông thật đẹp. Chúng ta là những designer, không phải là nghệ sĩ và không có khái niệm về chủ nghĩa hình thức trong một thiết kế tốt. Thiết kế web cần có chức năng và chức năng đó là truyền đạt thông điệp về lý do trang web được hình thành. Phương tiện truyền đạt không chỉ là thông điệp.

Theo nguyên tắc này, không gì thích hợp là việc xử lý kiểu chữ, nhiệm vụ chính của một trang web là truyền đạt thông tin. Một paragraph đầy chữ sẽ không chuyển tải đến người đọc một cách tốt nhất, cần có ý tưởng để paragraph như một công cụ truyền đạt thông tin. Trên thực tế, paragraph hoàn hảo cần khiêm tốn đến mức tàng hình. Điều đó không có nghĩa rằng sự xuất hiện của văn bản không cần sự hấp dẫn. Ngược lại, typography cân đối, dễ đọc là khá đẹp; chỉ là chúng không khiến bạn gặp khó khăn khi đọc.

Là một ngành công nghiệp non trẻ liên tục đổi mới và tỷ lệ những người thực hành dựa trên khả năng nắm bắt những công nghệ mới, framework, hình thức và mô hình dữ liệu ngày càng tăng, và chúng ta không đặc biệt chú trọng đến truyền thống. Tuy nhiên, việc thực hành sắp xếp kiểu chữ vui nhộn và dễ nhìn là quy luật từ nhiều thế kỷ nay. Vào 1927, typographer Jan Tschichold đã nói về nghệ thuật sắp chữ trong “Những phương pháp và quy tắc nhằm cải thiện nghệ thuật sắp xếp chữ”- một tập hợp các quy tắc không thể bỏ qua.

Vì vậy trước tiên hãy đặt yếu tố canvas và dữ liệu trực quan API sang một bên. Chúng ta sẽ tập trung vào kỹ năng sắp xếp chữ và nó được gọi là “hypetext”.

Thiết lập Paragraph của bạn

Typeface

Sự lựa chọn font chữ khá quan trọng nhưng kiểu chữ trong tập hợp gia đình font chữ lại là nhiệm vụ cụ thể hơn và chúng ta sẽ không thảo luận về nó ở đây ngoại trừ việc các web designer theo thường lệ đều chỉ sử dụng các font sans-serif – những font chữ phù hợp cho phần nội dung, đó chính là nguyên tắc ngón tay cái. Mặc dù các font serif khá phức tạp bởi chúng có xu hướng gây khó đọc với kích thước nhỏ và có rất nhiều yếu tố khác cần cân nhắc. Ví dụ x-height quá nhỏ có thể giảm khả năng đọc của một font chữ. Một số font serif rất rõ ràng và tạo sự hấp dẫn cho paragraph nếu chúng được cài đặt đúng cách. Screen-sympathetic của Matthew Carter (http://en.wikipedia.org/wiki/Matthew_Carter) sử dụng Georgia là một trong những ví dụ tuyệt vời của việc sử dụng font serif.

Sau khi đã cân nhắc các đối tượng ưu tiên, hãy chú ý đến một số vấn đề kỹ thuật quan trọng có liên quan một khi đã sự lựa chọn typeface.

Điều đầu tiên cần cân nhắc khi lựa chọn font chữ của một trang web (@font-face) là chiều rộng của loại font trong tập hợp font chữ. Liệu các loại font này có thể in đậm, in nghiêng (hoặc thậm chí là bán đậm, và vừa đậm vừa nghiêng?) Mỗi phong cách đều có thể phù hợp cho phần heading nhưng paragraph cần nhiều hơn thế. Nếu không có những biến thể theo ý của bạn, văn bản sẽ trở nên tẻ nhạt và việc thiếu những tùy chỉnh cần thiết sẽ làm văn bản khó theo dõi.

Với việc thay đổi hàng loạt các phong cách khác nhau, bạn sẽ không phải dựa vào những phong cách không thích hợp như “faux” để áp dụng cho font bình thường như font-style: italic hoặc font-weight: bold. Typeface không được thiết kế chỉ để tạo ra những kiểu như vậy. Sử dụng phong cách thích hợp như Bitstream ở trên sẽ giúp cho typographic của bạn không chỉ lôi cuốn mà còn dễ tiếp cận hơn: trang trí in nghiêng sẽ giúp nội dung rõ ràng hơn, đơn giản chỉ là cho nó hơi nghiêng một chút.

Bí quyết nhằm đảm bảo việc sử dụng, ví dụ font-style: italic sẽ tạo ra những kiểu chữ in nghiêng hơn việc dùng phong cách faux. Có thể sử dụng hệ thống font gia đình như Georgia. Như rất nhiều thứ, điều này có thể được giải thích tốt nhất thông qua code. Nói ngắn gọn, chúng ta sẽ thiết lập thay đổi giữa phông chữ bình thường với in nghiêng (không in đậm).

@font-face {
font-family: ‘MyWebfont’; /* Change this to whatever you like. */
src: url(‘mywebfont-regular.ttf’) format(‘truetype’); /* The “regular” font resource. */
font-style: normal; /* Associates values of “normal” with this resource. */
font-weight: normal; /* As above for weight. */
}

@font-face {
font-family: ‘MyWebfont’; /* Importantly, the same as in the above block; the family name. */
src: url(‘mywebfont-italic.ttf’) format(‘truetype’);
font-style: italic; /* Associates values of “italic” with this resource. */
font-weight: normal; /* … It’s not a bold-italic font style. */
}

body {
font-family:’MyWebfont’, georgia, serif; /* Provides a system font fallback. */
}

em {
font-style: italic; /* If @font-face is supported, the italic Web font is used. If not, the italic Georgia style is lifted from the user’s computer. Either way, a faux style is not allowed to creep in. */
}
Thứ hai cần chú ý đến typeface hiển thị tương ứng. Một số font chữ có trang trí khá đẹp và có thể phân chia một cách đặc biệt, đơn giản chỉ là chúng không hiển thị rõ ràng với kích thước nhỏ. Bạn sẽ nhận thấy rằng các font chữ này thường được sử dụng cho phần heading trong khi các font hệ thống (như Verdana lại dành cho phần nội dung chính).

Một trong những lợi thế là vì font Verdana khá dễ đọc ngay cả khi thu nhỏ. Delta hinting cho thấy cách một phông chữ cụ thể hiển thị kích thước nhỏ trên màn hình. Phông chữ càng nhỏ, càng cần ít pixel trang trí, đòi hỏi cấu hình nhanh để giữ cho font chữ nhỏ dễ đọc. Đó là nghệ thuật quen thuộc đối với các Web designer- họ luôn cố gắng để các icon nhỏ

Hinting là một quá trình khó khăn và tốn nhiều thời gian và không phải font Web nào cũng được hinting toàn diện. Lưu ý rằng phần trên của chữ “b” thường hiển thị khác đi, ví dụ như của font Crimson Trục trặc nhỏ này làm mất tập trung và gây khó chịu khi đọc. Hiệu ứng được minh họa như dưới đây và bạn có thể xem bản demo tại (http://www.fontsquirrel.com/fontfacedemo/Crimson).

Tin tốt là việc thêm vào những font chữ đã trở nên phổ biến hơn, thiết kế font chữ ngày càng cẩn trọng hơn trong việc xử lý hiển thị và cung cấp hướng dẫn tốt hơn bao giờ hết. Bản thân typekit đã cải thiện bằng cách re-hinting các font chữ phổ biến như Museo. Tốt nhất là bạn nên xem các font chữ hiển thị như thế nào trước. Tiết kiệm thời gian bằng cách tránh các font có từ “thin” hoặc “narrow” trong tên gọi của chúng.

Kích thước font chữ và measure

Bài viết (http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/) trên Smashing Magazine là minh chứng khá thuyết phục, bạn có thể làm ảnh hưởng đến khả năng đọc bằng cách mạo hiểm với kích thước font 16 pixel cho paragraph. Tất cả trình duyệt phổ biến mặc định hiển thị văn bản 16 pixel. Đây là kích thước khá tốt (một số nhà sản xuất trình duyệt có xu hướng không đồng ý rằng 16 pixel là một tiêu chuẩn rõ ràng). Hơn nữa, những gì bài viết đã cho thấy tiêu chuẩn này còn được áp dụng trong in ấn typography.

Chúng ta thường dùng 16px cho toàn bộ phần nội dung trong các sheet CSS. Điều này mang lại cảm giác hoàn hảo bởi nó giống như do “trình duyệt chọn giúp bạn 100%”. Nếu bạn muốn paragraph lớn hơn 16 pixel, chỉ cần chỉnh giá trị trong các khối body bằng cách sử dụng “whole pixel”. Tại sao lại là “whole pixel”? Có 2 lý do. Đầu tiên là tất cả giá trị rất khác nhau và dễ dàng sử dụng như một tỷ lệ trong các sheet. Thứ hai, trình duyệt có xu hướng làm tròn giá trị “sub-pixel” khác nhau và cho những kết quả không phù hợp. Kích thước font 18 pixel được thể hiện theo tỷ lệ 112.5 % (1.125 x 16).

Bình thường hóa kích thước của văn bản mặc định (hoặc “paragraph text” nếu bạn đã thuần thục), điều này rất quan trọng vì nó sử dụng đơn vị ems như một tỷ lệ kích thước cho toàn bộ heading và những yếu tố khác. Ví dụ, để có h3 heading là 1.5 lần so với kích thước paragraph, chúng ta có thể chọn giá trị 1.5 em. Bởi ems (phát âm là “Emma: không phải là E.M Forster) là đơn vị liên quan, giúp thay đổi kích thước font chữ mặc định. Điều này giúp cố định phong cách các sheet một cách dể dàng và đảm bảo tỷ lệ kích thước heading không tăng hoặc giảm khi điều chỉnh kích thước của văn bản trong paragraph.

“Measure” là số ký tự trong mỗi dòng văn bản. Chọn measure phù hợp là điều khá quan trọng đối với khả năng sử dụng, bởi nếu dòng quá dài, quá trình scan sẽ bắt đầu lại từ đầu. Nếu không nắm rõ điều này, người đọc có thể bỏ qua hoặc đọc lại dòng. Trong The Elements of Typographic Style, Robert Bringhurst đã sử dụng measure bất kỳ giữa hai giá trị 45 và 75 ký tự. Đó là lý do chính tại sao chúng ta sử dụng max-width để có một thiết kế layout tối ưu.

Kể cả khi bạn sử dụng chiều rộng tối đa cho trang, bạn vẫn cảm thấy chật hẹp. Theo một nghiên cứu chuyên sâu về các mẫu thiết kế typographic xuất bản trên Smashing Magazine, các trang web thường sử dụng khoảng 88.74 ký tự, vượt xa phạm vi tối ưu.

Leading và Vertical

Leading (phát âm là “Ledding”) là khoảng trắng giữa các dòng liên tiếp của văn bản. Leading có tác dụng tăng khả năng sử dụng tương tự như “measure” bởi nó giúp xác định và phân biệt khoảng cách các hàng trang trí từ trái sang phải và ngược lại. Thủ thuật với leading là tránh thêm vào quá nhiều thứ: văn bản với các đường line quá xa nhau gây cảm giác như bị phân mảnh và làm cho mục đích sử dụng của leading hoàn toàn mất tác dụng.

Trong typesetting tự động, leading được thiết lập bằng cách chèn giữa các dòng. Trong CSS, line-height là công cụ mà chúng ta sử dụng và việc sử dụng công cụ này có thể làm bạn phát điên.

Thay vì chú ý đến khoảng cách giữa các dòng, với leading, line-height là giá trị chung cho tất cả các dòng- bao gồm text và khoảng trắng đi kèm. Có 3 cách đế thiết lập: khoảng cách không chuẩn, khoảng cách rộng và khoảng cách chuẩn.

Khoảng cách không chuẩn là tùy chỉnh line-height theo đơn vị pixel. Bằng cách thêm vào giá trị tuyệt đối, chúng ta có thể làm hỏng tất cả các phần đã làm tốt trước đó. Cũng như khi font-size tăng (kể cả trong sheet hoặc trong thiết lập trình duyệt của người dùng), line-height sẽ bị hỏng. Điều này tạo ra hiệu ứng khá thú vị như sau:

Vì vậy, chúng ta nên dùng cùng một đơn vị em mà chúng ta thấy trong phần cuối cùng. Đây là cách dự phòng. Mặc dù phương pháp này khá ổn nhưng dùng đơn vị em là không cần thiết. Thay vào đó, chọn giá trị của là 1.5 cho line-height nghĩa là sẽ có một kích thước font phù hợp. Line-height là thuộc tính riêng của CSS có thể sử dụng đơn vị số.

p {
font-size:; /* Silence is golden; implicity 1em. */
line-height: 1.5;
}

Bạn sẽ thấy rằng tôi chỉ đề cập đến kích thước font chữ là số chẳn. Lý do là bởi tôi ủng hộ chiều cao dòng 1.5 là vì nếu font chữ 18 pixek nghĩa là chiều cao dòng là 27 pixel hoặc nếu thích, bạn vẫn có thể dùng 9 pixel. Sử dụng số chẳn là một nỗ lực nhằm duy trì toàn bộ giá trị pixel- tôi biết rằng bất cứ số nào khi nhân với 1.5 đều là một số nguyên. Quy định line-height cho toàn bộ là việc rất quan trọng bởi đó là chìa khóa để có được chiều cao đồng đều.

Duy trì chiều cao đồng đều (hoặc tạo một grid cơ bản) là cách tốt nhất để chắc chắc chiều cao của mỗi yếu tố trên trang (bao gồm các danh sách, heading và các khối) chia hết cho một số chung. Con số này thông thường bắt nguồn từ chiều cao của một dòng văn bản. Bạn có thể thấy lý do tại sao giá trị 26.5 pixel sẽ gặp lỗi khi tạo một giá trị chung.

Lợi ích của việc duy trì chiều cao đồng đều là khả năng đọc sẽ dễ dàng so với hinting, measure hoặc leading, nhưng chúng cũng rất quan trọng. Bởi chúng tôi chắn chắn rằng cho đến nay tất cả phép đo đều phụ thuộc lẫn nhau và có mối quan hệ mật thiết, việc thay đổi kích thước font chữ phần nội dung (bằng tất cả các cách) sẽ hỏng chiều cao đồng đều của cả trang.

Cần lưu ý, mặc dù chiều cao dòng là 1.5 khá tốt những không phải tất cả các font chữ đều như nhau. Các font chữ có x-height hoặc có móc đuôi dài có thể có khoảng cách lớn hơn, tách biệt hơn so với hàng đầu. Khi khả năng đọc cơ bản không đáp ứng được, việc áp dụng chiều cao đồng đều sẽ rất phức tạp.

Khoảng cách giữa các từ và canh đều

Không có các chỉnh sửa, paragraph text trên trang web sẽ được thiết lập canh trái mặc định (text-align: left trong CSS): bắt đầu mỗi dòng đều canh lề trái nhưng chiều dài dòng khác nhau gây nên hiệu ứng không thẳng hàng bên phải. Nếu bạn cũng giống tôi, bạn sẽ thích việc canh đều như minh họa sau đây. Tuy nhiên, việc thực hiện canh đều mà không ảnh hưởng đến khả năng dễ đọc thì không hề đơn giản trong HTML vì đó là phần mềm ứng dụng cho máy tính.

Vấn đề gặp phải khi sử dụng canh đều trong HTML (text-align: justify) là khoảng cách giữa các từ. Trong các phương tiện in ấn (như báo chí), gạch nối được sử dụng để tách những từ dài. Kết quả là có nhiều phần nhỏ của từ bị tách riêng trên mỗi dòng, do đó cần sắp xếp và hạn chế khoảng cách giữa các từ. Trình duyệt không tự động gạch nối, và các phần mềm giúp chèn gạch ngang (­) sẽ thực hiện nhất quán. Bên cạnh đó, hãy tưởng tượng khi chèn bằng &shy, nó sẽ thực hiện cho tất cả phần nội dung của bạn. Canh đều trong CSS3 sẽ giúp chúng ta kiểm soát dễ dàng thông qua text-align: justify, giúp giải quyết vấn đề dễ dàng bằng cách phân dấu gạch ngang liên ký tự. Điều kỳ lạ là nó chỉ thực hiện với Interner Explorer.

Rất may là ngày nay, Firefox và Safaringang đều hỗ trợ CSS hyphens có thể giúp bạn động chèn dấu bằng tay với &shy. Trên thực tế, bạn có thể tạo dấu gạch trong một document bằng cách sử dụng hyphens: manual. Trình duyệt đã được quy định nhưng Lea Verou có thể giúp bạn thực hiện điều đó.

Mặc dù các trình duyệt khác có thể làm được, một giải pháp phù hợp với trình duyệt hiện tại chỉ có thể là JavaScript. Hyphenatorl là công cụ mạnh mẽ có một thư viện cho mỗi ngôn ngữ và sử dụng chèn dấu gạch ngang tự động. Nó khá xa xỉ (hai script tổng cộng 72KB chỉ có thể thực hiện bằng tiếng Anh) nhưng khá hiệu quả. Hiệu quả của nó được thể hiện trong screenshot của phần này

Cuối cùng: Style theo ngữ cảnh

Bây giờ chúng ta đang xử lý với kích thước, các thiết lập và paragraph, bạn có thể sẽ muốn thêm vào một số cải tiến nhỏ và trang trí để có những document rõ ràng hơn. Những sắc thái liên quan đến các paragraph nhất định và chọn kiểu paragraph phù hợp ngữ cảnh. Với sự giúp đỡ của các công cụ lựa chọn đặc biệt và công cụ kết hợp, chúng ta sẽ dễ dàng có được paragraph đặc biệt phụ thuộc và vị trí chúng xuất hiện trên trang, hãy đảm bảo sự khác biết trong thiết kế của chúng sẽ phù hợp với vai trò và mục đích ý nghĩa.

Hãy sử dụng thụt đầu dòng như một cách để giới thiệu. Mặc dù ít phổ biến trong Web hơn trong in ấn, thụt đầu dòng mỗi đoạn là phương pháp thông thường để tách các paragraph thành các phần thông tin nhỏ. Khoảng cách đều giữa các đoạn tương tự như dấu chấm câu: nó giúp người đọc được tạm dừng trước mỗi đoạn văn bản. Thụt đầu dòng không cần thiết cho đoạn đầu tiên, vậy tại sao bạn lại dừng lại trước mỗi đoạn bắt đầu? Chúng ta nên loại trừ nguyên tắc này trong CSS. Sử dụng các công cụ kết hợp, chúng ta có thể có được những paragraph tương tự như paragraph trước đó, và các quy ước dường như khá quen thuộc với typography trong nhiều thế kỷ qua chính là việc sao chép một cách khéo léo.

p + p {
text-indent: 1.5em /* I like to keep the indentation length equal to the line height. */
}

Trong ví dụ tiếp theo, tôi đã kết hợp với :first-letter để trang trí cho phần giới thiệu với chữ cái in hoa nổi lên trên.

h1 + p:first-letter {
font-size: 2em;
line-height: 0; /* The line-height must be adjusted to compensate for the increased font size, otherwise the leading for the overall line is disrupted. I find that any values below 0.4 work. */
}

Thêm vào những cải tiến này thật sự hiệu quả chỉ khi có ý nghĩa và thích hợp (rất nhiều trong số đó được thực hện bởi Jon Tan, bao gồm “Drop caps” và “out dents”). Ví dụ, phong cách first-letter ở trên chỉ phù hợp cho phần giới thiệu bởi đoạn paragraph giới thiệu luôn bắt đầu bằng heading h1. Nói cách khác, chúng ta có thể đảm bảo ý nghĩa thông qua thiết kế.

Miễn chúng ta tuân thủ nghiêm ngặt theo ngữ nghĩa trong HTML, bạncó thể sử dụng nhiều sắc thái để sắp xếp lại toàn trang và giới thiệu nội dung.

Kết luận

Như khi xuống lối đi của thư viện, tôi chỉ lướt qua mà không chú ý đến hầu hết các kệ sách ở hai bên. Chỉ khi có một người điên rồ nào đó gợi ý với tôi rằng việc bỏ qua những cuốn sách này đồng nghĩa với việc những trang sách của họ sẽ mất đi. Tuy nhiên những nghiên cứu đã cho thấy trung bình, một khách truy cập không đọc toàn bộ trang web và vì sự thành công của một trang web dễ dàng đo lường bằng hành động của người dùng hơn là do nhận định. Chúng tôi thường khuyến khích việc chú trọng đến văn bản trực quan hoặc các gợi ý hành động hơn.

Chắc chắn hầu hết mọi người sẽ bỏ qua phần nội dung của bạn nhưng nếu bạn thực sự có điều gì đó muốn nói, đừng bỏ qua những ai sẵn lòng giúp bạn thay đổi. Một typography tốt cần phù hợp với từ ngữ và từ ngữ cần phù hợp với những ý tưởng của bạn. Nếu người đọc cảm thấy thoải mái khi đọc, họ sẽ thích thú về những gì bạn viết hơn.

Bình Luận »