Tạo typography responsive với CSS

Responsive typography cho phép kích thước chữ tự động điều chỉnh theo kích thước màn hình. Cách đơn giản nhất là sử dụng đơn vị viewport (vw, vh):

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
  <style>
    h1 { font-size: 10vw; }
    p { font-size: 5vw; }
  </style>
</head>
<body>
  <h1>Văn Bản Responsive</h1>
  <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum. </p>
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis! </p>
</body>
</html>

Kết quả

Tiêu đề h1 sẽ có kích thước 10% chiều rộng viewport, đoạn văn 5%. Khi thu nhỏ màn hình, chữ tự động nhỏ lại.

Cách tiếp cận hiện đại hơn

Sử dụng clamp() để đặt kích thước tối thiểu/tối đa:

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

Điều này đảm bảo chữ không quá nhỏ trên mobile hay quá lớn trên desktop.