Nếu bạn không chỉ định kiểu nào cho văn bản của mình, thì trình duyệt sẽ áp dụng kiểu mặc định riê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ể thiết lập các lựa chọn ưu tiên về việc 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, theo mặc định, văn bản trên web sẽ phản hồi để phù hợp với khung nhìn 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à sẽ đọc thoải mái. 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 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 xem xét sở thích 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 nên đặt kích thước văn bản trên web.
Nếu ai đó đang sử dụng màn hình nhỏ, thì có thể tin rằng màn hình sẽ khá gần với mắt, cách một bàn tay.
Nhưng khi màn hình ngày càng lớn hơn, sẽ khó tạo ra kết nối đó hơn. Màn hình 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ó 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 lại ngồi xa TV hơn nhiều.
Tuy nhiên, mặc dù bạn không thể biết chắc chắn một người đang cách màn hình bao xa, bạn có thể thử sử dụng kích thước văn bản với hy vọng là phù hợp. Sử dụng kích thước văn bản nhỏ hơn cho màn hình nhỏ hơn và kích thước văn bản lớn hơn cho màn hình lớn hơn.
Bạn có thể sử dụng truy vấn đa phương tiện để thay đổi thuộc tính font-size khi kích thước màn hình trở nên 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%;
}
}
Chuyển 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á linh hoạ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 tác độ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". 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 lên và thu nhỏ tương ứng 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.
Quan trọng là bạn không được sử dụng chính 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 đổi kích thước được văn bản. Văn bản này có thể đổi kích thước nếu bạn kết hợp trong một đơn vị tương đối – như em, rem hoặc ch. Hàm CSS calc() là lựa chọn hoàn hảo cho việc này.
html {
font-size: calc(0.75rem + 1.5vw);
}
Hãy để trình duyệt thực hiện 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 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ẽ đảm nhận việc 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.
Ghim văn bản
Có thể bạn không muốn văn bản của mình bị thu nhỏ và phát triển quá mức. Bạn có thể kiểm soát nơi bắt đầu và kết thúc việc điều chỉnh tỷ lệ bằng cách sử dụng hàm clamp() CSS. Điều này sẽ "kẹp" tỷ lệ theo tỷ lệ trong 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 đến 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 mong muố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 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 lớn hơn 2rem.
Độ dài của đường kẻ
Web không phải là báo in nhưng chúng ta có thể học được bài học từ thế giới báo in 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 sắp chữ, Robert Bringhurst đã nói về độ dài dòng (hay đo lường):
Bất cứ giá trị nào từ 45 đến 75 ký tự được coi là độ dài dòng vừa ý cho trang một cột, sử dụng kiểu văn bản serif ở cỡ chữ. Dòng 66 ký tự (đếm cả chữ cái và khoảng trắng) được coi là lý tưởng. Đối với nhiều tác vụ cột, giá trị trung bình tốt hơn nên chứa 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 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 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 hoặc giảm cỡ chữ cũng như điều chỉnh độ dài dòng tương ứng. 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ì 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 đơn vị cho phần 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à quy mô
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 để tăng cường tính rõ ràng và luồng trang. Một cách hiệu quả để làm việc này là sử dụng tỷ lệ kiểu chữ được tích hợp sẵn trong 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 của lời nói. Trong thời gian dài nhất 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ữ trên web phù hợp với nội dung của mình.
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. Bạn có thể dùng woff2 làm định dạng phông chữ trên web. được hỗ trợ tốt và mang lại hiệu suất tốt 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 trong trải nghiệm người dùng. Một 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 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 nào. 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 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 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 chuyển sang phông chữ trên web khi phông chữ tải xong. Cả hai chiến lược đều có những 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 trước khi hiển thị bất kỳ văn bản nào, người dùng có thể thấy mình nhìn chằm chằm vào một trang trống trong một thời gian dài phiền toái. 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ể thấy nội dung trên trang thay đổi gây 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ữ trên web tải trước thời gian đó, thì văn bản sẽ hiển thị bằng phông chữ trên web mà không thay đổi nội dung. Nếu phông chữ trên web vẫn chưa tải sau khi hết thời gian, 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.
Hãy sử dụng giá trị font-display 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 fallback nếu bạn muốn sử dụng phông chữ của hệ thống sau khi văn bản hiển thị.
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 chữ khác nhau cho 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ột tệp phông chữ riêng biệt cho mỗi kiểu chữ hoặc độ đậm.
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. Bảng này chứa tất cả thông tin cần thiết để hiển thị trên nhiều trọng số hoặc kiểu.
Điều này có nghĩa là một tệp phông chữ biến duy nhất 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 duy nhất 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, thì phông chữ thay đổi có thể mang lại hiệu suất đáng kể.
Kiểu chữ hiệu quả trên web không chỉ liên quan đến cách bạn lựa chọn kiểu chữ trong vai trò nhà thiết kế. Kiểu chữ thích ứng cũng nhằm 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à thiết kế mang lại cảm giác phù hợp bất kể mọi người xem thiết kế như thế 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 kiến thức
Kiểm tra kiến thức về kiểu chữ
Bạn phải thêm kiểu cho văn bản để gói trong khung nhìn.
clamp() rất hữu ích cho kiểu chữ linh hoạt vì
calc()clamp() cho kiểu chữ.clamp() cho kiểu chữ.Loại giá trị line-height nào được đề xuất trong hướng dẫn này?
24pxline-height.2rem1.52vwline-height sẽ gặp sự cố.font-display có chức năng gì?
block hoặc inline-block.