Thiết kế / Kiểu chữ

Trình tạo thang cỡ chữ (thang mô-đun cho CSS và Tailwind)

Tạo thang cỡ chữ mô-đun từ cỡ chữ cơ sở và một tỷ lệ như 1,25 hoặc tỷ lệ vàng, xem trước từng bậc với văn bản của bạn, rồi sao chép các cỡ dưới dạng thuộc tính tùy chỉnh CSS hoặc cấu hình fontSize của Tailwind theo rem hoặc px.

Trình tạo thang cỡ chữ (thang mô-đun cho CSS và Tailwind): Mỗi cỡ bằng cỡ cơ sở nhân với tỷ lệ một lần cho mỗi bậc: với 16 px và quãng ba trưởng, 1,25, các bậc phía trên là 20, 25, 31,25, 39,06 và 48,83 px; các bậc phía dưới là 12,8 và 10,24 px. Các cỡ được liệt kê theo px và rem, đồng thời được đặt tên giống các cỡ văn bản của Tailwind, từ xs đến 4xl. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục
Công cụ lập trình viên
Lượt chạy
Trong trình duyệt của bạn
Chi phí
Miễn phí · không cần đăng ký
Trạng thái khả dụng
Sẵn sàng sử dụng
Trình tạo thang tỷ lệ chữXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

4xl48,83 px · 3.0518 remThe quick brown fox
3xl39,06 px · 2.4414 remThe quick brown fox
2xl31,25 px · 1.9531 remThe quick brown fox
xl25 px · 1.5625 remThe quick brown fox
lg20 px · 1.25 remThe quick brown fox
base16 px · 1 remThe quick brown fox
sm12,8 px · 0.8 remThe quick brown fox
xs10,24 px · 0.64 remThe quick brown fox
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Mỗi bậc bằng bậc ngay bên dưới nhân với tỷ lệ: với kích thước cơ sở 16 px và tỷ lệ 1,25, các kích thước bên trên là 20, 25 và 31,25 px, còn bên dưới là 12,8 và 10,24 px. Các tỷ lệ nhỏ như 1,125 phù hợp với giao diện dày đặc; các tỷ lệ lớn hơn như 1,5 tạo độ tương phản rõ hơn cho tiêu đề. Các giá trị rem giả định kích thước gốc mặc định của trình duyệt là 16 px.

Nguồn gốc của tên các tỷ lệ

Các tên gọi bắt nguồn từ những quãng nhạc: quãng năm đúng có tỷ lệ tần số là 3 : 2, nên một thang chữ được xây dựng trên 1,5 tăng theo cùng tỷ lệ như các nốt cách nhau một quãng năm. Thang âm mô-đun của Tim Brown đã phổ biến ý tưởng này trên web.

Tỷ lệ vàng, 1,618, tạo ra những bước nhảy rất lớn; tỷ lệ này được giải thích trong máy tính tỷ lệ vàng.

Làm tròn

Trình duyệt hiển thị kích thước pixel phân số, nên 31,25 px có thể giữ nguyên. Nếu hệ thống thiết kế cần pixel nguyên, hãy làm tròn từng bước và giữ các giá trị rem ở bốn chữ số thập phân, như công cụ này thực hiện; chuyển đổi các giá trị khác bằng bộ chuyển đổi px sang rem.

Cách sử dụng

  1. Nhập cỡ cơ sở và chọn một tỷ lệ.
  2. Chọn số bậc tăng và giảm, rồi xem trước chúng với văn bản của bạn.
  3. Sao chép các biến CSS hoặc cấu hình Tailwind.

Quyền riêng tư và giới hạn

Mọi thao tác đều chạy trong trình duyệt của bạn.

Công cụ liên quan

CSS clamp()Bộ chuyển đổi đơn vị CSSTỷ lệ vàng

Câu hỏi thường gặp

Tôi nên dùng tỷ lệ nào?

Các giao diện có nhiều văn bản và màn hình nhỏ phù hợp với những tỷ lệ nhẹ như 1,125 hoặc 1,2; các trang biên tập và trang đích có thể dùng 1,333 đến 1,618 để tạo tiêu đề nổi bật hơn.

Tại sao nên dùng rem?

Các cỡ rem tuân theo cài đặt cỡ chữ trong trình duyệt của người đọc, vì vậy văn bản sẽ lớn hơn đối với những người cần cỡ chữ lớn. Phép chuyển đổi giả định phần tử gốc có cỡ mặc định là 16 px.

Tôi có thể làm cho các cỡ thay đổi linh hoạt không?

Có: lấy cỡ nhỏ nhất và lớn nhất bạn muốn cho một bậc, rồi chuyển chúng thành biểu thức clamp() bằng trình tạo clamp() cho CSS.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản