Kiểu chữ

Nếu bạn không chỉ định kiểu nào cho văn bản, thì trình duyệt sẽ áp dụng kiểu mặc định của riêng chúng. Đâ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ể đặt lựa chọn ưu tiên của riêng mình về cách hiển thị văn bản.

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

Tuy nhiên, chỉ vì văn bản vừa với màn hình không có nghĩa là người dùng sẽ đọc thoải mái. Kiểu chữ phù hợp là cách trình bày văn bản một cách thích hợp. Kiểu chữ không chỉ là việc chọn phông chữ phù hợp để sử dụng. Bạn cần cân nhắc lựa chọn ưu tiên của người dùng, kích thước văn bản, độ dài dòng và khoảng cách giữa các dòng văn bản.

Cỡ chữ

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

Nếu người dùng đang sử dụng màn hình nhỏ, thì có thể chắc chắn rằng màn hình sẽ khá gần mắt họ – cách một cánh tay.

Nhưng khi màn hình ngày càng lớn, việc tạo ra mối liên hệ đó 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 có màn hình rộng có kích thước tương đương với màn hình TV. Mọi người ngồi cách màn hình máy tính một cánh tay, nhưng họ ngồi cách xa TV hơn nhiều.

Tuy nhiên, mặc dù không thể biết chắc chắn khoảng cách từ người dùng đến màn hình, nhưng bạn có thể thử sử dụng kích thước văn bản phù hợp. Sử dụng cỡ chữ nhỏ hơn cho màn hình nhỏ và cỡ chữ lớn hơ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 tăng lê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%;
  }
}

Thay đổi cỡ chữ

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ể diễn ra khá đột ngột. Cách phản hồi hiệu quả hơn là để chiều rộng thiết bị của người dùng ảnh hưởng đến kích thước văn bản.

Đơn vị vw trong CSS là viết tắt của "chiều rộng khung nhìn". Việc kết nối cỡ chữ với chiều rộng của khung hiển thị có nghĩa là văn bản sẽ tăng và giảm theo tỷ lệ với 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 ở một chiều rộng cụ thể, 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.

Điều quan trọng là bạn không được chỉ sử dụng vw trong một khai báo cỡ 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. Văn bản sẽ có thể thay đổi kích thước nếu bạn kết hợp với 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 phù hợp cho trường hợp này.

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

Để trình duyệt tính 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 ở một chiều rộng cụ thể, 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ẽ đảm nhận việc tính toán kích thước văn bản chính xác.

Nhưng giờ đây, có thể 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

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

Hàm clamp() giống như hàm calc() nhưng lấy 3 giá trị. Giá trị ở giữa giống với giá trị mà bạn truyền đến calc(). Giá trị mở đầu chỉ định kích thước tối thiểu, trong trường hợp này là 1rem để không nhỏ hơn cỡ 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 lên 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ờ nhỏ hơn 1rem hoặc lớn 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 những bài học đó trên web.

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

Mọi thứ từ 45 đến 75 ký tự đều được coi là độ dài dòng phù hợp cho một trang có một cột được đặt trong một mặt văn bản có chân trong cỡ chữ. Dòng 66 ký tự (tính cả chữ cái và dấu cách) được coi là lý tưởng. Đối với công việc có nhiều cột, mức 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. Tuy nhiên, bạn có thể ngăn văn bản trở nên quá rộng bằng cách giới hạn chiều rộng của vùng chứa. Thuộc tính max-inline-size là lựa chọn phù hợp cho 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ể tăng và giảm cỡ chữ, đồng thời độ dài dòng của bạn sẽ điều chỉnh cho phù hợp. Sử dụng đơn vị tương đối như rem hoặc ch.

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

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

Việc sử dụng các đơn vị ch cho chiều rộng sẽ khiến các dòng mới xuống 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ó 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. Nhưng nếu bạn sử dụng các giá trị line-height lớn cho các dòng văn bản dài, thì mắt của người đọc sẽ khó di chuyển từ cuối dòng này 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 các giá trị không có đơn vị cho các khai báo line-height. Đ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;

Kết hợp và tỷ lệ

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

Phông chữ trên web

Kiểu chữ giống như giọng nói cho các từ ngữ của bạn. Trong thời gian dài nhất trên web, có rất ít lựa chọn về phông chữ. Phông chữ hệ thống là lựa chọn duy nhất. Nhưng giờ đây, bạn có thể chọn một phông chữ trên web phù hợp với cảm xúc mà nội dung của bạn mang lại.

Sử dụng @font-face để cho trình duyệt biết nơi tìm các tệp phông chữ trên web. Sử dụng woff2 làm định dạng phông chữ trên web. Nền tảng này được hỗ trợ tốt 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 đều có khả năng làm giảm trải nghiệm người dùng vì nó làm tăng thời gian tải trang. Hãy nhớ rằng thiết kế không chỉ là về giao diện của các điểm ảnh cuối cùng. Tốc độ hiển thị các pixel đó là một phần quan trọng trong trải nghiệm người dùng. Trải nghiệm nhanh là 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 trình duyệt bắt đầu tải tệp phông chữ xuống sớm nhất có thể. 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 cho biết trình duyệt cần ư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 nào. Thuộc tính type cho phép bạn chỉ định cụ thể hơn.

<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 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ý quá trình chuyển đổi từ phông chữ hệ thống sang phông chữ trên web. Bạn có thể chọn không hiển thị văn bản 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, sau đó chuyển sang phông chữ trên web khi phông chữ đó tải xong. Cả hai chiến lược này đều có nhược điểm. Nếu bạn đợi cho đến khi phông chữ web được tải xuống rồi mới hiển thị văn bản, thì người dùng có thể thấy mình đang nhìn chằm chằm vào một trang trống trong thời gian dài gây 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 chuyển sang phông chữ trên web, người dùng có thể gặp phải tình trạng nội dung trên trang bị dịch chuyển đột ngột.

Một giải pháp thoả hiệp tốt là đợi một lúc rồi mới hiển thị văn bản. Nếu phông chữ trên web tải trước khi hết thời gian đó, thì văn bản sẽ hiển thị bằng phông chữ trên web mà không có sự thay đổi nào về nội dung. Nếu phông chữ trên web vẫn chưa tải xong sau khi hết thời gian, 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ữ trên web thay thế phông chữ hệ thống bất cứ khi nào phông chữ trên web tải xong.

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

Sử dụng giá trị font-display là fallback nếu bạn muốn giữ nguyên phông chữ hệ thống sau khi văn bản được kết xuất.

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

Phông chữ biến đổi

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

Phông chữ có thể 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 cho kiểu chữ thường, in đậm, siêu đậm và các biến thể khác, tệp phông chữ có thể thay đổi sẽ có khả năng thích ứng. Phông chữ này chứa tất cả thông tin cần thiết để hiển thị trên nhiều mức độ đậm nhạt hoặc kiểu chữ.

Điều này có nghĩa 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 độ đậm khác nhau, thì phông chữ có thể thay đổi có thể giúp bạn cải thiện đáng kể hiệu suất.

Kiểu chữ đẹp trên web không chỉ là lựa chọn kiểu chữ mà bạn đưa ra với tư cách là nhà thiết kế. Kiểu chữ thích ứng cũng là về 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 bất kể người dùng xem ở chế độ nào.

Giờ đây, khi đã nắm vững quảng cáo văn bản thích ứng, bạn có thể tìm hiểu về hình ảnh thích ứng.

Kiểm tra kiến thức của bạn

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