Interactive Typography Style Guide

Tailwind Type Styles

Relative Scale (Font Size)

Về Công Thức Tính Tỉ Lệ

Cỡ chữ sẽ tự giãn cỡ dựa trên một chiều rộng cơ sở. Từ kích thước gốc của thiết bị sẽ được nhân với một hệ số tỉ lệ (scale factor) được tính toán động.

1. Tính Hệ số tỉ lệ:

Scale Factor = Simulated Width / Base Width

Simulated Width: Chiều rộng hiện tại từ thanh trượt.
Base Width: Chiều rộng thiết kế gốc: 390px.

2. Tính Cỡ chữ cuối cùng:

Final Size (px) = Base Size (rem) * 16 * Scale Factor

Ví dụ: text-3xl (1.875rem) tại màn hình 375px:

Scale Factor = 375 / 390 = 0.962
Final Size ≈ 1.875 * 16 * 0.962 = 28.86px

Tailwind Class

Scaled Font Size

Scaled Leading

Scale Factor

KHÔNG CÓ GÌ QUÝ HƠN
ĐỘC LẬP TỰ DO

Simulated Mobile Width: 390px

320px (Small) 390px (Base) 800px (Tablet)