Tìm hiểu iOS 9 typeface – San Francisco

Tại WWDC2015, Apple đã ra mắt một typeface mới, được sử dụng bắt đầu từ iOS9, thay thế cho typeface Helvetica Neue trước giờ vẫn sử dụng. Typeface mới đó có tên là San Francisco (gọi tắt là SF). Trong bài viết này, mình cùng điểm qua vài đặc tính của typeface mới này nhé.

San Francisco là một font sans serif, được thiết kế đặc biệt dành riêng cho UI vì nó có rất nhiều tính năng và các tối ưu để hiển thị rõ và đẹp trên màn hình. Đây cũng là một sự khác biệt giữa iOS 8 và iOS 9. Nó có riêng một family font rất lớn với rất nhiều loại, chúng ta có thể điểm qua vài sự khác biệt của các loại font thuộc typeface này nhé.

San-Francisco-font-family-tree

 

San Francisco & San Francisco Compact

Chúng ta có 2 loại chính: San Francisco và San Francisco Compact. SF được sử dụng cho các thiết bị iOS và OSX, còn SF Compact được sử dụng cho AppleWatch. Vậy sự khác nhau giữa 2 loại này là gì?

San-Francisco-vs-San-francisco-compact-

 

Chúng ta có thể dễ dàng nhận thấy, 2 loại font này được thiết kế rất khác nhau bởi cạnh của các ký tự. Với font SF thì các cạnh tròn hơn, còn font SF Compact thì cạnh của ký tự có vẻ được vát thẳng. Mục đích của việc này là giúp cho khoảng cách giữa các ký tự được tăng hơn một chút, giúp cho việc đọc trên màn hình nhỏ như AppleWatch vẫn có thể dễ dàng hiển thị và đọc được rõ ràng.

Ngoài ra, một đặc điểm rất dễ đọc của cả 2 loại font chữ này là chiều cao của các ký tự rất lớn. Các ký tự in hoa hơi thấp hơn một chút, và nó được cân bằng với chữ số. Các bạn có thể so sánh giữa số 5, chữ H và chữ l trong hình dưới đây:

San-francisco-proportions

 

Display & Text

Cả 2 loại SF và SF Compact ở trên lại được chia tiếp ra thành 2 loại nữa là Display và Text.

Với Display, chúng được sử dụng cho tiêu đề và những đoạn văn bản với size lớn. Còn Text được sử dụng với những phần hiển thị chữ ở size nhỏ hơn. Lý do là vì sự khác biệt trong khoảng cách giữa các ký tự của 2 loại font này. Khoảng cách giữa các ký tự của Text rộng hơn, do đó khi sử dụng với size chữ nhỏ, chúng được trở nên dễ đọc hơn.

San-Francisco-display-vs-text

 

Trên các thiết bị sử dụng OS, chúng sẽ được tự động chuyển sang loại font Display cho những phần chữ có size lớn hơn 19pt, và tự động chuyển thành Text cho những phần chữ từ 19pt trở xuống. Tuy nhiên, khi bạn là một người design app, bạn cần phải ghi nhớ điểm này để tự thay đổi nó trong thiết kế của bạn, không phải lúc nào cũng phụ thuộc vào Apple.

San-Francisco-display-versus-text

 

Tracking (khoảng cách giữa các ký tự) cũng tùy thuộc vào từng size chữ để nâng tính dễ đọc trên mọi màn hình

San-Francisco-size-spesific-tracking

 

Ngoài ra, còn có thêm một số tính năng khác mà chúng ta có thể tắt hoặc mở nó bằng code trong lúc phát triển app được. Ví dụ như khoảng cách giữa 2 dấu chấm của dấu hai chấm, dấu ngoặc của ký tự số 6 và 9, hay khoảng cách giữa các ký tự đơn.

Font-vertically-sentered-colon

 

font-alternate-symbols

 

San-francisco-monospaced

 

Các bạn có thể download bộ font này tại đây:

Share:

Leave a Reply