Tạo hệ thống typography với tỷ lệ chuẩn cho thiết kế
:root {
--font-xs: 5.24px;
--font-sm: 6.55px;
--font-base-sm: 8.19px;
--font-base: 10.24px;
--font-md: 12.8px;
--font-lg: 16px;
--font-xl: 20px;
--font-2xl: 25px;
--font-3xl: 31.25px;
--font-4xl: 39.06px;
--font-5xl: 48.83px;
}fontSize: {
'xs': '5.24px',
'sm': '6.55px',
'base-sm': '8.19px',
'base': '10.24px',
'md': '12.8px',
'lg': '16px',
'xl': '20px',
'2xl': '25px',
'3xl': '31.25px',
'4xl': '39.06px',
'5xl': '48.83px',
}Công cụ Typography Scale Generator online miễn phí của Tấn Phát Digital giúp bạn tạo hệ thống font size nhất quán và hài hòa cho thiết kế web và ứng dụng. Hỗ trợ 8 tỷ lệ typography chuẩn: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), và Golden Ratio (1.618). Preview trực quan từng size với text mẫu. Xuất code CSS Variables và Tailwind config sẵn sàng sử dụng. Tùy chỉnh base size từ 8px đến 32px. Copy code với một click. Hoàn toàn miễn phí cho designers và developers.
Typography scale (thang đo typography) là hệ thống font sizes được tính toán theo một tỷ lệ toán học nhất định, tạo ra sự hài hòa và nhất quán trong thiết kế. Thay vì chọn font size ngẫu nhiên (14px, 18px, 24px...), typography scale đảm bảo mỗi size có quan hệ tỷ lệ với size khác. Điều này tạo ra visual hierarchy rõ ràng, giúp người đọc dễ dàng phân biệt heading, subheading, body text. Các tỷ lệ như Golden Ratio (1.618) đã được chứng minh tạo cảm giác cân đối tự nhiên cho mắt người - đây là tỷ lệ xuất hiện trong tự nhiên, nghệ thuật, và kiến trúc từ hàng nghìn năm. Sử dụng typography scale giúp thiết kế chuyên nghiệp hơn, consistent hơn, và dễ maintain hơn.
Các tỷ lệ typography scale có nguồn gốc từ âm nhạc và toán học. Minor Second (1.067) và Major Second (1.125): Tỷ lệ nhỏ, tạo sự khác biệt tinh tế giữa các sizes, phù hợp cho UI với nhiều text levels. Minor Third (1.200) và Major Third (1.250): Tỷ lệ phổ biến nhất, cân bằng giữa contrast và harmony, phù hợp cho hầu hết websites. Perfect Fourth (1.333): Tỷ lệ 4:3, tạo contrast rõ ràng hơn, phù hợp cho editorial và blog. Augmented Fourth (1.414): Căn bậc hai của 2, tỷ lệ của khổ giấy A. Perfect Fifth (1.500): Tỷ lệ 3:2, contrast mạnh, phù hợp cho headlines nổi bật. Golden Ratio (1.618): Tỷ lệ vàng, xuất hiện trong tự nhiên và nghệ thuật, tạo cảm giác hài hòa tự nhiên nhất.
Việc chọn scale ratio phụ thuộc vào loại project và lượng text levels cần thiết. Websites với nhiều text levels (documentation, dashboard): Chọn tỷ lệ nhỏ (1.125-1.200) để có nhiều sizes phân biệt mà không quá chênh lệch. Blog và editorial: Chọn tỷ lệ trung bình (1.250-1.333) để headlines nổi bật nhưng body text vẫn comfortable. Landing pages và marketing: Chọn tỷ lệ lớn (1.414-1.618) để tạo impact mạnh với headlines lớn. Mobile-first: Cân nhắc tỷ lệ nhỏ hơn vì screen nhỏ cần sizes gần nhau hơn. Nếu không chắc chắn, Major Third (1.250) là lựa chọn an toàn cho hầu hết projects.
CSS Variables (Custom Properties) cho phép define font sizes một lần và sử dụng throughout stylesheet. Code được generate có format: :root { --font-xs: 10.24px; --font-sm: 12.8px; ... }. Sử dụng trong CSS: h1 { font-size: var(--font-4xl); }, p { font-size: var(--font-base); }. Ưu điểm: Thay đổi base size hoặc ratio chỉ cần update :root, tất cả elements tự động update. Có thể override trong media queries cho responsive: @media (max-width: 768px) { :root { --font-base: 14px; } }. Fallback cho browsers cũ: font-size: 16px; font-size: var(--font-base);.
Tailwind CSS cho phép extend theme với custom font sizes. Copy fontSize object từ tool và paste vào tailwind.config.js: module.exports = { theme: { extend: { fontSize: { 'xs': '10.24px', 'sm': '12.8px', ... } } } }. Sau đó sử dụng classes: <h1 class='text-4xl'>, <p class='text-base'>. Lưu ý: Tailwind mặc định đã có fontSize scale, extend sẽ merge với defaults. Nếu muốn replace hoàn toàn, đặt trong theme thay vì theme.extend. Có thể thêm line-height: fontSize: { 'base': ['16px', '1.5'], 'lg': ['20px', '1.6'] }.
Base size 16px: Đây là browser default, đừng đặt nhỏ hơn cho body text vì ảnh hưởng readability. Line height: Body text nên có line-height 1.5-1.7, headings có thể 1.1-1.3. Contrast: Đảm bảo đủ contrast giữa heading và body (ít nhất 2 steps trong scale). Responsive: Cân nhắc giảm base size hoặc scale ratio trên mobile. Limit font sizes: Không cần dùng tất cả sizes trong scale, chọn 5-7 sizes là đủ cho hầu hết projects. Semantic HTML: Sử dụng đúng h1-h6 tags, không chỉ dựa vào font size. Accessibility: Cho phép users zoom text, không fix font size bằng px cứng (dùng rem/em khi có thể).
Typography scale là foundation của design system. Các design systems nổi tiếng đều có type scale riêng: Material Design (Google) sử dụng scale với 13 styles từ H1 đến Caption. IBM Carbon dùng scale dựa trên tỷ lệ 1.125 (Major Second). Atlassian Design System dùng scale với 7 heading levels. Khi xây dựng design system, define type scale sớm và document rõ ràng. Naming convention quan trọng: có thể dùng t-shirt sizes (xs, sm, md, lg, xl) hoặc semantic names (body, caption, h1, h2...). Đảm bảo designers và developers dùng cùng scale để maintain consistency.
Không bắt buộc, nhưng 16px là browser default và được khuyến nghị cho body text vì đảm bảo readability trên hầu hết devices. Nếu dùng size nhỏ hơn (14px), users có thể gặp khó khăn khi đọc, đặc biệt trên mobile hoặc với người có vấn đề về thị lực. Có thể dùng 18px hoặc 20px cho websites với nhiều long-form content.
Major Third (1.250) là lựa chọn an toàn và phổ biến nhất. Nó tạo đủ contrast giữa các levels mà không quá dramatic. Perfect Fourth (1.333) cũng phổ biến, đặc biệt cho blogs và editorial. Nếu website có ít text levels (chỉ cần body và 2-3 heading sizes), có thể chọn tỷ lệ lớn hơn như Golden Ratio.
Không. Tool generate 11 sizes để bạn có nhiều lựa chọn, nhưng hầu hết projects chỉ cần 5-7 sizes: body (base), small text, và 3-5 heading levels. Việc dùng quá nhiều sizes có thể làm design thiếu nhất quán. Chọn những sizes bạn thực sự cần và stick với chúng.
Có nhiều cách: 1) Giảm base size trên mobile (16px desktop → 14px mobile). 2) Dùng tỷ lệ nhỏ hơn trên mobile (1.250 desktop → 1.125 mobile). 3) Dùng CSS clamp() cho fluid typography: font-size: clamp(1rem, 2vw + 1rem, 2rem). 4) Dùng media queries để override CSS variables. Cách 3 (fluid typography) đang trở nên phổ biến vì smooth scaling.
Các tỷ lệ này có nguồn gốc từ âm nhạc - chúng là tỷ lệ tần số giữa các nốt nhạc trong scale. Minor Third là tỷ lệ giữa nốt gốc và nốt thứ 3 trong minor scale. Perfect Fifth là tỷ lệ 3:2, một trong những intervals hài hòa nhất trong âm nhạc. Những tỷ lệ này tạo cảm giác hài hòa không chỉ trong âm thanh mà còn trong visual design.
Golden Ratio được marketing nhiều nhưng không nhất thiết 'tốt hơn'. Nó tạo contrast khá mạnh, có thể quá dramatic cho một số projects. Nhiều designers thành công dùng các tỷ lệ khác. Quan trọng là consistency - chọn một tỷ lệ và stick với nó. Golden Ratio phù hợp cho designs cần headlines rất nổi bật, nhưng Major Third hoặc Perfect Fourth thường practical hơn.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
