Di chuyển sang Phông chữ biến thể

1. Giới thiệu

Lần cập nhật gần đây nhất: 11/5/22

269e1597309e5d7a.png

Hãy tận dụng tính linh động động trong giao diện người dùng bằng phông chữ biến thể. Điều này sẽ giúp tăng khả năng phản hồi trong bố cục, giao diện và khả năng hỗ trợ tiếp cận, đồng thời giúp ứng dụng của bạn nhanh hơn!

Kiến thức bạn sẽ học được

  • Phông chữ biến đổi là gì.
  • Cách bạn có thể tuỳ chỉnh kiểu bằng các thuộc tính này.
  • Cách áp dụng phông chữ biến đổi cho thiết kế của bạn.
  • Cách triển khai phông chữ biến đổi bằng API Google Fonts và trong CSS.

Điều kiện tiên quyết

Đối với lớp học lập trình này, chúng ta sẽ xây dựng dựa trên một số khái niệm cơ bản về thiết kế.

  • Có kiến thức về tỷ lệ phông chữ.
  • Có kiến thức về Figma.
  • Có kiến thức cơ bản về HTML và CSS.

Bạn cần có

2. Bắt đầu

Thiết lập

Để bắt đầu, bạn cần truy cập vào tệp Figma Designlab. Mọi thứ bạn cần cho lớp học này đều có trong tệp Figma đó. Bạn có thể tải tệp này xuống và nhập tệp hoặc sao chép qua cộng đồng Figma.

Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.

Sao chép qua trang Cộng đồng Figma

Chuyển đến tệp Migrating to Variable fonts (Di chuyển sang phông chữ biến đổi) hoặc tìm kiếm từ khoá Migrating to Variable fonts (Di chuyển sang phông chữ biến đổi) trong Cộng đồng Figma. Nhấp vào Duplicate (Sao chép) ở góc trên cùng bên phải để sao chép tệp này vào các tệp của bạn.

2cb1a5f77aab6012.png

Bố cục tệp

Khi xem qua tệp, bạn sẽ nhận thấy rằng đây là một tệp độc lập, và bắt đầu bằng phần giới thiệu. Mỗi phần sẽ được chia thành một hàng gồm các bản vẽ được liên kết với nhau, với một số khái niệm cốt lõi cho phần đó, sau đó là các bài tập. Các phần và bài tập này được xây dựng dựa vào nhau nên cần được hoàn thành tuần tự.

Lớp học lập trình này sẽ hướng dẫn cụ thể hơn cho bạn về những khái niệm và bài tập đó. Hãy đọc cùng với lớp học lập trình này để tìm hiểu thêm về các tính năng mới của Material You.

Bắt đầu với bảng vẽ Intro (Giới thiệu), trong đây có các nút liên kết các bảng vẽ với nhau theo thứ tự. Để truy cập vào đường liên kết, hãy nhấp vào nút đó.

289defd9d067d2f0.png

Kiểm tra phông chữ biến đổi

Trước khi bắt đầu, chúng ta cần đảm bảo có phông chữ biến! Tệp này sử dụng Roboto Flex, đã có trong Figma hoặc bạn có thể tải tệp này xuống từ fonts.google.com

3. Phông chữ biến đổi là gì?

Phông chữ biến thể là một định dạng phông chữ mới, sáng tạo, cho phép người dùng kiểm soát kiểu và biểu tượng của họ. Roboto Serif và Roboto Flex là các kiểu chữ mới được thiết kế dành riêng cho công nghệ phông chữ biến thiên, mỗi kiểu chữ có nhiều trục. 64c74a7d7844423.png

Biểu thức thẩm mỹ và trục

Nhà thiết kế không còn bị giới hạn ở các kiểu cố định cũ, chẳng hạn như kiểu thường, in đậm, in nghiêng, v.v. Các biến trong phông chữ biến được kiểm soát bằng trục hoặc thực thể. Nếu nhà thiết kế phông chữ chọn, bất kỳ biến nào trong thiết kế phông chữ đều có thể được gán cho một trục do người dùng kiểm soát. Các trục phổ biến bao gồm nghiêng, kích thước quang học, độ nghiêng, độ đậm, chiều rộng. Đây là 5 trục đã đăng ký trong CSS.

Lợi ích

Phông chữ biến thể cho phép bạn phân phối nhiều kiểu trong một tệp phông chữ, giúp trang web bền vững hơn, nhỏ gọn hơn và nhanh hơn, đồng thời giúp nhà thiết kế có nhiều quyền kiểm soát hơn.

77346d3812d79acc.png

4. Sử dụng phông chữ biến đổi trong thiết kế

Thay đổi trục

Hãy xem qua tất cả các tham số (hoặc trục) hiện có và hiệu ứng của các tham số đó. Chọn loại ở bên phải rồi mở cửa sổ bật lên Type Details (Thông tin chi tiết về loại) (biểu tượng khác) để mở thanh trượt trục và xem từng tham số.

  1. Độ đậm xác định độ dày của một chữ cái. Cung cấp một dải độ dày nét vẽ đầy đủ, liên tục.

5f18f2f50f6dc4da.gif

  1. Chiều rộng là kết quả của không gian theo chiều ngang mà các ký tự của phông chữ chiếm dụng.

dddc87cccfcb47f9.gif

  1. Điều chỉnh kiểu chữ từ thẳng đứng thành nghiêng, còn được các nhà thiết kế chữ gọi là kiểu chữ "oblique" (nghiêng). Mặc dù hiếm khi xảy ra, nhưng Slant (Góc nghiêng) có thể hoạt động theo hướng khác, được gọi là kiểu "backslanted" (nghiêng ngược) hoặc "reverse oblique" (nghiêng ngược).

1b7fbf03fcbf16dc.gif

  1. Độ đậm là hệ số sửa đổi phụ của độ đậm quang học của một kiểu chữ và độc lập với trục Độ đậm. Cả Độ đậm và Cấp độ đều ảnh hưởng đến độ dày của chữ cái, nhưng các mức điều chỉnh bằng Cấp độ sẽ chi tiết hơn nhiều.

35705cb05c8df559.gif

  1. Kích thước quang học. Điều chỉnh kiểu cho phù hợp với các kích thước văn bản cụ thể, được chỉ định bằng điểm. Ở kích thước nhỏ hơn, các chữ cái thường được tối ưu hoá để dễ đọc hơn, với khoảng cách/kerning lỏng và nét dày hơn với ít chi tiết hơn. Ở kích thước lớn hơn, chữ cái thường được tối ưu hoá cho dòng tiêu đề với nét mỏng hơn và hình dạng chi tiết hơn, cũng như độ đậm và chiều rộng cực đại hơn.

ed569d469ebd40d6.gif

Hãy xem bản minh hoạ Phông chữ biến để thử nghiệm với các trục phông chữ biến bên ngoài Figma.

5. Tăng cường phong cách

Nếu làm việc với một hướng dẫn về kiểu thương hiệu, bạn có thể có một tỷ lệ kiểu chữ đã thiết lập để thông báo các quy tắc ràng buộc về kiểu chữ. Việc sử dụng phông chữ biến thể không có nghĩa là bạn có thể bỏ qua tính nhất quán này. Tính năng này giúp bạn tinh chỉnh thêm trong phạm vi linh hoạt của tỷ lệ phông chữ (đối với các trường hợp sử dụng như tăng độ đậm trên cấp trên nền tối) trong một tệp duy nhất.

ecb7c0b0056fc315.png

Mặc dù một tỷ lệ kiểu chữ có thể bao gồm nhiều bộ phông chữ, nhưng ở đây chúng ta sẽ chỉ sử dụng một bộ phông chữ để tuỳ chỉnh phiên bản thu gọn của tỷ lệ kiểu chữ mặc định của Material.

  1. Hãy bắt đầu tuỳ chỉnh tỷ lệ kiểu chữ bằng văn bản nội dung. Điều này cho phép chúng ta đặt kích thước phông chữ cơ sở của trang web trước và điều chỉnh theo cách quang học từ đó. Kích thước mặc định cho Body Large là 18pt, được chọn và đặt thành Roboto Flex. Trước đây, việc điều chỉnh để dễ đọc hơn có nghĩa là cập nhật cỡ chữ và độ đậm, tức là một tệp phông chữ khác, nhưng giờ đây, chúng ta có thể tinh chỉnh một số trục. Điều chỉnh kích thước quang học, cấp và trọng số.
  2. Tiếp tục với Nhãn. Nhãn hữu ích hơn và được sử dụng trong ngữ cảnh ngắn hơn, chẳng hạn như nút. Điều chỉnh độ đậm nhạt một cách quang học để cho phép nhãn xuất hiện chính xác trên vùng chứa nút và khối.
  3. Tiếp tục tinh chỉnh bằng các mục Tiêu đề, Dòng tiêu đề và Hiển thị. Cả ba kiểu này đều được dùng cho văn bản có mức độ nhấn mạnh từ trung bình đến cao, chẳng hạn như tiêu đề trang và mục. Tiêu đề và Màn hình có thể biểu đạt hiệu quả hơn nhờ kích thước và mức độ nhấn mạnh cao. Bạn có thể tuỳ ý điều chỉnh tất cả các trục ở đây!
  4. Khi đã chọn loại, hãy nhấp vào biểu tượng 4 dấu chấm rồi thêm (+) để đặt kiểu văn bản, giúp đảm bảo chế độ cài đặt kiểu nhất quán và có thể sử dụng lại.

Bạn có thể tạo tỷ lệ kiểu chữ Material mặc định dưới dạng kiểu Figma bằng Trình tạo giao diện Material hoặc bằng cách sao chép bộ thiết kế M3.

6. Áp dụng cho giao diện người dùng

Sau khi thiết lập tỷ lệ kiểu chữ, hãy áp dụng tỷ lệ đó cho các thành phần trên giao diện người dùng để triển khai trong mã! Hãy cân nhắc cách sử dụng phông chữ có thể thay đổi để tăng tính biểu cảm và dễ đọc hơn. Nếu bạn thiết lập các kiểu Figma trong bài tập cuối cùng, bạn có thể áp dụng các kiểu đó, sau đó cập nhật các trục của kiểu.

18efaa2c7bc6ecac.png

  1. Hãy xem các thành phần trên giao diện người dùng ở bên trái. Thẻ đầu tiên chứa loại cây, nội dung mô tả và một số thẻ danh mục, còn các thẻ còn lại mô tả hướng dẫn chăm sóc cây. Loại cây là một vai trò cần nhấn mạnh, vì vậy, hãy sử dụng kiểu "dòng tiêu đề". Đặt giá trị này thành nội dung chúng ta đã thiết lập làm tiêu đề trước đó. Thẻ chăm sóc cũng có tiêu đề, nhưng không được nhấn mạnh như thẻ thông tin. Vì vậy, hãy đặt thẻ chăm sóc thành "tiêu đề".
  2. Bạn có thể chỉ định thông tin chi tiết về cây và bản sao hướng dẫn thành "nội dung lớn", còn nhãn danh mục thành "nhãn lớn".
  3. Thử nghiệm nhiều vai trò khác nhau, đồng thời điều chỉnh các thành phần trên giao diện người dùng và tỷ lệ phông chữ để tìm ra sự cân bằng phù hợp.

f646755b99db0161.png

7. Triển khai trong mã

789408aab925944f.png

Việc triển khai phông chữ biến đổi trong mã bằng CSS cũng tương tự như bất kỳ phông chữ web nào sử dụng dịch vụ phân phối phông chữ để tải phông chữ và tuỳ chỉnh bằng các thuộc tính CSS.

Chúng ta sẽ sử dụng HTML và CSS cơ bản để triển khai, chứ không phải MWC hay bất kỳ khung nào.

Phông chữ biến đổi trên Google Fonts

Hãy sử dụng Google Fonts làm dịch vụ phân phối phông chữ để dễ dàng triển khai vô số phông chữ, bao gồm cả phông chữ biến thể, trên trang web của bạn!

Khám phá những phông chữ biến thể có sẵn bằng cách truy cập vào fonts.google.com. Trong phần tìm kiếm, hãy đánh dấu vào Chỉ hiển thị phông chữ biến thể để lọc. Phông chữ biến thể có một sân chơi ở gần cuối trang, nơi bạn có thể đặt thanh trượt cho từng trục có trong bộ phông chữ.

9ecb4721afd8faa2.png

Tạo kiểu bằng CSS

Không phải phông chữ nào cũng có cùng số lượng trục để tuỳ chỉnh. Hiện tại, Độ đậm, Chiều rộng, Độ nghiêng, In nghiêng và Kích thước quang học là các thuộc tính phổ biến nhất.

Bạn có thể đặt các thuộc tính này bằng các thuộc tính phông chữ CSS cơ bản đã tồn tại trước phông chữ biến. Mặc dù mọi thứ chưa được hỗ trợ rộng rãi (kể từ tháng 5 năm 2022), nhưng bạn có thể thiết lập tất cả trục một cách đáng tin cậy bằng cách sử dụng thuộc tính mới font-variation-settings.

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

*Slant (slnt) và Italic (ital) trong font-style không đáng tin cậy.

8. Nhập bằng API Google Fonts

Chúng ta chỉ sử dụng phông chữ Roboto, nhưng hãy xem tất cả phông chữ hiện có trên fonts.google.com.

Chúng ta sẽ sử dụng Roboto cho phần còn lại của lớp học lập trình và tuỳ chỉnh kiểu chữ trong các thẻ sau dựa trên bài tập trước.

  1. Sao chép mã này chứa giao diện người dùng mẫu thẻ vào IDE web mà bạn chọn.
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. Ghi lại thông số kỹ thuật về kiểu mà chúng ta đã đặt trong bài tập trước cho headline (dòng tiêu đề), title (tiêu đề), body (nội dung) và label (nhãn). Với những điều đó, hãy chuyển đến trang Roboto Flex. Đặt thanh trượt cho phù hợp với thông số kỹ thuật mà bạn đặt trong Figma, sau đó Chọn kiểu này cho từng thanh trượt để thêm vào ngăn bên.
  2. Trong ngăn, bên dưới các kiểu đã chọn, hãy tìm mục Sử dụng trên web. Có hai cách để thêm phông chữ vào mã: bằng <link> hoặc @import. Bạn chỉ cần một, hãy chọn @import.
  3. Sao chép từ @import đến dấu chấm phẩy rồi dán vào thẻ kiểu sau nhận xét nhập.
  4. Vì Roboto Flex là phông chữ duy nhất được sử dụng, hãy đặt phần thân để gọi font-family bằng cách thêm "các quy tắc CSS để chỉ định các bộ phông chữ" có trong mã nhập.
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Thao tác này sẽ nhập phông chữ và bộ kiểu đã chọn, nhưng việc sử dụng Dải trục cho phép bạn sử dụng dải kiểu liên tục thay vì các kiểu riêng lẻ. Để tạo một dải ô, hãy nối hai giá trị bằng dấu .. (ví dụ: 100..900). Hãy đảm bảo rằng bạn chỉ thêm các dải ô có trong thanh trượt của phông chữ, nếu không phông chữ sẽ không tải đúng cách.

Bạn nên sử dụng phương thức này để chuyển đổi ảnh động mượt mà và thử nghiệm trong trình duyệt, vì phương thức này tải trong toàn bộ phạm vi và làm cho yêu cầu tải xuống lớn hơn.

9. Thuộc tính phông chữ biến đổi CSS

Sau khi nhập phông chữ, hãy quay lại Figma để lấy một số thuộc tính CSS để tạo kiểu và xem thuộc tính CSS font-variation-settings.

  1. Bắt đầu với h1 của dòng tiêu đề được chọn trong bảng điều khiển bên phải, hãy chọn thẻ Kiểm tra ở trên cùng. Thao tác này sẽ chuyển bảng điều khiển sang chế độ kiểm tra mã để chuyển giao cho nhà phát triển. Mã là phần cuối cùng.
  2. Thay đổi trình đơn thả xuống định dạng thành CSS nếu bạn chưa thực hiện. Các thuộc tính tiêu chuẩn (nếu được sử dụng) sẽ được liệt kê (font-weight, font-stretch, font-style, font-optical-sizing), theo sau là font-variation-settings cấp thấp chứa các trục tuỳ chỉnh chưa đăng ký. Trước tiên, hãy sử dụng các thuộc tính chuẩn trước khi chuyển sang font-variation-settings.

Figma sử dụng font-variation-settings cho chiều rộng (wdth) thay vì font-stretch.

62fbb715711beb75.png

  1. Sao chép mã CSS liên quan đến loại để tạo kiểu cho bộ chọn h1.
h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. Bạn có thể sao chép kiểu của tiêu đề thẻ chăm sóc vào h2. Làm tương tự với nội dung chính, sao chép vào p. Bạn có thể sao chép kiểu nhãn vào .label

73252104c94e2053.png

10. Xin chúc mừng

62930ad88ed65971.png

Bạn đã làm rất tốt khi sử dụng phông chữ có thể thay đổi, tìm hiểu cách sử dụng phông chữ này trong thiết kế và triển khai phông chữ này cho web.

Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.

Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign