Sự phát triển của typography với phông chữ thay đổi: giới thiệu

Mỏng, dày và mọi thứ ở giữa: FF Meta Biến từ Monotype

Từ ngữ có sức mạnh và kiểu chữ là tiếng nói của họ

Trong nhiều thế kỷ, loại hình là cách chúng ta ‘nghe thấy những gì chúng ta đọc. Nó cũng thường hiểu rằng kiểu chữ và kiểu chữ là một yếu tố cốt lõi của thương hiệu, biểu hiện, phạm vi phát âm. Kiểu chữ tuyệt vời ảnh hưởng đến sự hiểu biết, tâm trạng và ý nghĩa theo vô số cách và là một phần thiết yếu của thiết kế. Thật không may, trong nhiều năm sau khi web ra đời, chúng tôi không thể áp dụng tất cả ngoại trừ thiết kế chính tả nhất cho nội dung trực tuyến. Với khả năng sử dụng phông chữ thực và các tính năng OpenType - như chữ ghép, bộ hình cụ thể, phân số và độ sáng thực sự - bối cảnh chính tả được cải thiện rất nhiều. Nhưng thực tế của việc xem nội dung trên web cho thấy tốc độ là khía cạnh quan trọng nhất của thiết kế - vì vậy chúng tôi đã trao đổi kiểu chữ phạm vi phát âm cho tốc độ trang. Điều đó có nghĩa là trọng lượng phông chữ ít hơn và giảm độ trung thực của thương hiệu và giọng nói.

Từ nhiều, một (mô hình: thay đổi)

Một phông chữ biến là một phông chữ hoạt động như nhiều
- John Hudson

Sự ra đời của Phông chữ biến đổi thay đổi toàn bộ động. Theo mô tả của John Hudson, một phông chữ biến là một phông chữ duy nhất hoạt động như nhiều: tất cả các biến thể của chiều rộng và trọng lượng, nghiêng và thậm chí in nghiêng có thể được chứa trong một tệp phông chữ duy nhất, hiệu quả cao và có thể nén được. Thêm gì nữa: định dạng (về mặt kỹ thuật là một phần của đặc tả OpenType 1.8) hoàn toàn có thể mở rộng. Nhà thiết kế kiểu có toàn quyền kiểm soát những trục được sử dụng, phạm vi của chúng và thậm chí cả định nghĩa của trục mới. Hiện tại có 5 trục trục đã đăng ký (chiều rộng, trọng lượng, độ nghiêng, chữ nghiêng và kích thước quang), nhưng người thiết kế có thể thay đổi bất kỳ trục nào họ chọn. Một số ví dụ bao gồm chiều cao của con cháu và con cháu, lớp văn bản, thậm chí hình dạng serif. Các khả năng là gần như vô hạn. Bằng cách loại bỏ rào cản hiệu suất, chúng tôi mở ra cánh cửa cho thiết kế năng động và thú vị hơn và khả năng thể hiện tiếng nói thực sự của thương hiệu lớn hơn nhiều. Tất cả điều này trong khi duy trì độ trung thực với chính kiểu chữ: chỉ các trục được trình bày bởi nhà thiết kế kiểu có thể được thay đổi. Không cho phép biến dạng nhân tạo.

Thiết kế web, được phát minh lại

Trong khi công nghệ vẫn đang phát triển và các nhà thiết kế loại đang làm việc để trở nên thông thạo hơn trong cách làm việc mới này, thì lời hứa cho thiết kế trên web là đột phá. Kịch bản điển hình là hạn chế bất kỳ thiết kế nào cho 3 phông chữ khác nhau để thể hiện mọi khía cạnh của ngôn ngữ và giọng nói thiết kế của trang web - bao gồm mọi hoán vị cho bản sao và tiêu đề. Với cách thực hiện đơn giản nhất, các phông chữ biến đổi sẽ cho chúng ta tự do sử dụng các trọng lượng khác nhau cho mọi cấp độ tiêu đề - làm tăng đáng kể độ rõ ràng và dễ đọc của chúng.

Ampersands từ 100 đến 900 trọng lượng

Người ta cũng có thể sử dụng độ rộng ký tự hẹp hơn một chút cho các tiêu đề hoặc trên màn hình hiển thị thông tin dày đặc dữ liệu. Trong thực tế, toàn bộ hệ thống typographic có thể được thiết kế theo tỷ lệ: trọng lượng và chiều rộng có thể trở thành bội số trên cài đặt sao chép cơ thể tiêu chuẩn. Làm như vậy sẽ cho phép các khía cạnh đó được chia tỷ lệ dễ dàng cùng với bản sao cơ thể nếu cài đặt của nó thay đổi dựa trên kích thước màn hình hoặc tùy chọn của người dùng. Tất cả điều này với sự gia tăng hiệu suất đi kèm do có ít yêu cầu HTTP hơn (ít tệp phông chữ hơn) và tiết kiệm dữ liệu tổng thể để tải xuống (mặc dù điều đó sẽ thay đổi theo phông chữ và nén được sử dụng).

Nhưng trong khi các quyền tự do này cho phép chúng ta biểu cảm hơn, một số khả năng thực sự thú vị sẽ giúp thay đổi trải nghiệm đọc chính nó. Trang này (tốt, chính trang thử nghiệm thực tế) đã được thiết lập với phiên bản phông chữ biến đổi mới của FF Meta, thiết kế sans-serif cổ điển của Erik Spiekermann phát hành lần đầu tiên vào năm 1991. Thậm chí chỉ có một trục biến thể (trọng lượng) của cả hai Các biến thể roman và in nghiêng, một loạt giọng nói tuyệt vời có thể đạt được với hiệu suất khổng lồ: 18 tệp và hơn 288k được thay thế bằng một tệp duy nhất chỉ 84k.

Đọc lại trên màn hình

[Meta] phải làm nhiều việc hơn là trông xinh đẹp: nó phải làm việc khá chăm chỉ
Giáo sư Spiekermann

Một số thách thức lớn nhất trong việc tạo ra trải nghiệm đọc tốt gắn liền với việc thiếu sự tinh tế về tỷ lệ và chi tiết tốt. Sự kết hợp của các tính năng và biến thể CSS và OpenType hiện đại thể hiện sự kết hợp mạnh mẽ. Có thể đặt các tính năng như chữ ghép và gạch nối dựa trên ngôn ngữ, bật và tắt dấu gạch nối dựa trên kích thước màn hình và thậm chí điều chỉnh độ rộng ký tự trên màn hình nhỏ nhất để phù hợp với nhiều ký tự hơn trên mỗi dòng mà không làm giảm kích thước phông chữ sự mượt mà và thoải mái của trải nghiệm đọc.

Sẵn sàng cho một cận cảnh

Cắt Garhua thế kỷ 18 cắt theo kích thước quang học. Hình ảnh đầu tiên ở kích thước 6pt, hình ảnh thứ hai là 72. Lưu ý sự khác biệt về độ tương phản đột quỵ. Nó tinh tế hơn nhiều trong kích thước lớn hơn.

Một tính năng phổ biến khác trong loại kim loại nhưng bị mất trong dịch thuật để sắp chữ và kỹ thuật số là kích thước quang học (tốt, một số nhà thiết kế vẫn tạo ra các kích thước quang riêng biệt cho các phạm vi khác nhau, nhưng nó hiếm và có phần hạn chế). Không thường thấy trên các thiết kế sans-serif, nhưng trong nhiều thập kỷ qua (trong thực tế, trong nhiều thế kỷ), điều khá phổ biến là kích thước vật lý nhỏ hơn của một kiểu chữ được cắt bằng những nét nặng hơn một chút, bát và quầy mở hơn, và trong một số trường hợp thậm chí khẩu độ rộng hơn để duy trì khả năng đọc. Báo chí đặc biệt nhận thấy điều này rất quan trọng để đảm bảo các dòng didn bị mất hoặc các chữ cái không bị tổn thương quá nhiều do mực.

Kích thước quang đã trở lại trong các phông chữ thay đổi và có thể được tự động áp dụng khi có sẵn hoặc được thiết kế rõ ràng bởi nhà thiết kế hoặc nhà phát triển web. Như đã đề cập, nó không phải là một tính năng thường xuyên trong các kiểu chữ sans-serif như kiểu này, nhưng có thể được sử dụng để tạo hiệu ứng khá ấn tượng trong các thiết kế serif có độ tương phản cao hơn.

Ba Lan và đĩnh đạc

Với những lợi ích đã được thảo luận, trường hợp cho các phông chữ thay đổi là khá hấp dẫn. Nhưng typography tốt là tất cả có để thiết kế tuyệt vời. Phạm vi của các trục như chiều rộng và trọng lượng cho chúng ta sự tự do to lớn để nắm lấy thiết kế biên tập nhiều hơn trên web mà không phải tải một số lượng tài sản tệp cắt cổ. Và vì chúng tôi đã có sẵn một vài phông chữ biến đổi cần thiết, nên cơ hội là để lộ chúng để sử dụng bởi chính các nhà xuất bản nội dung. Hãy tưởng tượng một vai trò cho các nhà thiết kế bên trong Hệ thống quản lý nội dung (hoặc CMS) nơi đặt trang web. Nhà thiết kế đó có thể sử dụng một số điều khiển đơn giản được tích hợp trong CMS cho phép họ sắp xếp các tiêu đề cụ thể hoặc trích dẫn kéo, cho phép một cấp độ thiết kế hoàn toàn mới giống như những gì chúng ta có trong bản in, mà không phải viết mã tùy chỉnh mỗi lần.

Chúng ta có thể vẫn còn ở bình minh của kỷ nguyên mới này, nhưng tương lai của nó chắc chắn rất tươi sáng

Kể từ tháng 5 năm 2018, 3 trên 4 trình duyệt web chính đã hỗ trợ phông chữ biến đổi, ngoài cả hai nền tảng di động thống trị (kiểm tra hỗ trợ trên caniuse.com). Với ý nghĩ đó, chúng tôi đã sẵn sàng bắt đầu chiếu sáng web ngay hôm nay.

Tại đây, toàn bộ trang trên CodePen. Cùng nhau xem xét tất cả mọi thứ và xem qua CSS điều khiển nó. Điều này bao gồm một hệ thống typographic mở rộng mà tôi đã tạo dựa trên một số ý tưởng tôi học được từ Jen Simmons và Tim Brown, sử dụng các đơn vị khung nhìn, thuộc tính tùy chỉnh CSS (còn gọi là biến) và rất nhiều phép tính. Bạn có thể xem nó trực tiếp trên CodePen hoặc thực sự kiểm tra nó được nhúng bên dưới.

Một số suy nghĩ về kiểu chữ và dự án

Iveve luôn là người hâm mộ công việc của Erik Spiekermann, và tôi nghĩ rằng niên đại và lịch sử của Meta, Officina và Fira thực sự thú vị, và là một phần của thiết kế kỹ thuật số đối với tôi trong 25 năm qua. Cơ hội để có một kiểu chữ với loại lịch sử và tác động đó trong thế giới thiết kế và làm việc với nó trong bối cảnh của một công nghệ hoàn toàn mới thực sự rất thú vị. Tôi đặc biệt đánh giá cao việc có thể làm việc với cả trọng lượng và chữ nghiêng như một phần của cùng một tệp: nó thể hiện giá trị của định dạng phông chữ biến đổi thực sự tốt.

Tôi quyết định thậm chí không bắt đầu thiết kế trang cho đến khi tôi tự viết bài báo. Tôi muốn viết một bài giới thiệu tốt nhằm vào các nhà thiết kế và chủ sở hữu thương hiệu để giới thiệu cho họ những lợi ích của phông chữ thay đổi theo thuật ngữ sẽ cộng hưởng với mối quan tâm của họ: ngôn ngữ thiết kế và biểu hiện thương hiệu. Khi tôi cảm thấy mình có một bản nháp tốt, tôi đã thêm một chút cụ thể hơn vào chính kiểu chữ và vị trí của nó trong từ vựng thiết kế của chúng tôi. Điều này đã cho tôi một số ý tưởng về cách hiển thị cả kiểu chữ và lịch sử.

Khi nghĩ về cách sắp chữ cơ bản, tôi đã đi theo thang đo: Tôi muốn chơi với các cực trị của trọng lượng và kích thước theo cách mà bạn không thấy trên mạng do hầu hết các thiết kế bị hạn chế hơn về trọng lượng được sử dụng. Trong trường hợp này, tôi đã sử dụng toàn bộ phạm vi trọng lượng từ 100 đến 900 ở cả tiếng La Mã và chữ nghiêng. Khi tôi bắt đầu có được bố cục mà tôi thích, tôi nhận ra rằng thay vì làm đồ họa để minh họa các khả năng, sẽ thú vị hơn khi tạo các hình minh họa ra khỏi kiểu: kéo trích dẫn và một chút dữ liệu phông chữ kiểu chữ thông tin.

Cảm giác cuối cùng của ampersand lên trên thực sự được lấy cảm hứng từ trang mẫu vật trên trang FontFont: có một bộ lấy mẫu glyph hiển thị tất cả các trọng số của một ampers và xếp chồng lên nhau. Ban đầu tôi đã có tất cả chúng được xếp chồng lên nhau theo cùng một cách, với hoạt hình trong một vòng lặp - nhưng đó là một chút nhiều cho một số trình duyệt vẫn thực hiện phông chữ biến đổi và hoạt hình keyframe. Khi tôi nhấn vào bố cục chồng chéo với tùy chọn phát / tạm dừng, tôi thích cách chúng nhìn ra (đặc biệt là trên thiết bị di động). Vì vậy, tôi lật nó lại và bắt đầu tĩnh, rồi chơi hoạt hình một lần và quay lại bố cục trải / xếp lớp.

Tất cả trong tất cả, tôi đã thực sự hài lòng với cả nội dung và thiết kế, cũng như cách nó di chuyển và phát triển trên các kích thước màn hình khác nhau. Tôi hy vọng nó phục vụ như là nguồn cảm hứng và hướng dẫn cho người khác là tốt.

[Monotype gần đây đã lôi kéo tôi viết và thiết kế một trang trình diễn để giới thiệu một phiên bản phông chữ biến đổi mới của thiết kế Erik Spiekermann cổ điển FF Meta. Đây là văn bản của trang đó và một số hình ảnh. Trang trực tiếp đầy đủ được lưu trữ trên CodePen và được nhúng ở trên. Nó mở cho tất cả mọi người, vì vậy hãy thoải mái tạo một bản sao và tự chơi với nó. Bạn có thể thấy giới thiệu của họ về công nghệ là tốt.]

Nội dung gốc được đăng trên blog của tôi