Bí mật đằng sau phông chữ San Francisco mới của Apple Sử dụng font giao diện hệ thống trong thiết kế web

Helvetica (trái), San Francisco (phải)

Phông chữ San Francisco đã được sử dụng trên Apple Watch và đã trở thành phông chữ mặc định cho các thiết bị của Apple: Apple Watch, iPhone, iPad và Mac.

Đồng hồ Apple

Apple đã sử dụng Helvetica làm phông chữ hệ thống cho iOS kể từ iPhone đầu tiên. Và trên Mac OS X, họ đã thay đổi phông chữ từ Lucida Grande thành Helvetica kể từ khi 10.10 Yosemite được phát hành. Tại sao Apple lại quyết định chôn vùi Helvetica, kiểu chữ nổi tiếng và được yêu thích nhất thế giới?

Ở dạng nhỏ Helvetica yếu

Họ nói rằng Helvetica không phù hợp với văn bản có kích thước nhỏ. Khi phông chữ hệ thống trong Mac OS X Yosemite được đổi thành Helvetica, nhiều nhà thiết kế cho rằng phông chữ như vậy không phù hợp chút nào ở đây.

"Helvetica thật tệ" của Erik Spiekermann

Khi bạn nhập văn bản ở kích thước nhỏ, khả năng đọc kém của Helvetica sẽ hiển thị. Helvetica làm mờ văn bản như vậy. Một số văn bản bị lẫn lộn và khó hiểu. Nhiều người nói rằng Apple đã tạo phông chữ San Francisco để làm cho văn bản nhỏ trên Apple Watch dễ đọc hơn.

Các chữ cái được trộn lẫn trong các văn bản có kích thước nhỏ

Nhưng ngày nay, độ phân giải màn hình của thiết bị lớn hơn độ phân giải của vật liệu in và văn bản trên iPhone không phải lúc nào cũng nhỏ như trên Đồng hồ Apple. Tại sao Apple thay đổi phông chữ hệ thống không chỉ trong Apple Watch mà còn trong iOS và Mac OS X.

San Francisco không chỉ là một phông chữ

Phông chữ San Francisco có nhiều tính năng khiến chúng rất dễ đọc. Trong thực tế Phông chữ San Francisco cho Apple Watch và cho iOS/Mac là hai phông chữ có sự khác biệt nhỏ.

Họ phông chữ có tên "SF" được sử dụng cho iOS/Mac và "SF Compact" cho Apple Watch. Bạn có thể nhận thấy sự khác biệt trong các chữ cái o, e được làm tròn. "SF compact" có các đường thẳng đứng phẳng hơn SF.

SF và SF nhỏ gọn

Sự khác biệt này giúp các văn bản trong SF Compact có thêm lề (thụt lề) giữa các chữ cái, giúp dễ đọc hơn trên các thiết bị nhỏ như Apple Watch.

Ngoài ra, các phông chữ SF và SF Compact được chia thành hai họ phụ: "Văn bản" và "Hiển thị". Đây chính xác là những gì Apple gọi là "Kích thước quang học". "Văn bản" dành cho văn bản ở kích thước nhỏ hơn và "Hiển thị" dành cho văn bản ở kích thước lớn hơn.

gia đình San Francisco

Như tôi đã đề cập ở trên, khi sử dụng phông chữ kỳ cục (sans-serif) như Helvetica, hai chữ cái liền kề “pha trộn” và các chữ cái như “a”, “c”, “s” trông giống nhau ở kích thước nhỏ.

Phông chữ "Hiển thị" và "Văn bản"

Họ con "Văn bản" có nhiều lề hơn họ con "Hiển thị". Và khẩu độ của các phông chữ văn bản này cũng rộng hơn, do đó kích thước điểm nhỏ dễ đọc hơn.

Phông chữ San Francisco là động

Một trong những điều thú vị nhất về San Francisco là cách nó tự động tối ưu hóa kiểu chữ. Hệ thống tự động chuyển phông chữ Hiển thị/Văn bản tùy thuộc vào kích thước văn bản. Giá trị ngưỡng là 20pt.

Các nhà thiết kế và chuyên gia không còn phải phân vân chọn phông chữ nào. Ví dụ: chỉ cần thêm phông chữ hệ thống vào UILabel và thiết bị sẽ chọn phông chữ phù hợp cho bạn.

Điều làm tôi ngạc nhiên về phông chữ San Francisco là cách hiển thị dấu hai chấm. Về cơ bản, dấu hai chấm được đặt ngay phía trên dòng loại, do đó, nó không được căn giữa theo chiều dọc nếu nó nằm giữa các số. Và trong phông chữ San Francisco, dấu hai chấm sẽ tự động căn chỉnh.

Đại tràng căn giữa theo chiều dọc

San Francisco là một kiểu chữ cho thời đại kỹ thuật số

Như bạn có thể thấy, phông chữ San Francisco đã được cân nhắc cẩn thận để dễ đọc ở mọi kích cỡ và trên mọi thiết bị.

Helvetica, được thay thế bằng phông chữ San Francisco, được tạo ra ở Thụy Sĩ vào năm 1957, khi không có thiết bị kỹ thuật số. Helvetica được sử dụng rộng rãi như một phông chữ công ty bởi nhiều công ty ngay cả bây giờ và chắc chắn rằng nó sẽ tiếp tục được sử dụng như một phông chữ cổ điển chất lượng trong tương lai.

Mặt khác, San Francisco là một phông chữ hiện đại. Nó tự động thay đổi phong cách theo ngữ cảnh. Đây giống như một kiểu chữ "gốc", như thể được tạo ra đặc biệt cho thời đại kỹ thuật số sắp tới.

San Francisco là một phông chữ của Apple, lần đầu tiên được giới thiệu tới khán giả vào cuối năm 2014. Cho đến thời điểm đó, công ty đã sử dụng phông chữ " ", theo Apple, đã mặt yếu theo quan điểm về khả năng đọc kém của văn bản nhỏ.

Giờ đây, toàn bộ dòng sản phẩm của Apple đang tự tin nắm giữ vị trí của riêng mình. phông chữ riêng"San Francisco" mà bạn có thể tải xuống miễn phí trong bài viết này. Họ "San Francisco" được chia thành hai phân họ, đó là "Văn bản" và "Hiển thị". Sự khác biệt là khoảng cách chữ lớn hơn trong tùy chọn đầu tiên. Đặc điểm này mang lại cho phân họ khả năng đọc tốt nhất với kích thước phông chữ nhỏ và đây là loại được sử dụng trên các thiết bị nhỏ của một công ty như iWatch.

Hỗ trợ cho Cyrillic (tiếng Nga), cũng như tiếng Anh, chắc chắn là có mặt.

Phông chữ tải xuống miễn phí "San Francisco"

Kho lưu trữ mà bạn có thể tải xuống ở cuối bài viết, chứa 21 kiểu (gần một nửa cho mỗi phân họ) ở ba định dạng khác nhau.

phân họ" Chữ" - đây là: In đậm, Đậm nghiêng, Nặng, chữ nghiêng nặng, chữ nghiêng, nhẹ, Chữ nghiêng nhẹ, Vừa phải, Chữ nghiêng vừa, Thường xuyên, dấu chấm phẩy và Chữ nghiêng nửa đậm.

Đổi lại, phân họ trưng bày' là những phác thảo: Màu đen, In đậm, Nặng, nhẹ, Vừa phải, Thường xuyên, dấu chấm phẩy, Gầy và siêu nhẹ.

Ghi chú rằng phông chữ được cấp phép bởi Apple, có nghĩa là bạn có quyền sử dụng nó trong quá trình phát triển phần mềm cho các sản phẩm của Apple, cũng như trong ảnh chụp màn hình của các sản phẩm tương tự.

Hãy nhớ điều này và chúc may mắn với những nỗ lực sáng tạo của bạn!

Apple đã sử dụng bộ phông chữ Helvetica làm phông chữ hệ thống cho iOS kể từ khi phát hành chiếc iPhone đầu tiên. Họ cũng thay thế Lucida Grande trong Mac OS X bắt đầu với phiên bản 10.10 Yosemite. Vậy tại sao Apple lại quyết định loại bỏ phông chữ được yêu thích nhất thế giới?

iOS 9 hiện đã chính thức có sẵn cho tất cả mọi người và một họ phông chữ mới có tên San Francisco đã thay thế Helvetica Neue một cách tinh tế.

Helvetica (trái) và San Francisco (phải)

Đến thời điểm này, chúng đã được sử dụng trong Apple Watch. Giờ đây, San Francisco đã trở thành một phông chữ tiêu chuẩn duy nhất cho tất cả các sản phẩm nền tảng: Apple Watch, iPhone, iPad và Mac.

Apple đã sử dụng họ Helvetica làm phông chữ hệ thống cho iOS kể từ khi phát hành iPhone đầu tiên. Họ cũng thay thế Lucida Grande trong Mac OS X bắt đầu với phiên bản 10.10 Yosemite. Vậy tại sao Apple lại quyết định loại bỏ phông chữ được yêu thích nhất thế giới?

Kích thước nhỏ là điểm yếu của Helvetica

Có ý kiến cho rằng Helvetica không phù hợp với kích thước văn bản nhỏ. Khi Helvetica thay thế họ trước đó trong Mac OS X Yosemite, nhiều nhà thiết kế thấy sự thay thế này không phù hợp.

"Helvetica tệ" từ blog của Erik Spiekermann.

Bạn có thể xác minh khả năng đọc thấp của Helvetica như sau. Nhập một số văn bản nhỏ và làm mờ nó. Đồng thời, một số đoạn của nó bị “trộn lẫn” nên việc phân tích nội dung của chúng trở nên khó khăn. Apple được cho là đã thiết kế họ San Francisco chỉ để làm cho văn bản nhỏ trên Apple Watch dễ đọc hơn.

Tuy nhiên, độ phân giải của các thiết bị thông minh hiện đại vượt quá độ phân giải bản in, và văn bản trên iPhone không phải lúc nào cũng nhỏ như trên Apple Watch. Tại sao sau đó Apple không chỉ thay thế Apple Watch mà còn cả iOS và Mac OS X?

San Francisco - Đa dạng

Phông chữ San Francisco có nhiều tính năng giúp chúng dễ đọc. Trên thực tế, phiên bản San Francisco dành cho Apple Watch và phiên bản iOS/Mac là hai phông chữ khác nhau.

Họ phông chữ có tên “SF” được sử dụng cho iOS/Mac trong khi “SF Compact” được sử dụng cho Apple Watch. Bạn có thể thấy sự khác biệt với các chữ cái được làm tròn như 'o' và 'e'. Các đường thẳng đứng trong SF Compact phẳng hơn trong SF.

Sự khác biệt này khiến văn bản được nhập bằng SF Compact có nhiều vết lõm hơn giữa các ký tự, dẫn đến văn bản dễ đọc hơn khi đọc trên các thiết bị nhỏ như Apple Watch.

Thêm vào đó, mỗi họ được chia thành hai họ con nữa: “Văn bản” và “Hiển thị”. Apple gọi nó là "Kích thước quang học". Phân họ Văn bản dành cho kích thước văn bản nhỏ, trong khi phân họ Hiển thị dành cho kích thước văn bản lớn.

Họ phông chữ San Francisco

Như đã đề cập ở trên, trong phông chữ sans serif (hoặc sans serifs) chẳng hạn như Helvetica, hai chữ cái liền kề "pha trộn" và các chữ cái như 'a', 'e', 's' trở nên rất người bạn tương tự chồng lên nhau ở cỡ chữ nhỏ.

So sánh thụt lề giữa các ký tự trong phông chữ của các phân họ Hiển thị và Văn bản

So sánh phông chữ của các phân họ Hiển thị và Văn bản trên ví dụ về một ký tự

Đồng thời, phân họ Văn bản được hình thành theo cách sao cho khoảng cách giữa các ký tự trong đó được tăng lên so với các ký tự của phân họ Hiển thị và các khoảng trống trong chúng được mở rộng để cải thiện khả năng đọc ở kích thước văn bản nhỏ.

San Francisco năng động

Một trong những điều tuyệt vời về San Francisco là tai nghe được tối ưu hóa động. Hiển thị và Văn bản thay thế nhau theo kích thước của văn bản được hiển thị. Ngưỡng ở đây là 20pt.

Các nhà thiết kế và kỹ sư không phải lo lắng về việc chọn tùy chọn phù hợp từ gia đình. Ví dụ, chúng tôi chỉ thêm phông chữ hệ thống vào UILabel. Hệ thống sẽ xác định bạn cần loại tai nghe nào.

Tuy nhiên, điều thực sự ấn tượng về phông chữ San Francisco là cách chúng hiển thị dấu hai chấm. Thông thường trong các phông chữ khác, chúng ta thấy nó ở ngay phía trên dòng dưới cùng, vì vậy trong trường hợp nó nằm giữa các số, dấu hai chấm không được căn giữa theo chiều dọc. Tuy nhiên, trong các phông chữ San Francisco, việc căn chỉnh này diễn ra tự động.

Tự động căn giữa dấu hai chấm theo chiều dọc

San Francisco đến với chúng tôi từ thời đại kỹ thuật số

Như bạn có thể thấy, phông chữ San Francisco được thiết kế và thiết kế để có thể dễ dàng đọc được bằng văn bản ở mọi kích cỡ và trên mọi thiết bị.

Helvetica, mà họ đã thay thế, được tạo ra ở Thụy Sĩ vào năm 1957, khi chưa có thiết bị kỹ thuật số nào. Tuy nhiên, nó vẫn được nhiều công ty sử dụng làm kiểu chữ công ty và chắc chắn sẽ tiếp tục được sử dụng như một kiểu chữ cổ điển tốt trong tương lai.

Mặt khác, San Francisco là một kiểu chữ hiện đại. Kiểu chữ của anh ấy thay đổi linh hoạt, theo ngữ cảnh. Có thể gọi đây là một loại “phông chữ bản địa” của thời đại số.

Bây giờ, có lẽ là lần đầu tiên kể từ chiếc Macintosh đầu tiên, việc sử dụng phông chữ hệ thống cho giao diện là điều hợp lý. Chúng là một giải pháp thay thế thú vị và mới mẻ cho kiểu chữ web - và chúng không yêu cầu lưu trữ trên máy chủ của bạn hoặc bên thứ ba. Làm cách nào để sử dụng phông chữ hệ thống trên trang web và vấn đề gì có thể phát sinh ở đây?

TẠI những năm trước có nhiều phông chữ hệ thống thú vị cho giao diện. Google phát hành người máy(và tiếp tục phát triển phông chữ với các bản cập nhật thường xuyên), Apple đã phát hành phông chữ San Francisco và nhà thiết kế Eric Spiekerman đã tạo phông chữ Fira Sans cho Mozilla. Và đó không phải là tất cả, đừng quên Microsoft. Chính họ đã bắt đầu xu hướng này bằng cách phát hành điện thoại cửa sổ với ngôn ngữ thiết kế Metro gắn liền với kiểu chữ nói chung và Segoe nói riêng.

Không ngạc nhiên khi ý tưởng sử dụng các phông chữ này trên web đang trở nên phổ biến. Có thể bạn muốn nhấn mạnh sự khác biệt giữa nội dung và giao diện người dùng nhiều hơn, có thể bạn muốn làm cho trang web trông giống như một ứng dụng hoặc bạn chỉ muốn sử dụng phông chữ đẹp không chậm trễ.

Nhưng việc sử dụng chúng không dễ dàng như chúng ta mong muốn. CSS hỗ trợ các phông chữ này theo một cách hơi ảo giác.

Lưu ý: "phông chữ giao diện hệ thống" là phông chữ được sử dụng để hiển thị giao diện của hệ điều hành - đừng nhầm lẫn nó với phông chữ hệ thống, tức là phông chữ được cài đặt trên hệ thống của người dùng.

Hai cách tiếp cận

trên thời điểm này Có hai cách để sử dụng phông chữ giao diện hệ thống trong kiểu chữ.

cách đầu tiên

Nó bao gồm việc sử dụng một tuyên bố CSS "ma thuật" ngắn:

Phông chữ: thực đơn

cách thứ hai

Cách thứ hai là liệt kê tên của tất cả các phông chữ:

Nó cũng có nhược điểm:

Sự lựa chọn khác

Bạn có thể thấy thú vị khi kết hợp cả hai cách tiếp cận trên để đạt được kết quả tốt nhất. Than ôi, điều này không dễ dàng, bởi vì các thuộc tính phông chữ và họ phông chữ là loại trừ lẫn nhau - cái này luôn ghi đè cái kia. Có thể lấy thứ gì đó bằng cách thao tác truy vấn phương tiện, nhưng phương pháp này thuộc danh mục hack.

Bạn cũng có thể thử gửi những nghĩa khác nhau CSS từ máy chủ tùy thuộc vào tác nhân người dùng hoặc thực hiện tương tự với JavaScript (ví dụ: chỉ gửi font-family: "Fira Sans", sans-serif; cho Firefox OS). Nhưng tùy chọn này cồng kềnh, khó bảo trì và quan trọng nhất là nó không giải quyết được mọi vấn đề.

Làm gì bây giờ?

Phương tiện hiện đang sử dụng phương pháp thứ hai:

Họ phông chữ: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxy", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Nó được chọn vì nó có ít vấn đề lớn. (Phương pháp đầu tiên không hoạt động trên thiết bị di động, với những hậu quả hoàn toàn không thể chấp nhận được; phương pháp thứ hai cũng có vấn đề, nhưng chúng ít hơn và không nghiêm trọng. Đánh giá của bạn về các phương pháp này có thể khác).

Chúng ta có thể cùng nhau cải thiện kỹ thuật này. Dưới đây là một khối có văn bản sẽ được hiển thị trong phông chữ giao diện của hệ thống của bạn. Nếu điều này không hoạt động hoặc bạn có bất kỳ suy nghĩ nào về điều này, vui lòng để lại nhận xét.

Điều này sẽ được hiển thị trong phông chữ giao diện người dùng của hệ thống của bạn. The quick brown fox jumps over the lazy dog. Văn bản này phải được hiển thị trong phông chữ giao diện hệ thống.

Xem chi tiết danh sách phông chữ

Hiện tại, phương pháp này có các vấn đề sau:

Cho đến ít nhất là tháng 12 năm 2015, Firefox trên Mac OS X sẽ sử dụng Neue Helvetica thay vì San Francisco.
Cũng trên Mac OS X, Neue Helvetica được hiển thị thay vì Lucida Grande trên các phiên bản trước Yosemite.
Trong ít phổ biến hơn các hệ điều hành và cấu hình phức tạp hơn sự lựa chọn đúng đắn phông chữ chính xác thậm chí còn khó khăn hơn.

Nếu bạn quan tâm đến các chi tiết, hãy xem danh sách này sẽ trông như thế nào để hoạt động chính xác:

Họ phông chữ: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxy", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Nhóm đầu tiên chứa các thuộc tính đề cập đến phông chữ giao diện hệ thống. Chúng khá đáng tin cậy và không có khả năng trình duyệt sẽ nhầm lẫn chúng với những thứ khác:

-apple-system bao gồm San Francisco trong Safari trên Mac OS X và iOS cũng như trên các phiên bản cũ hơn của Mac OS X, Neue Helvetica và Lucida Grande. Với giá trị này, lựa chọn tự động hoạt động giữa Văn bản San Francisco và Hiển thị San Francisco tùy thuộc vào kích thước phông chữ.
BlinkMacSystemFont tương đương với giá trị trước đó và hoạt động trong Chrome trên Mac OS X.

TẠI nhóm tiếp theo các phông chữ đã biết của giao diện hệ thống được tô sáng:

Giao diện người dùng Segoe bao gồm Windows và Windows Phone.
Roboto là Android và Chrome OS mới. Nó được đặt sau Segoe UI để cho phép các nhà phát triển Android làm việc trên Windows có cài đặt Roboto để Roboto không thay thế Segoe UI.
Oxygen là một phông chữ KDE, Ubuntu tất nhiên là Ubuntu và Cantarell là Gnome. Ba phông chữ cho Linux cùng một lúc, nhưng với sự phong phú của các bản phân phối, chúng không giải quyết được vấn đề.
Phông chữ hệ điều hành Firefox Fira Sans.
Droid Sans - phiên bản cũ của Android.
Lưu ý rằng chúng tôi không chỉ định tên phông chữ San Francisco. Trên iOS và Mac OS X, San Francisco hiện diện dưới dạng "phông chữ ẩn" thay vì phông chữ công khai.
Và chúng tôi cũng không chỉ định San Francisco bằng cách sử dụng .SFNSText-Regular , tên nội bộ PostScript cho San Francisco trên Mac OS X. Tên này chỉ hoạt động trong Chrome và kém linh hoạt hơn BlinkMacSystemFont.

Trong nhóm thứ ba, chúng tôi có các phông chữ được sử dụng làm dự phòng:

Helvetica Neue được sử dụng trên Mac OS X trước El Capitan. Phông chữ được liệt kê ở cuối danh sách do được sử dụng rộng rãi.
sans-serif là một dự phòng truyền thống với phông chữ sans-serif mặc định.

Sự phát triển của phông chữ giao diện hệ thống trên Windows ấn tượng hơn trên Mac - từ phông chữ bitmap đơn cách của Windows 1.0 vào năm 1985 đến độ nét cao Giao diện người dùng Segoe trong Windows 10. (phiên bản lớn hơn)

Tương lai

Vẫn còn một cái gì đó để làm việc với ở đây. Hãy bắt đầu với thực tế là kỹ thuật này chỉ hoạt động với kiểu chữ phương Tây. Ngoài ra, các vấn đề phát sinh nếu bạn muốn căn chỉnh phần đệm hoặc chiều cao dòng theo phông chữ giao diện đang được sử dụng - trong trường hợp đó, bạn phải sử dụng phương pháp kết hợp hoặc nhận dạng phông chữ sau khi kết xuất.

Nhưng vẫn có kết quả tốt. Hy vọng trong tương lai mọi chuyện sẽ bớt phức tạp hơn. Nếu bạn cũng quan tâm đến điều này, vui lòng cho các nhà sản xuất trình duyệt biết.

Ba phiên bản cuối cùng của Mac OS X sử dụng ba phông chữ giao diện khác nhau: Lucida Grande trên Mac OS 10.9 (Mavericks); một phiên bản đặc biệt của Neue Helvetica trên Mac OS 10.10 (Yosemite); phiên bản đặc biệt của San Francisco trên Mac OS 10.11 (El Capitan). Thật hợp lý khi cho rằng San Francisco sẽ được sử dụng trong các phiên bản tương lai. (