Thang cỡ chữ & tỉ lệ vàng

40 người đã dùng

Chọn cỡ chữ gốc và tỉ lệ nhảy bậc, xem ngay từng cỡ với câu tiếng Việt. Xuất CSS theo rem hoặc cấu hình Tailwind.

Aa
Bản mẫu cỡ chữ Be Vietnam Pro

Font

Mã thang chữ


                    

                        
                        

                            
                            
                        

                    

                

            

        


        
        

            

                

                    
Chia bố cục theo tỉ lệ vàng 1 : 1,618

                    

                

                

                    
                    
px

                

            

            

        

    




Xem nhanh cách dùng


Xong việc này? Labs gợi ý bước tiếp theo
Kiểm tra màu cá nhânLấy màu trên màn hìnhĐổi mã màu


Câu hỏi thường gặp
Type scale (thang cỡ chữ) là gì?
Là bộ cỡ chữ tăng theo cùng một tỉ lệ, từ chữ nội dung đến H1, giúp tiêu đề và nội dung chênh nhau đều đặn và nhìn chuyên nghiệp.
Cách tạo thang cỡ chữ cho website?
Chọn cỡ chữ gốc (thường 16px), số bậc và tỉ lệ nhảy bậc, công cụ hiện ngay các cỡ chữ kèm câu mẫu tiếng Việt để bạn xem thử.
Nên chọn tỉ lệ nhảy bậc nào?
Major third (1.25) là lựa chọn an toàn cho website nhiều chữ. Perfect fourth (1.333) đến tỉ lệ vàng (1.618) tạo độ chênh mạnh, hợp poster và landing page.
Có những tỉ lệ nào để chọn?
Có 8 tỉ lệ: Minor second 1.067, Major second 1.125, Minor third 1.2, Major third 1.25, Perfect fourth 1.333, Augmented fourth 1.414, Perfect fifth 1.5 và tỉ lệ vàng 1.618.
Tỉ lệ vàng 1.618 dùng trong bố cục thế nào?
Phần chia bố cục theo tỉ lệ vàng chia một chiều rộng thành hai phần theo tỉ lệ 1 : 1,618, ví dụ cột nội dung chính và cột phụ trên trang.
Có xem thử với font tiếng Việt không?
Có, bạn xem thử câu mẫu với Be Vietnam Pro, Playfair, Inter hoặc Lora, đều hỗ trợ đầy đủ dấu tiếng Việt.
Xuất thang cỡ chữ ra CSS thế nào?
Chọn CSS để lấy các cỡ chữ theo đơn vị rem, hoặc chọn Tailwind để lấy cấu hình fontSize dán vào tailwind.config.js.
Vì sao nên dùng rem thay vì px?
rem co giãn theo cài đặt cỡ chữ của người dùng trong trình duyệt, giúp website dễ đọc và thân thiện với người thị lực kém.
Cỡ chữ nội dung tối thiểu nên là bao nhiêu?
Trên web, 16px là mức phổ biến và dễ đọc cho chữ nội dung. Chữ nhỏ hơn 14px chỉ nên dùng cho chú thích ngắn.
Type scale có dùng cho thiết kế in không?
Có, nguyên tắc tỉ lệ vẫn đúng với ấn phẩm in. Bạn chỉ cần đổi cỡ gốc sang đơn vị pt phù hợp khổ giấy.
Làm sao áp dụng vào Figma?
Tạo Text styles trong Figma cho từng bậc (Body, H6... H1) với cỡ chữ lấy từ công cụ, rồi dùng thống nhất trong mọi màn hình.
Công cụ có miễn phí không?
Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.



Công cụ cùng nhóm
Tất cả công cụ
Kiểm tra Personal Color của bạnKiểm tra màu cá nhânHotHút màu ở bất kỳ đâu, ra HEX, RGB, HSL, CMYKLấy màu trên màn hìnhHEX, RGB, HSL, CMYK, OKLCH qua lạiĐổi mã màuChữ trên nền có đạt chuẩn WCAG khôngKiểm tra tương phảnDải màu tuyến tính, toả tròn, xuất CSSTạo gradient CSSLấy dải màu gradient từ chính bức ảnhTạo gradient từ ảnhTạo dải 50–950 từ 1 màu, xuất CSS, TailwindThang màu & design tokenXem thiết kế qua mắt người mù màuMô phỏng mù màu