devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Kiểm tra website

Type Scale Generator — Thang cỡ chữ Modular và Fluid

Chọn cỡ chữ gốc và một tỷ lệ như Minor Third, Major Third, Perfect Fourth hay Golden Ratio, bạn sẽ có bộ cỡ chữ hài hòa cho tiêu đề và nội dung. Bật fluid type để mỗi bậc tăng mượt giữa thang trên điện thoại và thang trên máy tính với clamp(), xem trước ở mọi chiều rộng màn hình, rồi sao chép CSS variables, cấu hình Tailwind hoặc SCSS.

Cập nhật

Xem trước


  


    
 Dữ liệu của bạn không bao giờ rời khỏi máy tính. Mọi xử lý diễn ra 100% cục bộ trong trình duyệt của bạn.
Công cụ này có hữu ích không?0.0 0 lượt đánh giá

    
    
    Tính giá trị CSS clamp() linh hoạt cho cỡ chữ và khoảng cách từ kích thước min/max và viewport, xem trước trực tiếp và tạo thang chữ đầy đủMáy tính CSS clamp() →
    
    

      
Cách dùng Tạo Type Scale
  1. Đặt cỡ gốc (thường là 16 px, cỡ chữ nội dung) và một tỷ lệ. Tỷ lệ càng lớn thì các tiêu đề càng khác biệt rõ.
  2. Chọn số bậc nằm dưới (chữ nhỏ, chú thích) và trên (h4 đến h1, chữ trình bày).
  3. Bật Fluid để dùng cỡ gốc và tỷ lệ nhỏ hơn trên điện thoại, rồi tăng dần lên thang trên máy tính. Kéo thanh chiều rộng màn hình để xem trước.
  4. Sao chép CSS variables, cấu hình fontSize cho Tailwind hoặc một map SCSS.


Modular scale là gì


Type scale nhân cỡ gốc với cùng một tỷ lệ ở mỗi bậc. Ví dụ với 16 px và 1.25, các bậc là 16, 20, 25, 31.25, 39 px… Các cỡ chữ dùng chung một tỷ lệ sẽ trông liền mạch với nhau. Đó là lý do các nhà thiết kế chữ mượn tỷ lệ từ âm nhạc, gồm Major Third (1.25), Perfect Fourth (1.333), Perfect Fifth (1.5) và Golden Ratio (1.618).


  • Tỷ lệ nhỏ (1.125–1.2) phù hợp giao diện dày đặc, dashboard và trang đọc dài.
  • Tỷ lệ lớn (1.333–1.618) phù hợp trang marketing với tiêu đề lớn, nổi bật.


Fluid type với clamp()


Tiêu đề vừa đẹp trên máy tính thường quá lớn trên điện thoại. Các bậc fluid nội suy giữa thang trên điện thoại và thang trên máy tính: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) giữ ở mức nhỏ nhất trên màn hình nhỏ, tăng tuyến tính theo viewport và dừng ở mức lớn nhất. Giá trị dùng rem nên vẫn tôn trọng cài đặt cỡ chữ của trình duyệt người dùng. Nếu cần tính một giá trị đơn lẻ, xem Clamp Calculator. Muốn chuyển đổi đơn vị, dùng PX to REM.
Cũng được tìm dưới tên: type scale generator, thang cỡ chữ, typography scale, fluid typography generator, clamp font size generator, tailwind font size scale, tính modular scale.
Các công cụ dùng kèm tốt với Tạo Type Scale
  • Trình tạo CSS Grid — Đặt số cột, số hàng và khoảng cách, sau đó kéo qua các ô để tạo các vùng như header, sidebar và main.
  • Trình tạo CSS Flexbox — Xem rõ từng thuộc tính flexbox hoạt động thế nào: chọn hướng, cách xuống dòng, justify-content, align-items và khoảng cách, thêm hoặc xóa phần tử, rồi nhấp vào từng phần tử để chỉnh flex-grow, shrink, basis, order và align-self.
  • Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
  • Kiểm tra tương phản màu — Nhập màu chữ và màu nền để xem tỷ lệ tương phản WCAG chính xác, kết quả đạt/không đạt ở từng mức, điểm APCA và các gợi ý sửa chỉ với một cú nhấp, giữ nguyên sắc độ.
Câu hỏi thường gặp
Nên dùng tỷ lệ type scale nào?
Với hầu hết website, hãy bắt đầu với 1.25 (Major Third). Dùng 1.2 hoặc nhỏ hơn cho ứng dụng và trang nhiều chữ, còn 1.333 trở lên cho landing page có tiêu đề lớn.
Fluid typography là gì?
Cỡ chữ tăng mượt theo chiều rộng màn hình thay vì nhảy đột ngột tại các breakpoint. Mỗi bậc dùng clamp() với giá trị tối thiểu cho điện thoại và tối đa cho màn hình lớn.
Dùng thang cỡ chữ trong Tailwind như thế nào?
Chọn đầu ra Tailwind rồi dán object fontSize vào theme.extend trong tailwind.config.js. Sau đó dùng các class như text-lg hoặc text-3xl như bình thường.
Vì sao dùng rem thay vì px?
rem theo cài đặt cỡ chữ của trình duyệt người dùng, nên chữ sẽ phóng to theo nhu cầu của những người cần chữ lớn hơn. Mặc định 1rem bằng 16 px.
Tôi có thể cài Tạo Type Scale như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo Type Scale là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.

      
    

    
    
Công cụ liên quan
localMáy tính CSS clamp()Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện…localChuyển đổi PX sang REMChuyển đổi qua lại giữa pixel, rem và em với kích thước font gốc của riêng bạn, hoặc dán cả một stylesheet…localTrình tạo CSS GridĐặt số cột, số hàng và khoảng cách, sau đó kéo qua các ô để tạo các vùng như header, sidebar và main. Bạn…localTrình tạo CSS FlexboxXem rõ từng thuộc tính flexbox hoạt động thế nào: chọn hướng, cách xuống dòng, justify-content,…localTạo bảng màu TailwindDán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý…localKiểm tra tương phản màuNhập màu chữ và màu nền để xem tỷ lệ tương phản WCAG chính xác, kết quả đạt/không đạt ở từng mức, điểm…