Tôi nên tìm font nào cho UI?

Để thực sự hiểu điều gì làm nên một UI tốt và một kiểu chữ cho màn hình, tốt nhất nên bắt đầu với những gì đã có sẵn lúc này và điều gì khiến chúng được sử dụng.

 

 

Tôi đã thử trong một thời gian trước khi đưa ra một số kiểu chữ mà tôi cho rằng nó đọc tốt trên màn hình. Nhưng bây giờ tôi muốn nghiên cứu kỹ hơn nữa vào lĩnh vực typography và cân nhắc; Điều làm nên một kiểu chữ đặc biệt tốt cho màn hình (screen) và UI (user interface) design.

 

Những ví dụ quen thuộc

Segoe

 

 

 

 

Rất nhiều font “Segoe” đã được sử dụng lần đầu tiên bởi Microsoft với màn hình Windows Vista Os và những tính năng cho Windows 7 và ngay cả với sản phẩm hiện tại là Windows 8. 

 

Segoe UI luôn là đề tài tranh cãi của các nhà thiết kế sự giống nhau về hình thức giữa nó và Frutiger nổi tiếng thế giới.

 

 

Lucida Grande

 

 

 

 

“Lucida Grande” là kiểu chữ UI được chọn cho Apple’s Mac OS X. Nó dựa trên Lucida Sans và Lucida Sans Unicode bởi Charles Bigelow và Kris Holmes.

 

Lucida Grande có kích thước điểm nhỏ hơn và dễ đọc hơn trên màn hình. Đáng ngạc nhiên là Lucida Grande không bao giờ gồm italics.

 

 

Ubuntu

 

 

 

 

Unbutu là kiểu chữ được phát triển bởi Dalton Maag. Dĩ nhiên Ubuntu Linux OS. Nó được công bố đầy đủ năm 2010 khi mà nó được yêu thích rộng rãi, không chỉ là thông qua Ubuntu OS, mà còn thông qua danh sách Google Web Fonts.

 

 

Helvetica Neue

 

 

 

 

 

Helvetica Neue được thiết kế khoảng những năm 1980, nó chỉ trở nên nổi tiếng thật sự khi Apple tung ra iPhone và sử dụng font này, sau đó là các kiểu chữ trong UI của Apple lựa chọn cho iOS.

 

 

Droid Sans

 

 

 

 

Được phát triển bởi Steve Matteson. “Droid Sans” được sử dụng cho smartphone của Androi. Nó được thiết kế đặc biệt để có thể nhìn rõ trên màn hình nhỏ và Droid font family còn bao gồm Droid Serif và Droid Mono.

 

Các bài kiểm tra

Khi nhìn vào các kiểu chữ cho UI design và độ dễ đọc trên màn hình (screen legibility), có một số yếu tố mà chúng ta cần xem xét như: Thiếu nhịp điệu tốt cho việc đọc, nhập nhằng giữ các chữ, x-height cao.

 

Không rõ ràng

 

Vậy tôi muốn nói gì về việc “không rõ ràng – lack of ambiguity?

 

Kiểu chữ được sử dụng cho UI và đọc trên Screen đặc biệt nhỏ khoảng 9-12 point thôi. Không những vậy nó được hiển thị thuộc vào độ phân giải của màn hình của bạn.

 

Phải thừa nhận, những mẫu điện thoại Smartphone (điện thọai thông minh) đã có những cách hiển thị độ phân giải lớn hơn (iPhone4 là một ví dụ với độ phân giải 323 ppi), nhưng có nhiều thiết bị hiển thị lớn hơn nhiều như Windows PCs, Mac và các Laptops.

 

Điều này có nghĩa là, với một kích thước điểm nhỏ và độ phân giải nhỏ, cá nhân những chữ của các kiểu chữ phải rõ ràng và dễ đọc từ mọi thiết bị.

 

Đây là một cách chúng tôi chứng minh điều này;

 

 

Đây chữ “Illiterate” (chữ I hoa), một kiểu chữ UI tốt cần có sự khác biệt giữa các chữ để mắt người không bị rối. Một vấn đề typographic thông thường là làm sao để kiểm soát chữ I hoa và chữ l thường. Đặc biệt với một từ như ví dụ trên, nếu bạn không đọc kỹ thì hoàn toàn có thể nhầm.

 

Khá thú vị khi chúng ta nhìn thấy cách mỗi font xử lý điều này.

 

Cả Segoe UI và Droid Sans đều có sự khác biệt khi cho thêm chữ I hoa một cái chân (serifs) nhỏ ở trên và dưới. Kiểu chữ Ubuntu lại sử dụng cách khác khi cho chữ l thường có một cái đuôi nhỏ.

 

Thật không may, cả Lucida Grande và Helvetica Neue lại không vượt qua được bài test này. Sau này, Lucida Grande cho chữ l thường cao hơn một chút, nhưng ở kích thước nhỏ, sự khác biệt này không đáng kể.

 

Helvetica Neue giải quyết việc này dở nhất, khi rất khó thấy sự khác biệt giữa hai chữ này.

 

Điều này không phải vấn đề nếu chúng ta đọc nội dung một cách cẩn thận. Nhưng khi đọc lướt như khi lướt qua một danh sách đổ xuống, thì việc có sự rõ ràng giữa các chữ rất quan trọng.

 

 

Thêm một bài test khác? OK;

 

 

  

Lần này với từ “anagogy”, được áp dụng bằng năm kiểu chữ.

 

Với bài kiểm tra này, chúng ta sẽ xem các kiểu chữ giải quyết thế nào vấn đề của các chữ cái với các descenders và những nét tròn tương tự trong một từ.

 

Rất tốt là các kiểu chữ mà có chữ a thường với “2 tầng”(a) đều vượt qua bài kiểm tra này. Tuy nhiên những mặt chữ Geometric sans-serif giải quyết sự khác biệt giữa chữ a và o không tốt (hãy thử click vào đây, và kiểm tra ITC Avant Garde Gothic. Gõ “a Doggy” và giảm kích thước chữ, bạn sẽ hiểu tôi muốn nói gì).

 

Một vấn đề typography cần cân nhắc ở đây là vị trí của các chữ có các descender, như chữ g và y thường. Ở kích thước nhỏ, hầu hết các mặt chữ có vẻ dính các descender với nhau.

 

Lucida  Grande phân biệt bằng cách làm thẳng descender của chữ y. Droid Sans sử dụng chữ g “2 tầng” (g).

 

Với từ này, chúng ta cũng đồng thời nhìn tổng thể các hình dạng của mỗi chữ. Bạn sẽ để ý rằng Helvetica Neue, ví dụ, mỗi chữ cái đều được làm tròn. Nó là một đặc tính của kiểu chữ, tuy nhiên với kích thước màn hình và thiết UI ở độ phân giải nhỏ, sự phân biệt giữa các chữ không ro ràng với các chữ nhìn tương tự “tròn” giống nhau.

 

Đây luôn là vấn đề của Helvetica Neue; cũng như vấn đề của các kiểu chữ Grotesque san-serif, nó được thiết kế để hiển thị ở kích thước lớn.

 

Ở những kích thước nhỏ hơn như UI cho màn hình, Helvetica chưa bao giờ được thiết kế để dùng trong kích thước nhỏ.

 

Segoe UI gặp vấn đề tương tự khi để kích thước nhỏ. Với những đặc tính “con người” (humanist) như Lucida và Ubuntu giải quyết việc này tốt hơn. Đặc biệt với Unbuntu khi để chữ g với cái đuôi nằm ngang.

 

Droid Sans sử dụng chữ g có phần cong ở dưới, nó khiến mặt chữ nhìn độc đáo và khác biệt với các chữ khác, kết quả là có sự phân biệt giữa các mặt chữ và đem tới sự dễ đọc cho người dùng.

 

Đọc với nhịp điệu tốt – Good Reading Rhythm

Vấn đề thứ hai của chúng ta sau sự dễ đọc của chữ trong màn hình, là cần một nhịp điệu tốt cho việc đọc. Ý của tôi là gì?

 

Về điều này, tôi thấy cần bạn biết tới Ludwig Ubele, người thiết kế mặt chữ vô cùng dễ đọc FF Tundra. Trong chủ đề Tôi Yêu Typography, Ludwig lưu ý:

 

Tôi chọn Tundra là tên của kiểu chữ serif mới không phải vì quá trình thiết kế, mà vì sự khái niệm ban đầu. Tôi đã nghĩ về một vùng đất rộng và bằng phẳng. Nó là ý tưởng nguyên thuỷ. Tundra nên dẫn mắt người xem tới những đường chân trời xa tít.

 

Một kiểu chữ có hai hướng cơ bản. Đường chân trời (the Horizontal), các nét, cái mà mắt sẽ di chuyển xuyên suốt; và đường thẳng đứng là của những chữ riêng biệt, được xác định bởi phần thân.

 

Phần thân thì có nhiệm vụ tạo nên nhịp điệu của kiểu chữ, trong các đường cong (bowls, instroke, outstrokes, v.v.) làm nên bản thân mỗi chữ.


Về tổng quá, một mặt chữ càng hẹp thì càng ít khác biệt. Một mặt chữ tạo nên một hàng rào và sự ngắt quãng không thoải mái khi mà các nét được đặt gần nhau. Điều này tạo nên sự mệt mỏi và ngu xuẩn, nó chẳng hề dễ đọc. Điều này giống như những hàng cây quá gần nhau, hoặc quá thưa thớt.

 

Tóm lại, một bề ngang của một kiểu chữ dẫn dắt mắt người đọc theo một đường, trong khi những nét dọc tạo ra nhịp điệu; những dấu chấm giúp mắt nghỉ để tiếp tục những hình dạng của các chữ khác.

 

Như lưu ý của Ludwig, một mặt chữ quá hẹp sẽ tạo nên “rào cản” làm mệt mỏi con mắt, những chữ có quá rộng cũng gặp vấn đề tương tự.

 

Một kiểu chữ UI tốt cần sự cân bằng thị giác giữa những khoảng quá hẹp và quá rộng, dẫn dắt mắt đi theo các nét mạnh mẽ bởi hai hướng ngang (baseline và x-height) và có những nhịp điệu bởi phần thân chữ.

 

 

 

 

Click vào hình để xem lớn hơn.

 

 

Trên đây là 5 kiểu chữ với các đoạn text lorem ipsum. Bạn có thể click vào hình để xem kích thước lớn hơn. Hãy lướt nhanh một chút qua các dòng.

 

Bạn nghĩ sao?

 

Ngay lập tức bạn có thể có ý nghĩ trong đầu, Helvetica Neue gặp vấn đề ở đây. Nó không chỉ là một mặt chữ có chiều rộng – tạo nên những khoảng cách giữa các thân chữ – nhưng nó có vẻ monotone (bằng nhau), mỗi hình dáng chữ hiển thị hơi hơi tròn giống nhau.

 

Nói chung có cảm giác các chữ có vẻ có khoảng cách giống nhau, về mặt cảm xúc theo cách này, Helvetica Neue tạo ra một nhịp điệu đọc kém, nó không đủ đa dạng.

 

Những kiểu chữ còn lại tạo cảm giác tốt hơn với những chữ hẹp hơn về bề ngang và có dáng vẻ humanist. Tôi thích cách mà Ubuntu hướng mắt người đọc theo các đường ngang và một cái đuôi nhỏ ở chữ L và một nét ngang nhỏ trên chữ t.

 

Đặc điểm của Segoe UI cho phép các chữ o,b,d,g và p có những khoảng không gian phía trong (counter) rộng hơn để thở và tạo nhịp điệu khác nhau.

 

Chữ a của Lucida Grande có cái đuôi dài để kết nối nhiều hơn với các chữ khác. Droid Sans cũng chứng tỏ một nhịp điệu đọc tốt, đặc biệt với kiểu serif của chữ t.

 

Large X-Height

X-Height của chữ đơn giản là chiều cao của chữ x thường. Nó sử dụng một số đo để miêu tả chiều cao của chữ thường, khác với chiều cao của chữ hoa.

 

Như đã đề cập trước đó, Kiểu chữ dễ đọc dùng trong hiển thị màn hình phải tương thích với những điểm pixel nhỏ. Chúng ta không có nhiều pixel để sử dụng, vì thế chúng ta đôi khi phải đếm.

 

Nó có nghĩa là một x-height lớn tạo nên chiều cao của các chữ, giúp chúng có thêm không gian để thở, khiến chúng dễ phân biệt và quan trọng là dễ đọc.

 

 

Hình ảnh trên hiển thị mỗi kiểu chữ, các nét được vẽ theo đường baseline, x-height và cap-height (chiều cao chữ hoa).

 

Chiều cao x-height tạo cho Droid Sans nhịp điệu tốt, trong khi Segoe UI và helvetica Neue với x-height nhỏ, còn Lucida Grande và Ubuntu có kích thước nhỏ hơn một chút so với Droid Sans, điều này dĩ nhiên sẽ khiến chúng nhỏ hơn trên màn hình.

 

Vậy ai là người chiến thắng?

 Đương nhiên, Droid Sans tốt nhất trong năm lựa chọn và không ngạc nhiên; nó được thiết kế đặc biệt để thích ứng với UI và để dễ đọc trên màn hình.

 

Chúng ta cũng lưu ý Helvetica Neue không phù hợp với kiểu chữ chuyên dùng cho UI (kích thước nhỏ). Mỗi chữ của nó quá giống nhau về hình dạng, vì thế khó nhận biết, đồng thời có chiều ngang rộng. Nói chung Helvetica được yêu thích, nhưng nó được thiết kế để hiển thị lớn, không phải những chữ ở phần nội dung.

 

Nhưng tại sao Apple lại chọn chúng cho UI của iOS? Tôi đoán rằng họ đang chọn kiểu dáng hơn là chức năng. Cá nhân tôi thấy Lucida Grande sẽ hiệu quả hơn trên iOS.

 

Segoe UI, Lucida Grande và Ubutu đều lạ những lựa chọn xuất sắc cho UI bằng nhiều cách. Đặc điểm của Ubuntu với các nét đều nhau về khoảng cách, giải quyết chữ l thấp và chữ I hoa tốt, tuy vậy giá mà nó có chữ g được thiết kế “2 tầng”.

 

Lucida Grande có nhịp điệu đọc rất tốt nhưng các chữ có vẻ khó nhận biết, đặc biệt là L và I như tôi đã nói ở trên. Segoe UI có phần counters rộng (không gian ở các chữ a, b, d, o,..) giúp nó có nhịp điệu thoải mái và một serifs nhỏ ở chữ I hoa để giải quyết vấn đề phân biệt.

 

Lời khuyên của tôi

 Không có trong số ở trên! Có một vài lưạ chọn để có UI tốt và kiểu chữ dễ đọc dành cho màn hình ngay kia. Vậy nên đây là ba lựa chọn mà cá nhân tôi thấy rất phù hợp và có lẽ là tốt nhất, đó là;

 

 

 

 

Tôi có Aller Sans, với lý do nó rất tuyệt cho UI và độ dễ đọc. Nó vay mượn nhiều đặc điểm của Ubuntu (điều này không có gì nhạc nhiên nếu biết cả Ubuntu và Aller Sans đều được thiết kế bởi Dalton Maag);

 

Khoảng cách bề ngang giữa các nét bằng nhau, một cái đuôi nhỏ nhắn ở chữ a, thêm một chút đuôi ở chữ l thường và x-height lớn.

 

Hơn thế, Aller được có thêm chữ g “2 tầng”, và một chữ Q hoa lạ mắt, một thanh ngang đầy đủ ở chữ t thường. Bạn có thể tải về Aller Sans miễn phí tại đây.

 

 

 

 

 

Lựa chọn tiếp theo là Azuro, được thiết kế bởi Georg Seifert, hoàn chỉnh bởi Jens Kutilek và thuộc về FontShop.

 

Kiểu chữ này nhận được rất nhiều quan tâm, đóng góp. Bạn có thể đọc về sự phát triển của kiểu chữ này. Nó đã được kiểm tra trên Windows, Mac OS X và iOS, chuyên nghiệp và cẩn thận tới từng chi tiết.

 

Tôi yêu chữ l thường và phần đuôi của chữ Q hoa và những con số kiểu cổ điển. Với đặc điểm hơi hẹp, độ nghiêng thích hợp. Trong bất cứ trường hợp nào, tôi thực sự khuyên bạn nên chọn kiểu chữ này – Azuro.

 

 

 

 

 

Được công bố năm 2009, PT Sans được thiết kế bởi Alexandra Korolkova, Olga Umpeleva và Vladimir Yefimov của ParaType làm nó thoải mái được sử dụng khi có Giấy phép sử dụng Mở.

 

Như hầu hết kiểu chữ dành cho màn hình và UI, PT Sans hơi hẹp với các đặc điểm humanist, các khác biệt ở phần descender trong các chữ g, j, y và thật tuyệt khi nó hỗ trợ unicode.

 

Hơn thế, PT Sans còn có PT Sans Caption, PT Sans Narrow cũng như serif version, PT Serif.

 

Bạn có thể tải về miễn phí PT sans tại đây.

 

Bạn thấy thế nào về những lời nhận xét trên? Hay bạn có ý kiến khác? Rất nhiều thứ cần bàn luận về độ dễ đọc trên màn hình và UI. Hãy để lại các liên kết thú vị để tất cả cùng tham khảo.

 

 

Nguồn design-by-izo.com

 

 

P/S; Đây là một bài viết được bạn đọc cung cấp liên kết qua tính năng Chia sẻ liên kết hay (bên cột phải). iDesign rất vui khi nhận được nhiều liên kết hữu ích để chia sẻ cho cộng đồng. Cám ơn các bạn.

Comments

comments

Comments

7 Bình luận

  • Nga Sơn 24/11/2011

    iDesign cho mình hỏi: Khi thiết kế logo cho một công ty, nếu sử dụng một font có bản quyền, ví dụ Helvetica, thì mình phải mua font như thế nào, và thời gian được sử dụng font đó sau khi mua là bao lâu?
    iDesign có thể làm một bài chi tiết về cách thức mua và sử dụng font có bản quyền không?

    • idesign 08/11/2012

      Thường thì một phông chữ sẽ được bán theo nhiều gói. Chia theo số lượng máy tính sử dụng (10,20), số lần sử dụng. Nhiều máy tính hơn, nhiều lần sử dụng hơn cho phép, tức là bạn phải mua mới.

      Tất cả điều này đều là TỰ GIÁC. Vì về kỹ thuật bạn mua 1 lần thì sử dụng cả đời.

  • pavel pham 08/11/2011

    Ngay từ lần đầu tiên dùng Ubuntu tôi đã thự sự ấn tượng về kiểu chữ Ubuntu, cái cách mà nó tạo nên sự khác biệt, mặc dù lúc đó tôi không biết gì về typography hay có nhận thức gì về sự khách nhau giữa các kiểu chữ của các hệ điều hành. Một người vừa chuyển từ Windows sang Ubuntu như tôi, thực sự cảm thấy dễ chịu và thích thú hơn với font chữ của Hệ điều hành mã nguồn mở kia, mà ko biết lý giải làm sao.
    Bẵng 1 thời gian, đọc bài này mới thấy được cái hay của Ubuntu. thanks Idesign!

  • bhhoanganh 07/11/2011

    bài viết hữu ích, củng cố thêm kiến thức cho mình.
    hy vọng bài viết sẽ phổ biến rộng rãi cho mọi người
    thanks tác giả

  • MrHung 06/11/2011

    Bài viết quá hay! Cảm ơn iD đã dịch và người chia sẻ liên kết ;)

Gửi bình luận

  / kéo logo vào vị trí để gửi bình luận