Thiết kế | Logo | Identity | Website | Advertising | Decor | Package Thiết kế | Logo | Identity | Website | Advertising | Decor | PackageRelated Articles
Paragraph hoàn hảo trong thiết kế Website
Bạn bắt gặp paragraph ở khắp mọi nơi nhưng thường bạn hay bỏ qua hoặc không quan tâm nhiều đến cách thể hiện của chúng, đó chính là sai lầm. Trong bài viết hôm nay, chúng ta sẽ cùng đề cập đến một vài quy ước về việc sắp xếp các ký tự chữ trong paragraph, nhằm làm sao nhấn mạnh được tính dễ đọc và tương thích một cách hiệu quả với các thiết bị và màn hình. Qua bài viết bạn sẽ nhận thấy việc sử dụng thuộc tính @font-face chưa hẳn là giải pháp cho tất cả những thử thách chúng ta sẽ gặp phải khi làm việc với typography.
Trang web chữ
Năm 1992, Tim Berners-Lee đã lưu hành một tài liệu có tiêu đề là “HTML Tags”. Trong tài liệu đó ông đã nêu lên khoái quát gồm 20 thẻ html, trong đó có nhiều thẻ cho đến nay đã trở thành lỗi thời hoặc được đưa vào sử dụng ở các dạng khác. Các thẻ đầu tiên còn tồn tại trong số các thẻ được định nghĩa trong tài liệu đó sau thẻ neo (tag) rất quan trọng là thẻ paragraph (
tag). Đến năm 1993, sau khi có một cuộc thảo luận giữa những nhà làm Web thì thẻ hình ảnh ( tag) mới bắt đầu xuất hiện.
Sự bùng nổ trong việc sử dụng hình ảnh, sự tương tác và chuyển động dường như đã làm mờ nhạt đi vai trò của các paragraph mặc dù các trang web ngày nay về cơ bản vẫn chỉ là nơi truyền tải thông tin cho người xem thông qua việc đọc là chủ yếu. Trong HTML5, việc tập trung vào nội dung và quyền tác giả là điều dễ nhận thấy hơn bao giờ hết. Và để nhất mạnh thêm cách làm trên thì những nhà phát triển web đã bổ sung vào các phần tử mới có tên là article và aside. HTML5 yêu cầu chúng ta phải xử lý các tài liệu HTML tốt hơn mức một tài liệu văn bản thông thường. Không chỉ thay đổi về các đặc tính kỹ thuật mà phần lớn chúng được thực hiện hoán vị theo hướng thuật toán của Google, kỹ thuật này đang bắt đầu ưu tiên nhiều hơn cho những paragraph được xử lý tốt và có nội dung chính thống ( và nó đã tạo nên một chiến lược phát triển cho ngành công nghiệp nội dung ). Hiện nay Google có những câu hỏi như, “Bài viết đã được chỉnh sửa tốt, hay được tạo ra một cách cẩu thả, tùy thích?” hay “Bài viết này có cung cấp đầy đủ những mô tả về đề tài được nêu ?”. Đấy cũng là một trong số hàng loạt câu hỏi mà các giáo sư đại học luôn muốn đặt ra
Việc tăng hỗ trợ cho chất lượng của paragraph, liên kết được với những tiện ích của điện thoại thông minh và máy tính bảng, giúp cho việc đọc chưa bao giờ dễ dàng hơn lúc này. Nhiệm vụ còn lại là làm cho những paragraph trở nên hấp dẫn đối với người đọc.
Thế nào là một paragraph hoàn hảo ?
Với tư duy của người thiết kế, chúng ta thường suy nghĩ một cách sai lầm về công việc của chúng ta làm là: “chỉ tạo ra những cái đẹp”. Nên nhớ, chúng ta là những người thiết kế web thực thụ – không phải là họa sĩ, và không có chỗ dành cho chủ nghĩa hình thức trong một thiết kế tốt. Thiết kế web có một chức năng và chức năng đó chính là truyền tải một thông điệp mà vì chính thông điệp đó mà nó được thiết kế lên. Trang web là một phương tiện truyền thông chứ không phải chỉ là một bảng thông tin.
Một bài viết với đầy đủ nội dung không chắc sẽ tạo được ấn tượng cho người đọc, mà điều gây được ấn tượng với họ chính là ý tưởng mà bài viết đó truyền tải. Trong thực tế không có khái niệm về một paragraph hoàn hảo. Tuy nhiên, như vậy cũng không có nghĩa là khi xử lý các paragraph không cần thêm những yếu tố gây hấp dẫn. Ngược lại, một paragraph có cách trình bày dễ đọc và cân bằng cũng là một nét đẹp, nó không chỉ khiến người đọc bị lôi cuốn mà có thể khiến họ không quá chú ý đến nội dung bài viết.
Marcin Wichary
Là một ngành công nghiệp trẻ luôn có sự đổi mới và có tỷ lệ chuyên viên làm việc có kỹ năng tốt về việc nắm bắt những công nghệ mới, hiểu biết về frameworks, các giao thức mô hình dữ liệu (Protocols and data models), ngày một nhiều khiến chúng ta không còn chú trọng nhiều đến những kỹ thuật, công nghệ cũ. Tuy nhiên, kỹ thuật sắp chữ là một kỹ thuật đã có từ nhiều thế kỷ trước và cho đến nay nó vẫn còn hữu dụng. Năm 1927, một thợ in nổi tiếng có tên Jan Tschichold đã từng nói “Các phương pháp, quy tắc trong việc sắp chữ không được cải tiến! ” – thật đáng tiếc là những quy tắc này đang dần bị xem nhẹ.
Để nắm vững lại những kỹ năng sắp xếp những ký tự trong paragraph, chúng ta hãy tạm thời quên đi những gì liên quan đến API ( Application Programming Interface ) hay phần tử canvas trong html5, mà chúng ta hãy bắt đầu từ thuật ngữ “hypertext”.
Sắp xếp paragraph
Typeface – kiểu chữ
Lựa chọn font chữ rất quan trọng. Thông thường, các nhà thiết kế web có xu hướng chỉ sử dụng các font chữ sans-serif (chữ không chân) cho phần nội dung thay vì dùng font chữ serif (chữ có chân), và đây cũng được xem như là “Rule of Thumb” trong thiết kế. Mặc dù font chữ serif khá phức tạp, đọc không rõ khi được thiết lập ở kích thước nhỏ. Ngoài ra, yếu tố chiều cao (x-height) cũng làm ảnh hưởng đến tính dễ đọc của nội dung. Tuy nhiên, cũng có một vài font chữ serif cũng rất dễ đọc và tạo được sự lôi cuốn cho paragraph nếu biết cách trình bày, màn hình hiệu Georgia của Matthew Carter dưới đây như một ví dụ.
x-height là khoảng cách giữa các baseline và midline của chữ – đơn vị tính là chiều cao của ký tự chữ thường.
Sau khi miễn trừ những vấn đề ưu tiên, bây giờ chúng ta sẽ đề cập về các kỹ thuật có liên quan đến việc chọn kiểu chữ. Điều đầu tiên phải xem xét khi chọn kiểu chữ cho web (@font-face) đó chính là độ rộng của kiểu chữ, bạn cũng cần lưu ý đến các kiểu chữ như in nghiêng, đậm. Có thể sử dụng một kiểu chữ cho phần tiêu đề (headline) nhưng phần nội dung cần đa dạng hơn để trách sự tẻ nhạt và không tạo được điểm nhấn, làm cho người xem không hứng thú khi theo dõi.
Với nhiều kiểu biến đổi tùy ý, bạn sẽ không phải dựa và những phong cách không đạt chuẩn như “faux” để áp dụng cho một font chữ thường khi sử dụng thuộc tính font-style:italic hay font-weight:bold. Các kiểu chữ này không được thiết kế để bị bóp méo theo cách này. Để sử dụng cho đúng cách và thích hợp, chúng ta được cung cấp một nhóm font chữ Bitstream, (ví dụ hình trên). Theo cách này, không những paragraph của bạn trông hấp dẫn mà còn dễ tiếp cận hơn: dùng những chữ tượng hình nghiêng sẽ giúp cho paragraphy rõ ràng hơn nhiều so với paragraph đơn giản là chỉ cho “ngã đi một chút”.
Bí quyết nhằm đảm bảo việc khai báo mã, ví dụ thuộc tính font-style:italic sẽ tạo ra những kiểu chữ in nghiêng chính xác hơn việc dùng kiểu giả. Bạn có thể sử dụng họ font như Georgia. Để giải thích điều này bạn sẽ xem đoạn mã dưới đây.
Kiểu chữ thứ hai chúng ta cân nhắc đến sẽ liên quan đến việc hiển thị trên màn hình. Một số font chữ cung cấp nhiều chữ tượng hình đẹp và kerning đặc biệt tuy nhiên nó không dễ đọc khi ở kích thước nhỏ. Bạn sẽ nhận thấy các font chữ đặc biệt được nhúng vào trang web chỉ thường dành cho các tiêu đề, trong khi đó thì các font chữ hệ thống có sẵn trong máy người truy cập lại dùng cho các paragraph nội dung. Ví dụ như font chữ Verdana.
Một trong những lợi thế của Verdana là rất dễ đọc khi được thiết lập ở kích thước nhỏ. Delta hinting quy định thông tin trong một font chữ mà đặc biệt là nâng cao việc nó xuất ra trên màn hình nhỏ. Font chữ nhỏ hơn sẽ cần ít các điểm ảnh (pixel) để hiển thị hơn, nó cũng yêu cầu cấu hình thông minh hơn để giữ cho các font chữ dễ đọc. Đó là một nghệ thuật mà bất kỳ nhà thiết kế web nào nên quen thuộc khi cố gắng để làm cho icon nhỏ đi và dễ hiểu.
Hinting là quá trình khó khăn và tốn nhiều thời gian, và không nhiều font chữ web được hinting toàn diện. Lưu ý phần vòm (bowl) trên của chữ “b” thường trong font Crimson ấn tượng hơn các font chữ khác. Ví dụ, nếu không may có rủi ro xảy ra thì sự khác biệt này sẽ khiến cho người xem mất tập trung và dẫn đến việc khó đọc phần nội dung. Hình minh họa dưới đây sẽ giúp bạn hiểu hơn vấn đề được nói trên.
Việc thêm những font chữ lạ đang trở nên phổ biết hơn trong phát triển web, thiết kế font chữ ngày càng quan tâm đến việc hiển thị và cung cấp những hướng dẫn hinting tốt hơn. Chính bản thân Typekit cũng đã bắt tay vào re-hinting các font chữ phổ biến như Museo. Tốt nhất bạn nên xem những luận chứng về font chữ mà bạn đang cân nhắc. Tiết kiệm thời gian bằng cách tránh các font chữ có từ “thin” hoặc “narrow” trong tên gọi của chúng.
Kích thước font chữ và Measure
Như một bài viết gần đây trên Smashing Magazine đã chứng minh khá thuyết phục rằng bạn có thể làm ảnh hưởng đến tính dễ đọc bằng cách mạo hiểm đặt cho font chữ kích thước là 16px cho paragraph. Tất cả các trình duyệt phổ biến hiển thị font size mặc định là 16px. Đây là định hướng khá tốt (nhưng vẫn còn một số nhà sản xuất trình duyệt lại không đồng ý với suy nghĩ 16px là một tiêu chuẩn đúng). Thêm vào đó, những gì bài viết đã nêu cho thấy tiêu chuẩn này còn được áp dụng trong in ấn.
Chúng ta thường thể hiện font size là 16px như là 100% cho phần khối body trong file css. Điều này đem lại cảm giác hoàn hảo bởi nó giống như nói rằng “trình duyệt đã chọn giúp bạn mặc định là 100%”. Nếu bạn muốn paragraph lớn hơn 16px, chỉ cần chỉnh giá trị tương ứng với “toàn bộ pixel – whole pixel ” trong khối body. Mà tại sao lại chỉnh cho “toàn bộ pixel” ? Có hai lý do như sau, lý do thứ nhất là tất cả giá trị tốt sẽ dễ dàng hơn để sử dụng như là một hệ số nhân trong bảng khai báo kiểu. Thứ hai, các trình duyệt có khuynh hướng làm tròn “sub-pixel” các giá trị khác nhau và cho ra kết quả không phù hợp. Một font chữ có kích thước 18px biểu diễn theo tỷ lệ là 112,5% (1,125 × 16).
Bình thường hóa kích thước của văn bản mặc định rất quan trọng bởi vì nó đặt chúng ta phải sử dụng đơn vị tính “ems” như một số nhân cho kích thước của các nhóm và các thành phần khác xung quanh paragraph. Ví dụ như làm cho thẻ tiêu đề
tăng 1.5 lần kích thước font chữ chẳng hạn. Vì ems (phát âm như “Emma” chứ không phải EM Forter) là đơn vị liên quan, giúp thay đổi kích thước mặc định trong trình duyệt. Cách làm này giúp dễ dàng hơn nhiều trong việc bảo trì trong bảng khai báo kiểu và nhằm đảm bảo không làm tăng hoặc giảm khi điều chỉnh kích thước của 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, bởi nếu dòng nội dung quá dài, sẽ gây khó khăn cho người đọc. Nếu không nắm rõ việc chọn đơn vị tính phù hợp, người đọc có thể bỏ qua hoặc bị đọc lại dòng nội dung mà họ đã đọc trước đó. Trong cuốn sách “The Elements of Typographic Style”, của tác giả Robert Bringhurst cũng đã có nêu số measure tốt trong một dòng nội dung là từ khoảng 45 đến 75 ký tự. Đó là lý do tại sao chúng ta sử dụng max-width khi thiết kế layout co dãn.
Kể cả khi bạn thiết lập chiều rộng tối đa cho trang web, bạn vẫn cảm giác nó hẹp hơn những gì bạn thấy. Theo một nghiên cứu chuyên sâu về các mẫu thiết kế công bố trên Smashing Magazine, các trang web thường sử dụng khoảng 88.74 ký tự, vượt quá xa phạm vi tối ưu cho phép.
Leading và Vertical Rhythm
Leading là khoảng trắng giữa các dòng liên tiếp của paragraph. Leading có ảnh hướng đến tính dễ đọc tương tự như “measure” bởi nó giúp xác định và phân biệt khoảng cách các dòng mà một người đọc phải di chuyển mắt đi qua từ trái sang phải và ngược lại. Thủ thuật với leading là tránh các dòng paragraph 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 sắp chữ truyền thống, leading được thiết lập bằng cách chèn các dải kim loại chì. Trong CSS, line-height là thuộc tính mà chúng ta dùng để tiếp cận với leading và việc sử dụng thuộc tính này nhiều có thể làm bạn cảm thấy phiền.
Thay vì tính toán đến khoảng cách giữa các dòng, như với leading, thì line-height lại tính chiều cao cho tất cả các dòng- bao gồm text và khoảng trắng. Có 3 cách đế thiết lập: cách không đúng chuẩn, cách rườm rà và cách đúng chuẩn.
Cách không đúng chuẩn là thiết lập chiều cao theo đơn vị pixel và gán vào một giá trị tuyệt đối. Với cách làm này chúng ta sẽ phá hỏng tất cả các thành quả mà ta đã làm tốt trước đó. Chẳng hạn như khi bạn tăng kích thước font ( hoặc trong style sheet hay trong thiết lập trình duyệt của người dùng ), line-height vẫn tồn tại. Điều này tạo ra hiệu ứng khá thú vị như hình minh họa bên dưới :
Do 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 làm hơn thừa vì mặc dù phương pháp này khá ổn nhưng việc 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 cho font chữ thế là đủ. Line-height là thuộc tính riêng của CSS, nó có thể chấp nhận đơn vị số.
Nếu để ý bạn sẽ thấy rằng từ đầu đến giờ tôi chỉ đề cập đến kích thước font chữ là số chẳn. Lý do là vì tôi ủng hộ chiều cao dòng là 1.5 vì nếu font chữ 18 pixek nghĩa là chiều cao dòng là 27 pixel. Sử dụng số chẳn nhằm duy trì toàn bộ giá trị pixel- vì 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 cho paragraph.
Duy trì chiều cao đồng đều (hoặc tạo một grid cơ bản) là cách tốt nhất để đảm bảo 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 nội dung) 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 paragraph. 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à cách làm tinh tế hơn nhiều so với việc sử dụng hinting, measure hoặc leading, tuy nhiên hinting, measure và leading cũng rất quan trọng. Bởi 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ệ. 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ẽ không gây tổn hại đến chiều cao đồng đều của cả trang.
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 đang bị đe dọa, việc áp dụng thuật toán cho 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 hiệu chỉnh, paragraph text trên trang web được thiết lập mặc định canh trái (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 tính dễ đọc thì không hề đơn giản trong HTML.
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 in ấn (như báo chí), gạch nối được sử dụng để ngắt 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 thêm gạch nối, còn các phần mềm giúp chèn gạch ngang (-) thì thực hiện không nhất quán. Bên cạnh đó, hãy tưởng tượng khi chèn ký hiệu ­, nó sẽ áp dụng cho tất cả phần nội dung của bạn. Trong CSS3 đặt mục tiêu cung cấp cho chúng ta quyền kiểm soát nhiều hơn thuộc tính text-align: justify, nó có thể giúp giảm bớt vấn đề bằng cách phân bổ liên ký tự. Kỳ lạ là nó chỉ thực hiện được với trình duyệt web Interner Explorer.
Rất may, ngày nay Firefox và Safari đều đã hỗ trợ các thuộc tính hyphens trong CSS3. Nó có thể tự động chèn dấu gạch nối (­) nhiều như khi bạn thao tác bằng tay. Trên thực tế, bạn có thể tạo dấu gạch nối trong một tài liệu bằng cách sử dụng hyphens:manual.
Trước khi các trình duyệt khác bắt kịp hỗ trợ này, thì giải pháp tối ưu nhất với tất cả các trình duyệt hiện tại chỉ có thể là JavaScript. Hyphenatorl.js 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. Hyphenatorl.js làm việc khá tốt nhưng hơi đắt tiền. Dung lượng của 2 file js này tổng cộng là 72 KB không nén, được viết bằng tiếng Anh.
Style theo ngữ cảnh
Chúng ta đã xử lý kích thước, các thiết lập và paragraph, bạn có thể vẫn muốn thêm vào một số cải tiến nhỏ và trang trí để có được tài liệu văn bản rõ ràng hơn. Những sắc thái chỉ liên quan đến một đoạn paragraph nhất định và chọn kiểu paragraph phù hợp theo 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 có thể nhắm đến các pararaph cụ thể tùy thuộc vào nơi chúng xuất hiện trên trang, đảm bảo rằng sự khác biệt trong thiết kế của chúng là phù hợp và mang ý nghĩa.
Hãy sử dụng thụt đầu dòng để làm ví dụ giới thiệu. Mặc dù ít phổ biến trong Web hơn trong in ấn, nhưng 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 ngay khi 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.
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.
Thêm vào những cải tiến này chỉ có tác dụng khi nó 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 paragraph giới thiệu luôn bắt đầu bằng tiêu đề 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ủ chặt chẽ theo ngữ nghĩa trong HTML, bạn có 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
Đi bộ xuống lối đi trong một thư viện, tôi chỉ lướt qua mà không chú ý đến hết các kệ sách ở hai bên. Chỉ khi có một người gợi ý với tôi rằng, việc xem nhẹ những cuốn sách này đồng nghĩa với việc họ nên xé bỏ chúng đi! Tuy nhiên những nghiên cứu đã chỉ ra rằng, 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 paragraph trực quan hoặc thiên về 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.
MP_ILD theo Auxdesign
