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

1. Giới thiệu

Cập nhật lần gần đây nhất: 11/05/22

Tận dụng khả năng thay đổi linh hoạt trong giao diện người dùng bằng phông chữ biến đổi. Phông chữ này sẽ giúp bố cục, giao diện và khả năng tiếp cận trở nên linh hoạt hơn, đồng thời giúp ứng dụng của bạn chạy nhanh hơn!

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

Định nghĩa về phông chữ biến đổi.
Cách tuỳ chỉnh kiểu chữ bằng phông chữ biến đổi.
Cách áp dụng phông chữ biến đổi vào thiết kế.
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ệ kiểu 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ó

Tài khoản Figma
Tệp designlab Figma
Trình soạn thảo mã mà bạn chọn cho web

2. Bắt đầu

Thiết lập

Để bắt đầu, bạn cần truy cập vào tệp Designlab Figma. 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

Đến tệp Migrating to Variable fonts hoặc tìm kiếm từ khoá "Migrating to Variable fonts" 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 vào tệp của bạn.

Bố cục tệp

Khi xem qua tệp, hãy lưu ý 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 để 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ản vẽ Intro (Giới thiệu), trong đây có các nút liên kết các bản 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.

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

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

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

Phông chữ biến đổi là một định dạng phông chữ mới mang tính đột phá, cho phép người dùng kiểm soát kiểu chữ và biểu tượng. Roboto Serif và Roboto Flex là các kiểu chữ mới được tạo ra cho công nghệ phông chữ biến đổi, mỗi kiểu chữ có nhiều trục.

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ũ được đặt cứng, chẳng hạn như kiểu thông thường, kiểu đậm, kiểu nghiêng, v.v. Các biến trong phông chữ biến đổi được kiểm soát bằng trục hoặc thực thể. Nếu nhà thiết kế kiểu chữ chọn, thì mọi biến trong thiết kế kiểu chữ đều có thể được chỉ định cho một trục do người dùng kiểm soát. Các trục phổ biến bao gồm trục nghiêng, kích thước quang học, độ nghiêng, độ đậm, chiều rộng. Năm trục này là các trục đã đăng ký trong CSS.

Lợi ích

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

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) mà chúng ta có và hiệu ứng của chúng. Chọn kiểu ở bên phải và mở cửa sổ Kiểu chi tiết (biểu tượng khác) để mở thanh trượt trục, rồi xem qua từng tham số.

Độ đậm xác định độ dày của một chữ cái. Độ đậm cung cấp một phạm vi đầy đủ và liên tục về độ dày nét.

Chiều rộng là kết quả của việc các ký tự của kiểu chữ chiếm bao nhiêu không gian theo chiều ngang.

Điều chỉnh kiểu từ thẳng đứng sang nghiêng, còn được các nhà thiết kế kiểu chữ gọi là kiểu "nghiêng". Mặc dù hiếm gặp, nhưng Độ nghiêng có thể hoạt động theo hướng khác, được gọi là kiểu "nghiêng ngược" hoặc "nghiêng ngược".

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

Kích thước quang học. Điều chỉnh kiểu cho 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/khoảng cách giữa các chữ cái rộng và nét dày hơn với ít chi tiết hơn. Ở kích thước lớn hơn, các 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 thức chi tiết hơn, cũng như độ đậm và chiều rộng cực đoan hơn.

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

5. Tăng dần kiểu

Nếu làm việc với 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 về các ràng buộc kiểu chữ. Việc sử dụng phông chữ biến đổi không có nghĩa là 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ệ kiểu chữ (đối với các trường hợp sử dụng như tăng độ đậm trên nền tối) trong một tệp.

Mặc dù 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 rút gọn của tỷ lệ kiểu chữ mặc định của Material.

Hãy bắt đầu tuỳ chỉnh tỷ lệ kiểu chữ bằng bản sao nội dung. Điều này cho phép chúng ta đặt kích thước kiểu chữ cơ sở của trang web trước tiên và điều chỉnh bằng mắt từ đó. Giá trị mặc định cho Body Large là 18pt, được chọn và đặt thành Roboto Flex. Việc điều chỉnh để dễ đọc hơn thường có nghĩa là cập nhật cỡ chữ và độ đậm của phông chữ, 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à độ đậm.
Tiếp tục với Nhãn. Nhãn có tính thực dụng hơn và được sử dụng trong các ngữ cảnh ngắn hơn, nhỏ hơn, chẳng hạn như nút. Điều chỉnh cấp độ bằng mắt để nhãn xuất hiện chính xác trên vùng chứa nút và chip.
Tiếp tục tinh chỉnh bằng Tiêu đề, Dòng tiêu đề và Hiển thị. Cả ba đều được dùng cho văn bản ngắn hơn, có độ nhấn mạnh từ trung bình đến cao, chẳng hạn như tiêu đề trang và phần. Dòng tiêu đề và Hiển thị có thể biểu thị hiệu quả hơn nhờ kích thước và độ nhấn mạnh cao. Bạn có thể thoải mái dùng thử tất cả các trục tại đây!
Khi kiểu được chọn, hãy nhấp vào 4 dấu chấm và thêm (+) để đặt kiểu văn bản, đảm bảo các chế độ cài đặt kiểu có thể tái sử dụng nhất quán.

Bạn có thể tạo tỷ lệ kiểu mặc định của Material 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ộ công cụ 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ệ này cho các phần tử 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ữ biến đổi để tăng tính biểu thị và khả năng dễ đọc. Nếu bạn thiết lập kiểu Figma trong bài tập cuối cùng, thì bạn có thể áp dụng các kiểu đó, sau đó cập nhật các trục của kiểu.

Hãy xem các phần tử 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, trong khi các thẻ còn lại mô tả hướng dẫn chăm sóc cây. Loại cây có vai trò nhấn mạnh cao, vì vậy, hãy sử dụng kiểu "dòng tiêu đề". Đặt kiểu này thành kiểu mà chúng ta đã thiết lập trước đó làm dòng tiêu đề. Các thẻ chăm sóc cũng có tiêu đề, nhưng không có cùng độ nhấn mạnh, vì vậy, hãy đặt các thẻ này thành "tiêu đề".
Bạn có thể chỉ định bản sao hướng dẫn và thông tin chi tiết về cây cho "body large" (nội dung lớn), trong khi nhãn danh mục cho "label large" (nhãn lớn).
Thử nghiệm nhiều vai trò và điều chỉnh các phần tử giao diện người dùng và tỷ lệ kiểu chữ để tìm ra sự cân bằng phù hợp.

7. Triển khai trong mã

Việc triển khai phông chữ biến đổi trong mã bằng CSS là một phương thức 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 chế độ HTML cơ bản và CSS để triển khai, chứ không phải MWC hoặc bất kỳ khung nào.

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

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 đổi, trên trang web của bạn!

Khám phá những phông chữ biến đổi có sẵn bằng cách chuyển đến fonts.google.com. Trong phần tìm kiếm, hãy đánh dấu vào ô Show only variable fonts (Chỉ hiển thị phông chữ biến đổi) để lọc. Phông chữ biến đổi bao gồm 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ữ.

Kiểu bằng CSS

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

Bạn có thể đặt các trục 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 đổi. Mặc dù mọi thứ chưa được hỗ trợ rộng rãi (tính đến tháng 5 năm 2022), nhưng bạn có thể đặt tất cả các trục một cách đáng tin cậy bằ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`

*Độ nghiêng (slnt) và Kiểu nghiêng (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 Roboto, nhưng hãy xem tất cả cá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.

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>

Ghi lại thông số kỹ thuật về kiểu mà chúng ta đã đặt trong bài tập cuối cùng cho dòng tiêu đề, tiêu đề, nội dung và nhãn. Hãy nhớ những thông số kỹ thuật đó, chuyển đến trang cho Roboto Flex. Đặt thanh trượt cho khớp với thông số kỹ thuật mà bạn đã đặt trong Figma, sau đó Select this style (Chọn kiểu này) cho từng kiểu để thêm vào ngăn kéo bên.
Trong ngăn kéo, trong các kiểu đã chọn, hãy tìm mục Use on the Web (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 cách, hãy chọn @import.
Sao chép từ @import đến dấu chấm phẩy và dán vào trong thẻ kiểu sau nhận xét nhập.
Vì Roboto Flex là phông chữ duy nhất được sử dụng, hãy đặt nội dung để gọi bộ phông chữ bằng cách thêm "CSS rules to specify families" (Quy tắc CSS để chỉ định 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à kiểu đã chọn, nhưng việc sử dụng phạm vi Trục cho phép bạn sử dụng phạm vi kiểu liên tục thay vì các kiểu riêng lẻ. Để tạo phạm vi, hãy nối hai giá trị bằng .. (ví dụ: 100..900). Đảm bảo rằng bạn chỉ thêm các phạm vi tồn tại trong thanh trượt của phông chữ, nếu không, phông chữ sẽ không tải đúng cách.

Cách này phù hợp nhất để chuyển đổi ảnh động mượt mà và thử nghiệm trong trình duyệt, vì cách này tải 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 để kéo một số thuộc tính CSS để tạo kiểu và xem thuộc tính CSS font-variation-settings.

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ẻ Inspect (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.
Nếu bạn chưa thực hiện, hãy thay đổi trình đơn thả xuống thành CSS. Các thuộc tính chuẩn (nếu được sử dụng) được liệt kê (font-weight, font-stretch, font-style, font-optical-sizing), tiếp theo là font-variation-settings cấp thấp chứa các trục tuỳ chỉnh không được đăng ký. Sử dụng các thuộc tính chuẩn trước, sau đó chuyển sang font-variation-settings.

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

Sao chép mã CSS này liên quan đến kiểu chữ để tạo kiểu cho bộ chọn h1.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

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ự đối với bản sao nội dung, sao chép vào p. Bạn có thể sao chép kiểu nhãn vào .label

10. Xin chúc mừng

Bạn đã làm rất tốt khi tận dụng phông chữ biến đổ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