Cách tạo typography đáp ứng bằng CSS

Kandy parfume

Bạn cần đảm bảo web hay ứng dụng trông tuyệt trên tất cả các kiểu màn hình? Đó là nơi cần tới Responsive Typography.

Lập trình CSS

Phát triển web với quá nhiều breakpoint có thể khiến bạn kiệt sức. Hiện có nhiều kỹ thuật mới để học trong CSS cho cả lập trình viên giàu kinh nghiệm hay đang ở trình độ trung cấp.

Nhưng làm thế nào để bắt đầu với responsive typography (kiểu chữ đáp ứng)? Dưới đây là hướng dẫn từng bước điều chỉnh trang web linh hoạt trên kích thước màn hình bất kỳ.

Tầm quan trọng của responsive typography

Typography đóng vai trò quan trọng trong phát triển và thiết kế web bởi nó đảm bảo khả năng đọc, tính khả dụng cũng như tính thẩm mỹ của toàn bộ trang. Mọi người đều muốn một web đáp ứng. Thật tuyệt nếu text hoặc font tự động điều chỉnh sang các kích thước màn hình khác nhau phải không? Ưu điểm của responsive typography trong phát triển web bao gồm:

Cải thiện tổng thể trải nghiệm người dùng trên các thiết bị hoặc kích thước màn hình khác nhau bằng cách đảm bảo khả năng đọc và tính rõ ràng.
Tăng khả năng truy cập bằng cách hỗ trợ người dùng khiếm thị hoặc bị khuyết tật khác. Nó hỗ trợ các cấu hình người dùng khác nhau, chẳng hạn như điều chỉnh kích thước font.
Typography nhất quán trên các thiết bị và độ phân giải giúp duy trì nhận diện thương hiệu và hình ảnh thống nhất.

Đây là mẫu code bạn có thể sao chép vào trình chỉnh sửa code trước khi bắt đầu, vì thế, bạn có thể làm theo những kỹ thuật được đưa ra ở bên dưới.

File code HTML

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Responsive Typography </title>
</head>
<body>
<div class="container">
<h1> Lorem ipsum </h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
</p>
</div>
</body>
</html>

File code CSS

/*style.css*/
body{
display: flex;
justify-content: center;
 align-items: center;
height: 100vh;
}
.container{
width: 400px;
background-color: antiquewhite;
padding: 15px;
box-shadow:0 2px 5px rgba(0,0,0, 0.1) ;
}
h1{
color: hotpink;
}

Giờ hãy cùng nhau khám phá một số phương thức và kỹ thuật hiệu quả để triển khai kiểu chữ đáp ứng bằng CSS.

Clamping

Đây là một kỹ thuật typography CSS cho phép và đảm bảo kích thước font của một phần tử nằm trong phạm vi nhất định. Hàm clam “Clamp()” nhận 3 tham số, giá trị nhỏ nhất, giá trị lý tưởng và giá trị cao nhất. Hàm clamp không hạn chế kiểu sắp chữ. Nó có thể được dùng cho ảnh, thẻ, video và phương tiện khác. Đây là cách nó hoạt động.

Clamp (min-value, ideal-value, max-value):

h1{
font-size: clamp(2rem, 5vw, 3rem);
}
p{
font-size: clamp(1rem, 3vw, 2rem);
}

Ở ví dụ này, kích thước font cho heading và đoạn được thiết lập bằng hàm “clamp()”. Đối với giá trị nhỏ nhất “h1” được đặt sang “2rem”, đảm bảo kích thước font sẽ không thấp hơn 2 lần font-size gốc. Giá trị lý tưởng hoặc ưu tiên được đặt là “5vw”, có nghĩa 5% của chiều rộng cổng xem làm nó đáp ứng với những kích thước màn hình khác nhau. Giá trị tối đa là “3 rem” đảm bảo font-size sẽ không lớn hơn 3 lần kích thước font gốc. Tạo kiểu đoạn cũng tương tự như vậy.

Truy vấn media

Đây là kỹ thuật typography phổ biến nhất được dùng bởi các lập trình viên. Nó liên quan tới việc tạo các truy vấn media cho từng breakpoint. Nó cho phép bạn áp dụng các kiểu cụ thể dựa trên những kích thước màn hình khác nhau. Ví dụ:

 /* Default font-size */
h1{
font-size: 38px;
}
p{
font-size: 20px;
}
/* Font-size for small screens */
@media (max-width:800px){
h1{
font-size: 32px;
}
p{
font-size: 18px;
}
}
/* Font-size for smaller screens */
@media (max-width:400px){
h1{
font-size: 28px;
}
p{
font-size: 15px;
}
}

Ở ví dụ này, heading và đoạn được thiết lập sang một giá trị mặc định, tương ứng là “38px” đến “20px”. Sau đó, điều kiện được thiết lập cho kích thước màn hình nhỏ hơn để làm bố cục đáp ứng trên thiết bị di động. Bạn có thể tạo nhiều truy vấn media như ý muốn dựa trên thiết kế và khả năng phản hồi mong muốn.

Thuộc tính CSS tùy biến

Thuộc tính CSS tùy biến chứa giá trị có thể được tái sử dụng trong suốt quá trình tạo kiểu của bạn. Nó có thể được dùng cho typography để lập trình viên dễ dàng quản lý và tùy chỉnh. Ví dụ:

:root {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
font-size: var(--heading-font-size);
}
p{
font-size: var(--paragraph-font-size);
}
@media (max-width:800px){
:root {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (max-width:400px){
:root {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

Ở ví dụ này, thuộc tính CSS được đặt ở cấp độ gốc, cho phép người dùng truy cập nó toàn cục. --heading-font-size và --paragraph-font-size là tên mô tả cho tiêu đề và đoạn văn, với những giá trị mặc định được cung cấp cho cả hai. Kỹ thuật này đảm bảo bạn có thể tái sử dụng cho các truy vấn media khác nhau nhằm đảm bảo tính nhất quán trên bảng.

Responsive typography đóng vai trò quan trọng trong thiết kế và phát triển web. Bằng cách triển khai những phương thức và kỹ thuật như gợi ý trên, bạn có thể đảm bảo typography hiện đẹp và phù hợp trên mọi kích thước màn hình và thiết bị.

Thứ Sáu, 23/06/2023 12:58

4 ★ 4 👨 178

#CSS