Kiểu chữ

Nếu bạn không chỉ định kiểu nào cho văn bản, trình duyệt sẽ áp dụng kiểu mặc định của riêng trình duyệt. Đây được gọi là Trang kiểu của 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 để 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ó tính thích ứng theo mặc định – văn bản sẽ tự động điều chỉnh để vừa với khung nhìn của người dùng.

Tuy nhiên, việc văn bản vừa với màn hình không có nghĩa là văn bản đó dễ đọc. Kiểu chữ đẹp là kiểu chữ trình bày văn bản của bạn theo cách phù hợp. Có nhiều yếu tố liên quan đến kiểu chữ hơn là 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ữ

Rất khó để biết cỡ chữ trên web nên là bao nhiêu.

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

Nhưng khi màn hình ngày càng lớn, việc kết nối đó sẽ khó khăn hơn. Màn hình có kích thước máy tính xách tay có thể ở khá gần người xem, nhưng màn hình máy tính để bàn màn hình rộng có kích thước gần giố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 ngồi xa TV hơn nhiều.

Tuy nhiên, mặc dù không thể biết chính xác khoảng cách của người dùng với 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 kích thước văn bản nhỏ hơn cho màn hình nhỏ và kích thước văn bản lớn hơn cho màn hình lớn.

Bạn có thể sử dụng truy vấn nội dung đa phương tiệ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á giật. Một phương pháp thích ứng hơn là cho phép 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 kích thước phông chữ với chiều rộng của khung nhìn 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 sẽ là bao nhiêu ở một chiều rộng cụ thể bất kỳ, 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 sử dụng riêng vw trong phần 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. Bạn có thể đổi kích thước văn bản nếu 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 hoàn hảo cho việc này.

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

Để trình duyệt thực hiện phép tính. Đ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 sẽ là bao nhiêu ở 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ẽ tính toán chính xác kích thước văn bản.

Nhưng giờ đây, 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.

Clamping text

Có thể bạn không muốn văn bản của mình thu nhỏ và tăng lên mức cực đại. 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() CSS. Thao tác này sẽ "giới hạn" tỷ lệ theo một phạm vi cụ thể.

Hàm clamp() giống như hàm calc() nhưng có 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 thấp 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 theo tỷ lệ 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 đường kẻ

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

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

Mọi thứ từ 45 đến 75 ký tự đều được coi là độ dài dòng thoả đáng cho một trang một cột được đặt trong một phông chữ có chân chữ ở một kích thước văn bản. Dòng có 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 nhiều cột, trung bình tốt hơn là 40 đến 50 ký tự.

Bạn không thể thiết lập chiều 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 bị 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 hoàn hảo cho việc này.

Đừng đặt độ dài dòng bằng đơn vị cố định như px. Người dùng có thể tăng và giảm cỡ chữ, đồng thời chiều dài dòng 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 đơn vị ch cho chiều rộng sẽ khiến các dòng mới gói ở 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. Tuy nhiên, 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 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 phần khai báo line-height. Điều này đảm bảo chiều cao dòng tương ứng với font-size.

line-height: 24px;

line-height: 1.5;

Cách kết hợp và điều chỉnh theo tỷ lệ

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

Phông chữ web

Kiểu chữ giống như giọng nói cho từ ngữ của bạn. Trong thời gian dài trên web, có rất ít lựa chọn 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 phông chữ web phù hợp với cảm nhận về 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ữ web. Hãy dùng woff2 làm định dạng phông chữ trên web của bạn. API 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ữ web mà bạn thêm đều có thể làm giảm trải nghiệm người dùng do làm tăng thời gian tải trang. Hãy nhớ rằng thiết kế không chỉ là hình ảnh pixel cuối cùng. Tốc độ vẽ 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 chóng là trải nghiệm tốt cho người dùng.

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 càng sớm càng tốt. Thêm phần tử link vào head của tài liệu tham chiếu đến tệp phông chữ 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ị là 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 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 tự lưu trữ các tệp phông chữ.

Sử dụng thuộc tính font-display của CSS để 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 cho đến khi phông chữ 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ữ web sau khi phông chữ này tải xong. Cả hai chiến lược đều có những điểm hạn chế. Nếu bạn đợi cho đến khi phông chữ web được tải xuống trước khi 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 đến 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ữ web, người dùng có thể thấy nội dung trên trang bị dịch chuyển một cách khó chịu.

Bạn nên đợi một chút trước khi hiển thị bất kỳ văn bản nào. Nếu phông chữ web tải trước khi hết thời gian đó, văn bản sẽ hiển thị bằng phông chữ web mà không có sự dịch chuyển nội dung. Nếu phông chữ web vẫn chưa tải 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 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 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 sử dụng 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 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 cho ảnh thông thường, in đậm, in đậm, v.v., tệp phông chữ biến sẽ có tính thích ứng. Tệp này chứa tất cả thông tin cần thiết để hiển thị trên nhiều kiểu chữ hoặc độ đậm.

Điều này có nghĩa là một tệp phông chữ biến thiên 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 thiên 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, phông chữ biến thiên có thể giúp bạn tăng hiệu suất đáng kể.

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 phải tuân theo 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 thiết kế đó theo cách nào.

Giờ đây, khi 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

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