Kiểu chữ

Nếu bạn không chỉ định bất kỳ kiểu nào cho văn bản của mình, trình duyệt sẽ áp dụng kiểu mặc định của riêng chúng. Những biểu mẫu này được gọi là biểu định kiểu Tác nhân người dùng và có thể khác nhau tuỳ theo trình duyệt. Người dùng cũng có thể thiết lập các lựa chọn ưu tiên của riêng họ để hiển thị văn bản.

Nếu bạn không chỉ định độ dài dòng, trình duyệt sẽ xuống các dòng văn bản ở cạnh màn hình. Vì vậy, theo mặc định, văn bản trên web có tính đáp ứng — văn bản tự xuống dòng vừa với khung nhìn của người dùng.

Tuy nhiên, không có nghĩa là văn bản vừa vặn trên màn hình không có nghĩa là văn bản sẽ dễ đọc. Kiểu chữ tốt là việc trình bày văn bản của bạn theo cách phù hợp. Có nhiều kiểu chữ khác với việc chọn phông chữ phù hợp để dùng. Bạn cần xem xét lựa chọn ưu tiên của người dùng, kích thước của văn bản, độ dài dòng và khoảng cách giữa các dòng văn bản.

Kích thước văn bản

Thật khó để biết nên chọn cỡ chữ nào trên web.

Nếu ai đó đang sử dụng màn hình nhỏ, thì cách an toàn là màn hình của họ sẽ rất gần mắt — một khoảng cách bằng một bàn tay.

Tuy nhiên, khi màn hình ngày càng lớn hơn, việc tạo kết nối đó sẽ khó khăn hơn. Màn hình có kích thước bằng máy tính xách tay có thể sẽ khá gần người xem, nhưng màn hình máy tính để bàn rộng thì có kích thước bằng với màn hình tivi. Mọi người ngồi cách màn hình máy tính để bàn một cánh tay nhưng họ ngồi cách xa TV hơn rất nhiều.

Tuy nhiên, mặc dù không thể biết chắc khoảng cách của người dùng đối với màn hình, nhưng bạn có thể thử sử dụng kích thước văn bản sao cho phù hợp. Sử dụng cỡ chữ nhỏ hơn cho màn hình nhỏ và cỡ chữ lớn cho màn hình lớn.

Bạn có thể sử dụng các truy vấn nội dung nghe nhìn để thay đổi thuộc tính font-size khi kích thước màn hình rộng hơn.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Điều chỉnh tỷ lệ văn bản

Việc chuyển đổi giữa các kích thước văn bản cố định tại các điểm ngắt cụ thể khá nhanh. Một phương pháp thích ứng hơn là để chiều rộng thiết bị của người dùng tác động đến kích thước văn bản.

Đơn vị vw trong CSS có nghĩa là "chiều rộng khung nhìn". Khi kết nối kích thước phông chữ với chiều rộng của khung nhìn, thì văn bản sẽ mở rộng và thu nhỏ theo tỷ lệ chiều rộng của trình duyệt. Điều này gây khó khăn cho việc dự đoán kích thước văn bản ở bất kỳ chiều rộng cụ thể nào, nhưng bạn biết rằng kích thước văn bản sẽ phù hợp với chiều rộng trình duyệt của người dùng.

Quan trọng là bạn không được sử dụng riêng vw trong phần khai báo kích thước phông chữ.

html {
  font-size: 2.5vw;
}

Nếu bạn làm như vậy, người dùng sẽ không thể đổi kích thước văn bản. Bạn có thể đổi kích thước văn bản nếu kết hợp văn bản đó trong một đơn vị tương đối, chẳng hạn như em, rem hoặc ch. Hàm calc() của CSS là lựa chọn hoàn hảo trong trường hợp này.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Hãy để trình duyệt làm phép toán. Điều này gây khó khăn cho việc dự đoán chính xác kích thước văn bản ở bất kỳ chiều rộng cụ thể nào, nhưng bạn biết rằng kích thước văn bản sẽ nằm trong phạm vi phù hợp. Trình duyệt của người dùng sẽ giúp xác định các phép tính chính xác kích thước văn bản.

Tuy nhiên, hiện có khả năng văn bản sẽ quá nhỏ trên màn hình hẹp và quá lớn trên màn hình rộng.

Kẹp văn bản

Chắc hẳn bạn sẽ không muốn văn bản của mình thu nhỏ và mở rộng quá mức. Bạn có thể kiểm soát vị trí bắt đầu và kết thúc việc điều chỉnh theo tỷ lệ bằng cách sử dụng hàm clamp() của CSS. Thao tác này sẽ "kẹp" tỷ lệ đến một phạm vi cụ thể.

Hàm clamp() giống như hàm calc() nhưng nhận 3 giá trị. Giá trị ở giữa giống với giá trị bạn truyền vào calc(). Giá trị mở chỉ định kích thước tối thiểu, trong trường hợp này là 1rem để không nhỏ hơn kích thước phông chữ mà người dùng ưu tiên. Giá trị đóng chỉ định kích thước tối đa.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Giờ đây, kích thước văn bản sẽ thu nhỏ và tăng kích thước tương ứng với màn hình của người dùng, nhưng kích thước văn bản sẽ không bao giờ thấp hơn 1rem hoặc cao hơn 2rem.

Chiều dài dòng

Web không phải là bản in nhưng chúng ta có thể học hỏi từ thế giới in ấn và áp dụng chúng trên web.

Trong cuốn sách kinh điển Các yếu tố của phong cách phông chữ, Robert Bringhurst đã nói như sau về độ dài dòng (hoặc số đo):

Bất kỳ giá trị nào từ 45 đến 75 ký tự đều được coi là đủ độ dài dòng vừa ý đối với nhóm trang có một cột theo kích thước văn bản có chữ serif. Dòng này gồm 66 ký tự (bao gồm cả chữ cái và dấu cách) được xem là lý tưởng. Đối với công việc có nhiều cột, trung bình tốt hơn là từ 40 đến 50 ký tự.

Bạn không thể đặt độ dài dòng trực tiếp trong CSS. Không có thuộc tính line-length nào. Tuy nhiên, bạn có thể ngăn văn bản quá rộng bằng cách giới hạn độ rộng của vùng chứa. Thuộc tính max-inline-size là lựa chọn hoàn hảo trong trường hợp này.

Đừng đặt độ dài dòng bằng một đơn vị cố định như px. Người dùng có thể điều chỉnh kích thước phông chữ lên và xuống, đồng thời độ dài dòng của bạn sẽ điều chỉnh tương ứng. Hãy sử dụng một đơn vị tương đối như rem hoặc ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

Khi sử dụng đơn vị ch cho chiều rộng, các dòng mới sẽ bị ngắt dòng ở ký tự thứ 66 ở cỡ chữ đó.

Khoảng cách giữa các dòng

Mặc dù không có thuộc tính line-length trong CSS, nhưng có một thuộc tính line-height.

Các dòng văn bản ngắn hơn có thể có giá trị line-height lớn hơn. Tuy nhiên, nếu bạn dùng giá trị line-height lớn cho các dòng văn bản dài, người đọc sẽ khó có thể di chuyển từ cuối một dòng sang đầu dòng tiếp theo.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Sử dụng giá trị không đơn vị cho nội dung khai báo line-height của bạn. Điều này đảm bảo rằng chiều cao dòng tương ứng với font-size.

line-height: 24px;

line-height: 1.5;

Tổ hợp và quy mô

Hãy nhớ ưu tiên hệ thống phân cấp trong quá trình xây dựng giao diện người dùng để đảm bảo sự rõ ràng và luồng của trang. Một cách rất hiệu quả để làm việc này là sử dụng tỷ lệ kiểu chữ có sẵn trong hệ thống thiết kế của bạn.

Phông chữ trên web

Phông chữ giống như giọng nói của từ ngữ. Trong thời gian dài nhất trên web, có rất ít tùy chọn phông chữ. Phông chữ hệ thống là tuỳ chọn duy nhất. Giờ đây, bạn có thể chọn phông chữ trên web phù hợp với nội dung của mình.

Sử dụng @font-face để cho trình duyệt biết nơi tìm tệp phông chữ trên web. Sử dụng woff2 làm định dạng phông chữ trên web. Chiến lược này được hỗ trợ hiệu quả và mang lại hiệu suất cao nhất.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Tuy nhiên, mỗi tệp phông chữ trên web mà bạn thêm vào có thể làm giảm trải nghiệm người dùng vì tệp này làm tăng thời gian tải trang. Hãy nhớ rằng thiết kế không chỉ là giao diện của các pixel cuối cùng. Tốc độ vẽ các pixel đó là một phần quan trọng đối với trải nghiệm người dùng. Một trải nghiệm mang lại cảm giác nhanh chóng là một trải nghiệm tốt cho người dùng.

Đang tải phông chữ

Bạn có thể yêu cầu các trình duyệt bắt đầu tải tệp phông chữ xuống càng sớm càng tốt. Thêm một phần tử link vào head của tài liệu tham chiếu đến tệp phông chữ trên web. Thuộc tính rel có giá trị preload sẽ yêu cầu trình duyệt ưu tiên tệp đó. Thuộc tính as có giá trị font cho trình duyệt biết đây là loại tệp gì. Thuộc tính type cho phép bạn cung cấp thông tin cụ thể hơn nữa.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

Bạn cần thêm thuộc tính crossorigin ngay cả khi bạn đang tự lưu trữ các tệp phông chữ.

Sử dụng thuộc tính CSS font-display để cho trình duyệt biết cách quản lý việc chuyển đổi từ phông chữ hệ thống sang phông chữ web. Bạn có thể chọn không hiển thị văn bản nào cho đến khi phông chữ trên web được tải. Bạn có thể chọn hiển thị phông chữ hệ thống ngay lập tức rồi sau đó chuyển sang phông chữ trên web khi tải xong. Cả hai chiến lược đều có nhược điểm riêng. Nếu bạn đợi cho đến khi phông chữ trên web được tải xuống rồi mới hiển thị văn bản, người dùng có thể phải nhìn chằm chằm vào một trang trống trong một thời gian dài một cách khó chịu. Nếu bạn hiển thị văn bản bằng phông chữ hệ thống trước rồi mới chuyển sang phông chữ web, người dùng có thể gặp phải hiện tượng dịch chuyển nội dung trên trang gây khó chịu.

Một giải pháp hay là đợi một thời gian ngắn trước khi hiển thị bất kỳ văn bản nào. Nếu phông chữ trên web tải trước thời điểm đó, thì văn bản sẽ hiển thị bằng phông chữ trên web mà không có thay đổi về nội dung. Nếu phông chữ trên web vẫn chưa tải sau khi hết giờ, thì văn bản sẽ hiển thị bằng phông chữ hệ thống để ít nhất người dùng có thể đọc được nội dung.

Sử dụng giá trị font-display là swap nếu bạn vẫn muốn phông chữ web thay thế phông chữ hệ thống bất cứ khi nào phông chữ web được tải.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Sử dụng giá trị font-display là fallback nếu bạn muốn sử dụng phông chữ hệ thống sau khi hiển thị văn bản.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Phông chữ biến đổi

Nếu sử dụng nhiều độ đậm hoặc kiểu chữ khác nhau của cùng một kiểu chữ, bạn có thể sẽ phải dùng nhiều tệp phông chữ riêng biệt – một tệp phông chữ riêng biệt cho mỗi độ đậm hoặc kiểu.

Phông chữ thay đổi giải quyết vấn đề này bằng cách sử dụng một tệp. Thay vì có các tệp riêng biệt như thường, in đậm, đậm nét hơn, v.v., tệp phông chữ thay đổi sẽ có tính thích ứng. Đối tượng này chứa tất cả thông tin cần thiết để hiển thị trên một loạt trọng số hoặc kiểu.

Tức là một tệp phông chữ biến đổi sẽ lớn hơn một tệp phông chữ thông thường, nhưng một tệp phông chữ biến đổi có thể sẽ nhỏ hơn nhiều tệp phông chữ thông thường. Nếu bạn đang sử dụng nhiều trọng số khác nhau, phông chữ thay đổi có thể giúp bạn đạt được hiệu suất lớn.

Kiểu chữ tốt trên web không chỉ là lựa chọn kiểu chữ của bạn với tư cách là một nhà thiết kế. Kiểu chữ thích ứng cũng thể hiện việc tôn trọng thiết bị và kết nối mạng của người dùng. Kết quả cuối cùng là một thiết kế phù hợp cho dù người dùng nhìn thấy như thế nào.

Bây giờ, bạn đã thành thạo văn bản thích ứng, đã đến lúc tìm hiểu kỹ hơn về hình ảnh thích ứng.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về kiểu chữ