Skip to main content

Agent Skills - Phần 10: Typography & Font Pairings

Tóm tắt

Tài liệu tổng hợp font pairing khuyến nghị cho từng loại sản phẩm (SaaS, fintech, editorial, devtools, e-commerce, VN/i18n, entertainment...), bao gồm Heading/Body fonts, mood keywords, best use cases và snippets Google Fonts/Tailwind để implement nhanh. Mỗi font pairing được đánh giá về readability, performance và phù hợp với từng loại sản phẩm. Nội dung dựa trên typography.csv từ ui-ux-pro-max-skill, giúp designers và developers chọn typography phù hợp cho dự án.

Tài liệu này tổng hợp font pairing khuyến nghị cho từng loại sản phẩm (SaaS, fintech, editorial, devtools, e‑commerce, VN/i18n, entertainment...).
Nguồn: typography.csv từ ui-ux-pro-max-skill.

Cấu trúc mỗi mục:

  • Heading / Body: Tên font đề xuất (Google Fonts).
  • Mood: Từ khoá cảm xúc/phong cách.
  • Best for: Loại sản phẩm nên dùng.
  • Snippets: Link Google Fonts + @import + gợi ý Tailwind fontFamily.

1. SaaS, Product & Dashboard​

1.1 🟢 Minimal Swiss – Inter​

  • Heading / Body: Inter / Inter
  • Mood: Minimal, functional, neutral, swiss.
  • Best for: Dashboard, admin, docs, enterprise app, design system.
  • Google Fonts:
    https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  • Tailwind gợi ý:
+ fontFamily: { sans: ['Inter', 'sans-serif'] }

1.2 🟢 Modern Professional – Poppins + Open Sans​

  • Heading / Body: Poppins / Open Sans
  • Mood: Modern, professional, thân thiện.
  • Best for: SaaS, corporate, startup landing, business app.
+ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
+ fontFamily: {
+   heading: ['Poppins', 'sans-serif'],
+   body: ['Open Sans', 'sans-serif'],
+ }

1.3 🟢 Tech Startup – Space Grotesk + DM Sans​

  • Heading / Body: Space Grotesk / DM Sans
  • Mood: Tech, futuristic, hơi “weird” đủ để nhớ.
  • Best for: AI/tech startup, dev tools, product landing.
+ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+ fontFamily: {
+   heading: ['Space Grotesk', 'sans-serif'],
+   body: ['DM Sans', 'sans-serif'],
+ }

1.4 🟢 Friendly SaaS – Plus Jakarta Sans​

  • Heading / Body: Plus Jakarta Sans / Plus Jakarta Sans
  • Mood: Friendly, clean, modern alternative cho Inter.
  • Best for: Web apps, dashboard, B2B/B2C SaaS.
+ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
+ fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }

1.5 🟢 Corporate Trust – Lexend + Source Sans 3​

  • Heading / Body: Lexend / Source Sans 3
  • Mood: Corporate, trustworthy, rất readable.
  • Best for: Enterprise, gov, healthcare, accessibility-focused.
+ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
+ fontFamily: {
+   heading: ['Lexend', 'sans-serif'],
+   body: ['Source Sans 3', 'sans-serif'],
+ }

1.6 🟢 Dashboard Data – Fira Sans + Fira Code​

  • Heading / Body/Code: Fira Sans / Fira Sans + Fira Code
  • Mood: Data, kỹ thuật, thống nhất giữa UI & code.
  • Best for: Analytics dashboard, admin panel, dev-oriented UI.
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+ fontFamily: {
+   mono: ['Fira Code', 'monospace'],
+   sans: ['Fira Sans', 'sans-serif'],
+ }

2.1 🟢 Financial Trust – IBM Plex Sans​

  • Heading / Body: IBM Plex Sans / IBM Plex Sans
  • Mood: Finance, serious, corporate.
  • Best for: Bank, fintech, insurance, enterprise.
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
+ fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }

2.2 🟢 Medical Clean – Figtree + Noto Sans​

  • Heading / Body: Figtree / Noto Sans
  • Mood: Clean, human, healthcare-friendly.
  • Best for: Clinic, health app, pharma, medical dashboard.
+ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');
+ fontFamily: {
+   heading: ['Figtree', 'sans-serif'],
+   body: ['Noto Sans', 'sans-serif'],
+ }

2.3 🟢 Legal Professional – EB Garamond + Lato​

  • Heading / Body: EB Garamond / Lato
  • Mood: Formal, authoritative, legal.
  • Best for: Law firm, policy, gov/contract pages.
+ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');
+ fontFamily: {
+   serif: ['EB Garamond', 'serif'],
+   sans: ['Lato', 'sans-serif'],
+ }

2.4 🟢 Accessibility First – Atkinson Hyperlegible​

  • Heading / Body: Atkinson Hyperlegible / Atkinson Hyperlegible
  • Mood: Inclusive, rõ nét, thân thiện cho người có thị lực kém/dyslexia.
  • Best for: Gov, healthcare, public service, mọi chỗ accessibility-critical.
+ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
+ fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }

3. Editorial, Content & Blogs​

3.1 🟢 Classic Elegant – Playfair Display + Inter​

  • Heading / Body: Playfair Display / Inter
  • Mood: Luxury, editorial, premium.
  • Best for: Luxury brand, fashion, spa/beauty, premium e‑commerce.
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
+ fontFamily: {
+   serif: ['Playfair Display', 'serif'],
+   sans: ['Inter', 'sans-serif'],
+ }

3.2 🟢 Editorial Classic – Cormorant Garamond + Libre Baskerville​

  • Heading / Body: Cormorant Garamond / Libre Baskerville
  • Mood: Literary, classic, bookish.
  • Best for: Magazine, long-form blog, literary site.
+ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

3.3 🟢 News Editorial – Newsreader + Roboto​

  • Heading / Body: Newsreader / Roboto
  • Mood: News, journalistic, informative.
  • Best for: News site, content-heavy blog, docs với kiểu editorial.
+ @import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

3.4 🟢 Academic / Research – Crimson Pro + Atkinson Hyperlegible​

  • Heading / Body: Crimson Pro / Atkinson Hyperlegible
  • Mood: Scholarly, accessible.
  • Best for: University, research portal, knowledge base chuyên sâu.
+ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');

4. DevTools, Tech & Code‑heavy​

4.1 🟢 Developer Mono – JetBrains Mono + IBM Plex Sans​

  • Heading / Body/Code: IBM Plex Sans / IBM Plex Sans + JetBrains Mono
  • Mood: Dev, technical, IDE-like.
  • Best for: Docs, playground, code samples, CLI-like UI.
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

4.2 🟢 Dashboard Data – Fira Sans + Fira Code​

(đã liệt kê ở 1.6, nhắc lại cho dashboard/data).

4.3 🟡 Tech/HUD Mono – Share Tech Mono + Fira Code​

  • Heading / Code: Share Tech Mono + Fira Code
  • Mood: Sci‑fi HUD, cyberpunk dashboard.
  • Best for: HUD, cybersecurity UI, sci‑fi, experiment.
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

5. E‑commerce, Marketing & Entertainment​

5.1 🟢 E‑commerce Clean – Rubik + Nunito Sans​

  • Heading / Body: Rubik / Nunito Sans
  • Mood: Clean, friendly, retail-ready.
  • Best for: Storefront, product page, marketplace.
+ @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');

5.2 🟡 Bold Statement – Bebas Neue + Source Sans 3​

  • Heading / Body: Bebas Neue / Source Sans 3
  • Mood: Rất mạnh, headline to, all‑caps.
  • Best for: Hero text marketing, event, sports, landing “đập vào mắt”.
  • Lưu ý: Dùng Bebas Neue cho heading lớn; body vẫn dùng sans thường.

5.3 🟡 Music / Entertainment – Righteous + Poppins​

  • Heading / Body: Righteous / Poppins
  • Mood: Fun, energetic.
  • Best for: Music app, event page, entertainment.

5.4 🟡 Gaming Bold – Russo One + Chakra Petch​

  • Heading / Body: Russo One / Chakra Petch
  • Mood: Esports, action, high energy.

5.5 🟡 Crypto/Web3 – Orbitron + Exo 2​

  • Heading / Body: Orbitron / Exo 2
  • Mood: Futuristic, polygonal, “blockchain”.

6. Playful, Kids, Indie & Lifestyle​

6.1 🟡 Playful Creative – Fredoka + Nunito​

  • Heading / Body: Fredoka / Nunito
  • Mood: Rounded, friendly, dễ thương.
  • Best for: Kids app nhẹ, creative tool, onboarding, gamified UI.

6.2 🟡 Kids / Education – Baloo 2 + Comic Neue​

  • Heading / Body: Baloo 2 / Comic Neue
  • Mood: Trẻ em, vui tươi, chữ to.

6.3 🟡 Handwritten Charm – Caveat + Quicksand​

  • Heading / Accent / Body: Caveat (accent) / Quicksand (body).
  • Best for: Personal blog, lifestyle, card/invitation.
  • Lưu ý: Script chỉ dùng cho tiêu đề/ngắn, tránh cho body dài.

6.4 🟡 Indie / Craft – Amatic SC + Cabin​

  • Mood: Handmade, organic, phù hợp craft/indie brand.

6.5 🟡 Wedding / Romance – Great Vibes + Cormorant Infant​

  • Mood: Script elegant + serif mềm mại.
  • Best for: Wedding site, wedding planner, romantic brand.

7. Multilingual & Localized (i18n)​

7.1 🔴 Vietnamese Friendly – Be Vietnam Pro + Noto Sans​

  • Heading / Body: Be Vietnam Pro / Noto Sans fallback.
  • Mood: Native VN, đa ngôn ngữ, rất readable.
  • Best for: Mọi site/app tiếng Việt hoặc đa ngôn ngữ có tiếng Việt.
+ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');
+ fontFamily: {
+   sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'],
+ }

7.2 🟢 Japanese Elegant – Noto Serif JP + Noto Sans JP​

7.3 🟢 Korean Modern – Noto Sans KR​

7.4 🟢 Chinese Traditional/Simplified – Noto Serif/Sans TC/SC​

7.5 🟢 Arabic, Thai, Hebrew – Noto * families​

  • Nguyên tắc: Với CJK/RTL, ưu tiên họ Noto tương ứng, dùng 1–2 font cho cả heading + body để tránh flash/lag.

8. Gợi ý chọn nhanh cho Agent​

  • SaaS dashboard / admin: Inter hoặc Plus Jakarta Sans (Minimal Swiss, Friendly SaaS).
  • Fintech / bank / insurance: IBM Plex Sans (Financial Trust) hoặc Lexend + Source Sans 3.
  • Healthcare / gov / public: Figtree + Noto Sans hoặc Atkinson Hyperlegible (Accessibility First).
  • VN-first product: Be Vietnam Pro (bắt buộc) + Noto Sans fallback.
  • Devtools / docs: JetBrains Mono + IBM Plex Sans hoặc Fira Code + Fira Sans.
  • Magazine / blog: Newsreader + Roboto hoặc Cormorant Garamond + Libre Baskerville.
  • Creative / portfolio: Space Grotesk + Archivo hoặc Syne + Manrope.

Tóm tắt​

Nhóm sản phẩmFont pair khuyến nghị chính
SaaS / DashboardInter · Plus Jakarta Sans · Space Grotesk + DM
Fintech / Legal / MedIBM Plex Sans · Lexend + Source Sans 3 · Figtree+Noto
News / EditorialPlayfair + Inter · Newsreader + Roboto
Devtools / DataJetBrains Mono + IBM Plex · Fira Code + Fira Sans
E‑commerce / MarketingRubik + Nunito Sans · Bebas Neue + Source Sans 3
Kids / PlayfulFredoka + Nunito · Baloo 2 + Comic Neue
VN & i18nBe Vietnam Pro (+ Noto), các họ Noto cho CJK/RTL

Nguồn dữ liệu: typography.csv — ui-ux-pro-max-skill.