Files
ui-ux-pro-max-skill/.qoder/rules/typography.md
2026-01-16 08:05:16 +07:00

33 KiB

trigger
trigger
always_on
STT Font Pairing Name Category Heading Font Body Font Mood/Style Keywords Best For Google Fonts URL CSS Import Tailwind Config Notes
1 Classic Elegant "Serif + Sans" Playfair Display Inter "elegant, luxury, sophisticated, timeless, premium, editorial" "Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce" "https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700 Playfair+Display:wght@400;500;600;700" "@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'] }"
2 Modern Professional "Sans + Sans" Poppins Open Sans "modern, professional, clean, corporate, friendly, approachable" "SaaS, corporate sites, business apps, startups, professional services" "https://fonts.google.com/share?selection.family=Open+Sans:wght@300;400;500;600;700 Poppins:wght@400;500;600;700" "@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'] }"
3 Tech Startup "Sans + Sans" Space Grotesk DM Sans "tech, startup, modern, innovative, bold, futuristic" "Tech companies, startups, SaaS, developer tools, AI products" "https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700 Space+Grotesk:wght@400;500;600;700" "@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'] }"
4 Editorial Classic "Serif + Serif" Cormorant Garamond Libre Baskerville "editorial, classic, literary, traditional, refined, bookish" "Publishing, blogs, news sites, literary magazines, book covers" "https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;500;600;700 Libre+Baskerville:wght@400;700" "@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');" "fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }"
5 Minimal Swiss "Sans + Sans" Inter Inter "minimal, clean, swiss, functional, neutral, professional" "Dashboards, admin panels, documentation, enterprise apps, design systems" "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');" "fontFamily: { sans: ['Inter', 'sans-serif'] }" "Single font family with weight variations. Ultimate simplicity."
6 Playful Creative "Display + Sans" Fredoka Nunito "playful, friendly, fun, creative, warm, approachable" "Children's apps, educational, gaming, creative tools, entertainment" "https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700 Nunito:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');" "fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }"
7 Bold Statement "Display + Sans" Bebas Neue Source Sans 3 "bold, impactful, strong, dramatic, modern, headlines" "Marketing sites, portfolios, agencies, event pages, sports" "https://fonts.google.com/share?selection.family=Bebas+Neue Source+Sans+3:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');" "fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }"
8 Wellness Calm "Serif + Sans" Lora Raleway "calm, wellness, health, relaxing, natural, organic" "Health apps, wellness, spa, meditation, yoga, organic brands" "https://fonts.google.com/share?selection.family=Lora:wght@400;500;600;700 Raleway:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');" "fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }"
9 Developer Mono "Mono + Sans" JetBrains Mono IBM Plex Sans "code, developer, technical, precise, functional, hacker" "Developer tools, documentation, code editors, tech blogs, CLI apps" "https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700 JetBrains+Mono:wght@400;500;600;700" "@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');" "fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }"
10 Retro Vintage "Display + Serif" Abril Fatface Merriweather "retro, vintage, nostalgic, dramatic, decorative, bold" "Vintage brands, breweries, restaurants, creative portfolios, posters" "https://fonts.google.com/share?selection.family=Abril+Fatface Merriweather:wght@300;400;700" "@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');" "fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }"
11 Geometric Modern "Sans + Sans" Outfit Work Sans "geometric, modern, clean, balanced, contemporary, versatile" "General purpose, portfolios, agencies, modern brands, landing pages" "https://fonts.google.com/share?selection.family=Outfit:wght@300;400;500;600;700 Work+Sans:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');" "fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }"
12 Luxury Serif "Serif + Sans" Cormorant Montserrat "luxury, high-end, fashion, elegant, refined, premium" "Fashion brands, luxury e-commerce, jewelry, high-end services" "https://fonts.google.com/share?selection.family=Cormorant:wght@400;500;600;700 Montserrat:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');" "fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }"
13 Friendly SaaS "Sans + Sans" Plus Jakarta Sans Plus Jakarta Sans "friendly, modern, saas, clean, approachable, professional" "SaaS products, web apps, dashboards, B2B, productivity tools" "https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@300;400;500;600;700" "@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'] }" "Single versatile font. Modern alternative to Inter."
14 News Editorial "Serif + Sans" Newsreader Roboto "news, editorial, journalism, trustworthy, readable, informative" "News sites, blogs, magazines, journalism, content-heavy sites" "https://fonts.google.com/share?selection.family=Newsreader:wght@400;500;600;700 Roboto:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');" "fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }"
15 Handwritten Charm "Script + Sans" Caveat Quicksand "handwritten, personal, friendly, casual, warm, charming" "Personal blogs, invitations, creative portfolios, lifestyle brands" "https://fonts.google.com/share?selection.family=Caveat:wght@400;500;600;700 Quicksand:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');" "fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }"
16 Corporate Trust "Sans + Sans" Lexend Source Sans 3 "corporate, trustworthy, accessible, readable, professional, clean" "Enterprise, government, healthcare, finance, accessibility-focused" "https://fonts.google.com/share?selection.family=Lexend:wght@300;400;500;600;700 Source+Sans+3:wght@300;400;500;600;700" "@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'] }"
17 Brutalist Raw "Mono + Mono" Space Mono Space Mono "brutalist, raw, technical, monospace, minimal, stark" "Brutalist designs, developer portfolios, experimental, tech art" "https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700" "@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');" "fontFamily: { mono: ['Space Mono', 'monospace'] }" "All-mono for raw brutalist aesthetic. Limited weights."
18 Fashion Forward "Sans + Sans" Syne Manrope "fashion, avant-garde, creative, bold, artistic, edgy" "Fashion brands, creative agencies, art galleries, design studios" "https://fonts.google.com/share?selection.family=Manrope:wght@300;400;500;600;700 Syne:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');" "fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }"
19 Soft Rounded "Sans + Sans" Varela Round Nunito Sans "soft, rounded, friendly, approachable, warm, gentle" "Children's products, pet apps, friendly brands, wellness, soft UI" "https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700 Varela+Round" "@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');" "fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }"
20 Premium Sans "Sans + Sans" Satoshi General Sans "premium, modern, clean, sophisticated, versatile, balanced" "Premium brands, modern agencies, SaaS, portfolios, startups" "https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700" "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');" "fontFamily: { sans: ['DM Sans', 'sans-serif'] }" "Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative."
21 Vietnamese Friendly "Sans + Sans" Be Vietnam Pro Noto Sans "vietnamese, international, readable, clean, multilingual, accessible" "Vietnamese sites, multilingual apps, international products" "https://fonts.google.com/share?selection.family=Be+Vietnam+Pro:wght@300;400;500;600;700 Noto+Sans:wght@300;400;500;600;700" "@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'] }"
22 Japanese Elegant "Serif + Sans" Noto Serif JP Noto Sans JP "japanese, elegant, traditional, modern, multilingual, readable" "Japanese sites, Japanese restaurants, cultural sites, anime/manga" "https://fonts.google.com/share?selection.family=Noto+Sans+JP:wght@300;400;500;700 Noto+Serif+JP:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');" "fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }"
23 Korean Modern "Sans + Sans" Noto Sans KR Noto Sans KR "korean, modern, clean, professional, multilingual, readable" "Korean sites, K-beauty, K-pop, Korean businesses, multilingual" "https://fonts.google.com/share?selection.family=Noto+Sans+KR:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');" "fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }" "Clean Korean typography. Single font with weight variations."
24 Chinese Traditional "Serif + Sans" Noto Serif TC Noto Sans TC "chinese, traditional, elegant, cultural, multilingual, readable" "Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets" "https://fonts.google.com/share?selection.family=Noto+Sans+TC:wght@300;400;500;700 Noto+Serif+TC:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');" "fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }"
25 Chinese Simplified "Sans + Sans" Noto Sans SC Noto Sans SC "chinese, simplified, modern, professional, multilingual, readable" "Simplified Chinese sites, mainland China market, business apps" "https://fonts.google.com/share?selection.family=Noto+Sans+SC:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');" "fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }" "Simplified Chinese support. Clean modern look."
26 Arabic Elegant "Serif + Sans" Noto Naskh Arabic Noto Sans Arabic "arabic, elegant, traditional, cultural, RTL, readable" "Arabic sites, Middle East market, Islamic content, bilingual sites" "https://fonts.google.com/share?selection.family=Noto+Naskh+Arabic:wght@400;500;600;700 Noto+Sans+Arabic:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');" "fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }"
27 Thai Modern "Sans + Sans" Noto Sans Thai Noto Sans Thai "thai, modern, readable, clean, multilingual, accessible" "Thai sites, Southeast Asia, tourism, Thai restaurants" "https://fonts.google.com/share?selection.family=Noto+Sans+Thai:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');" "fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }" "Clean Thai typography. Excellent readability."
28 Hebrew Modern "Sans + Sans" Noto Sans Hebrew Noto Sans Hebrew "hebrew, modern, RTL, clean, professional, readable" "Hebrew sites, Israeli market, Jewish content, bilingual sites" "https://fonts.google.com/share?selection.family=Noto+Sans+Hebrew:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');" "fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }" "RTL support. Clean modern Hebrew typography."
29 Legal Professional "Serif + Sans" EB Garamond Lato "legal, professional, traditional, trustworthy, formal, authoritative" "Law firms, legal services, contracts, formal documents, government" "https://fonts.google.com/share?selection.family=EB+Garamond:wght@400;500;600;700 Lato:wght@300;400;700" "@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'] }"
30 Medical Clean "Sans + Sans" Figtree Noto Sans "medical, clean, accessible, professional, healthcare, trustworthy" "Healthcare, medical clinics, pharma, health apps, accessibility" "https://fonts.google.com/share?selection.family=Figtree:wght@300;400;500;600;700 Noto+Sans:wght@300;400;500;700" "@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'] }"
31 Financial Trust "Sans + Sans" IBM Plex Sans IBM Plex Sans "financial, trustworthy, professional, corporate, banking, serious" "Banks, finance, insurance, investment, fintech, enterprise" "https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700" "@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'] }" "IBM Plex conveys trust and professionalism. Excellent for data."
32 Real Estate Luxury "Serif + Sans" Cinzel Josefin Sans "real estate, luxury, elegant, sophisticated, property, premium" "Real estate, luxury properties, architecture, interior design" "https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600;700 Josefin+Sans:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');" "fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }"
33 Restaurant Menu "Serif + Sans" Playfair Display SC Karla "restaurant, menu, culinary, elegant, foodie, hospitality" "Restaurants, cafes, food blogs, culinary, hospitality" "https://fonts.google.com/share?selection.family=Karla:wght@300;400;500;600;700 Playfair+Display+SC:wght@400;700" "@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');" "fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }"
34 Art Deco "Display + Sans" Poiret One Didact Gothic "art deco, vintage, 1920s, elegant, decorative, gatsby" "Vintage events, art deco themes, luxury hotels, classic cocktails" "https://fonts.google.com/share?selection.family=Didact+Gothic Poiret+One" "@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');" "fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }"
35 Magazine Style "Serif + Sans" Libre Bodoni Public Sans "magazine, editorial, publishing, refined, journalism, print" "Magazines, online publications, editorial content, journalism" "https://fonts.google.com/share?selection.family=Libre+Bodoni:wght@400;500;600;700 Public+Sans:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');" "fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }"
36 Crypto/Web3 "Sans + Sans" Orbitron Exo 2 "crypto, web3, futuristic, tech, blockchain, digital" "Crypto platforms, NFT, blockchain, web3, futuristic tech" "https://fonts.google.com/share?selection.family=Exo+2:wght@300;400;500;600;700 Orbitron:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');" "fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }"
37 Gaming Bold "Display + Sans" Russo One Chakra Petch "gaming, bold, action, esports, competitive, energetic" "Gaming, esports, action games, competitive sports, entertainment" "https://fonts.google.com/share?selection.family=Chakra+Petch:wght@300;400;500;600;700 Russo+One" "@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');" "fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }"
38 Indie/Craft "Display + Sans" Amatic SC Cabin "indie, craft, handmade, artisan, organic, creative" "Craft brands, indie products, artisan, handmade, organic products" "https://fonts.google.com/share?selection.family=Amatic+SC:wght@400;700 Cabin:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');" "fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }"
39 Startup Bold "Sans + Sans" Clash Display Satoshi "startup, bold, modern, innovative, confident, dynamic" "Startups, pitch decks, product launches, bold brands" "https://fonts.google.com/share?selection.family=Outfit:wght@400;500;600;700 Rubik:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');" "fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }"
40 E-commerce Clean "Sans + Sans" Rubik Nunito Sans "ecommerce, clean, shopping, product, retail, conversion" "E-commerce, online stores, product pages, retail, shopping" "https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700 Rubik:wght@300;400;500;600;700" "@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');" "fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }"
41 Academic/Research "Serif + Sans" Crimson Pro Atkinson Hyperlegible "academic, research, scholarly, accessible, readable, educational" "Universities, research papers, academic journals, educational" "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700 Crimson+Pro:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');" "fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }"
42 Dashboard Data "Mono + Sans" Fira Code Fira Sans "dashboard, data, analytics, code, technical, precise" "Dashboards, analytics, data visualization, admin panels" "https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700 Fira+Sans:wght@300;400;500;600;700" "@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'] }"
43 Music/Entertainment "Display + Sans" Righteous Poppins "music, entertainment, fun, energetic, bold, performance" "Music platforms, entertainment, events, festivals, performers" "https://fonts.google.com/share?selection.family=Poppins:wght@300;400;500;600;700 Righteous" "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');" "fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }"
44 Minimalist Portfolio "Sans + Sans" Archivo Space Grotesk "minimal, portfolio, designer, creative, clean, artistic" "Design portfolios, creative professionals, minimalist brands" "https://fonts.google.com/share?selection.family=Archivo:wght@300;400;500;600;700 Space+Grotesk:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');" "fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }"
45 Kids/Education "Display + Sans" Baloo 2 Comic Neue "kids, education, playful, friendly, colorful, learning" "Children's apps, educational games, kid-friendly content" "https://fonts.google.com/share?selection.family=Baloo+2:wght@400;500;600;700 Comic+Neue:wght@300;400;700" "@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');" "fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }"
46 Wedding/Romance "Script + Serif" Great Vibes Cormorant Infant "wedding, romance, elegant, script, invitation, feminine" "Wedding sites, invitations, romantic brands, bridal" "https://fonts.google.com/share?selection.family=Cormorant+Infant:wght@300;400;500;600;700 Great+Vibes" "@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');" "fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }"
47 Science/Tech "Sans + Sans" Exo Roboto Mono "science, technology, research, data, futuristic, precise" "Science, research, tech documentation, data-heavy sites" "https://fonts.google.com/share?selection.family=Exo:wght@300;400;500;600;700 Roboto+Mono:wght@300;400;500;700" "@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');" "fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }"
48 Accessibility First "Sans + Sans" Atkinson Hyperlegible Atkinson Hyperlegible "accessible, readable, inclusive, WCAG, dyslexia-friendly, clear" "Accessibility-critical sites, government, healthcare, inclusive design" "https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700" "@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');" "fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }" "Designed for maximum legibility. Excellent for accessibility."
49 Sports/Fitness "Sans + Sans" Barlow Condensed Barlow "sports, fitness, athletic, energetic, condensed, action" "Sports, fitness, gyms, athletic brands, competition" "https://fonts.google.com/share?selection.family=Barlow+Condensed:wght@400;500;600;700 Barlow:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');" "fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }"
50 Luxury Minimalist "Serif + Sans" Bodoni Moda Jost "luxury, minimalist, high-end, sophisticated, refined, premium" "Luxury minimalist brands, high-end fashion, premium products" "https://fonts.google.com/share?selection.family=Bodoni+Moda:wght@400;500;600;700 Jost:wght@300;400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');" "fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }"
51 Tech/HUD Mono "Mono + Mono" Share Tech Mono Fira Code "tech, futuristic, hud, sci-fi, data, monospaced, precise" "Sci-fi interfaces, developer tools, cybersecurity, dashboards" "https://fonts.google.com/share?selection.family=Fira+Code:wght@300;400;500;600;700 Share+Tech+Mono" "@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');" "fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }"
52 Pixel Retro "Display + Sans" Press Start 2P VT323 "pixel, retro, gaming, 8-bit, nostalgic, arcade" "Pixel art games, retro websites, creative portfolios" "https://fonts.google.com/share?selection.family=Press+Start+2P VT323" "@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');" "fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }"
53 Neubrutalist Bold "Display + Sans" Lexend Mega Public Sans "bold, neubrutalist, loud, strong, geometric, quirky" "Neubrutalist designs, Gen Z brands, bold marketing" "https://fonts.google.com/share?selection.family=Lexend+Mega:wght@100..900 Public+Sans:wght@100..900" "@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');" "fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }"
54 Academic/Archival "Serif + Serif" EB Garamond Crimson Text "academic, old-school, university, research, serious, traditional" "University sites, archives, research papers, history" "https://fonts.google.com/share?selection.family=Crimson+Text:wght@400;600;700 EB+Garamond:wght@400;500;600;700;800" "@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');" "fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }"
55 Spatial Clear "Sans + Sans" Inter Inter "spatial, legible, glass, system, clean, neutral" "Spatial computing, AR/VR, glassmorphism interfaces" "https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600" "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');" "fontFamily: { sans: ['Inter', 'sans-serif'] }" "Optimized for readability on dynamic backgrounds."
56 Kinetic Motion "Display + Mono" Syncopate Space Mono "kinetic, motion, futuristic, speed, wide, tech" "Music festivals, automotive, high-energy brands" "https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700 Syncopate:wght@400;700" "@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');" "fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }"
57 Gen Z Brutal "Display + Sans" Anton Epilogue "brutal, loud, shouty, meme, internet, bold" "Gen Z marketing, streetwear, viral campaigns" "https://fonts.google.com/share?selection.family=Anton Epilogue:wght@400;500;600;700" "@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');" "fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] }"