./prontouso.com

TIỆN ÍCH THIẾT KẾ

Tính Thang Tỷ Lệ Kiểu Chữ Typography

Tạo thang phân cấp kích thước font chữ hài hòa dựa trên tỷ lệ toán học (Golden Ratio, Major Third, Perfect Fourth...). Xuất mã CSS biến tùy chỉnh có thể dùng ngay.

Trạng thái công cụChạy trên trình duyệt của bạn
Xem trước

Dữ liệu đầu vào

Each step multiplies (or divides) the base size by the chosen ratio.

Kết quả

Steppxrem
-210.240.64Ag
-112.80.8Ag
0161Ag
1201.25Ag
2251.563Ag
331.251.953Ag
439.062.441Ag
548.833.052Ag

Cách thức hoạt động

  1. Nhập dữ liệu của bạn

    Điền các giá trị cần thiết, dán văn bản hoặc tải lên tệp bạn muốn xử lý.

  2. Xem kết quả tức thì

    Hầu hết các công cụ cập nhật theo thời gian thực khi bạn nhập liệu; một số công cụ sử dụng một nút hành động duy nhất.

  3. Sử dụng kết quả

    Sao chép, tải xuống hoặc chia sẻ kết quả được tạo — bạn luôn có toàn quyền kiểm soát dữ liệu của mình.

Quyền riêng tư & xử lý dữ liệu — Chạy cục bộ 100% trên trình duyệt của bạn. Công cụ này không tải dữ liệu của bạn lên máy chủ.

Tính Thang Tỷ Lệ Kiểu Chữ Typography là gì?

Pick a base size and a ratio to generate a full scale of font sizes, in both pixels and rem.

TÌM HIỂU CÁCH HOẠT ĐỘNG CỦA CÔNG CỤ

How to build a typographic scale

How it's calculated

Each step multiplies (for steps up) or divides (for steps down) the base size by the ratio once per step — the same geometric progression used by modular type scales in design tools.

Choosing a ratio

  • Smaller ratios (1.067-1.2) suit dense interfaces with many text sizes.
  • Larger ratios (1.333-1.618) suit headline-heavy, editorial layouts.

Worked example

A 16px base with a 1.25 (Major Third) ratio produces 20px, 25px, 31.25px, and so on going up, and 12.8px, 10.24px going down.

Scale formula

Step size
base_px * ratio^step
rem value
px / root_px

Base 16, ratio 1.25, step 2

Step 2 is 25 px, or 1.563 rem with a 16 px root.

Calculation notes

All calculation runs in your browser; nothing you enter is sent anywhere.

Các Câu Hỏi Thường Gặp (FAQ)

What root size should I use for rem?

Use your page's actual root font size — 16px is the browser default and the most common choice.

Can I use a custom ratio?

The ratio is chosen from a fixed list of well-known named ratios, from Minor Second to Golden Ratio, rather than freeform entry.

Do I have to use every step the scale generates?

No — most designs only use a handful of the generated sizes (for body text, a few heading levels, and captions), not every single step.

Why must the ratio be greater than 1?

A modular scale needs each step above the base to grow. Ratios of 1 or less would flatten or invert the scale.

Công Cụ Liên Quan