wangmian/ONE-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
54213c8a988515c0ff315d068b034ca02cf0605d
ONE-OS/axhub-make/skills/ui-ux-pro-max/data/typography.csv
王冕 a27e3b8e43 feat: sync full workspace including web modules, docs, and configurations to Gitea 
Optimized the root .gitignore to exclude virtual environments, node modules,
and temp folders to ensure clean and lightweight version tracking.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-09 18:12:25 +08:00

31 KiB
Raw Blame History

1NoFont Pairing NameCategoryHeading FontBody FontMood/Style KeywordsBest ForGoogle Fonts URLCSS ImportTailwind ConfigNotes
21Classic ElegantSerif + SansPlayfair DisplayInterelegant, luxury, sophisticated, timeless, premium, editorialLuxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commercehttps://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'] }High contrast between elegant heading and clean body. Perfect for luxury/premium.
32Modern ProfessionalSans + SansPoppinsOpen Sansmodern, professional, clean, corporate, friendly, approachableSaaS, corporate sites, business apps, startups, professional serviceshttps://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'] }Geometric Poppins for headings, humanist Open Sans for readability.
43Tech StartupSans + SansSpace GroteskDM Sanstech, startup, modern, innovative, bold, futuristicTech companies, startups, SaaS, developer tools, AI productshttps://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'] }Space Grotesk has unique character, DM Sans is highly readable.
54Editorial ClassicSerif + SerifCormorant GaramondLibre Baskervilleeditorial, classic, literary, traditional, refined, bookishPublishing, blogs, news sites, literary magazines, book covershttps://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'] }All-serif pairing for traditional editorial feel.
65Minimal SwissSans + SansInterInterminimal, clean, swiss, functional, neutral, professionalDashboards, admin panels, documentation, enterprise apps, design systemshttps://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.
76Playful CreativeDisplay + SansFredokaNunitoplayful, friendly, fun, creative, warm, approachableChildren's apps, educational, gaming, creative tools, entertainmenthttps://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'] }Rounded, friendly fonts perfect for playful UIs.
87Bold StatementDisplay + SansBebas NeueSource Sans 3bold, impactful, strong, dramatic, modern, headlinesMarketing sites, portfolios, agencies, event pages, sportshttps://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'] }Bebas Neue for large headlines only. All-caps display font.
98Wellness CalmSerif + SansLoraRalewaycalm, wellness, health, relaxing, natural, organicHealth apps, wellness, spa, meditation, yoga, organic brandshttps://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'] }Lora's organic curves with Raleway's elegant simplicity.
109Developer MonoMono + SansJetBrains MonoIBM Plex Sanscode, developer, technical, precise, functional, hackerDeveloper tools, documentation, code editors, tech blogs, CLI appshttps://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'] }JetBrains for code, IBM Plex for UI. Developer-focused.
1110Retro VintageDisplay + SerifAbril FatfaceMerriweatherretro, vintage, nostalgic, dramatic, decorative, boldVintage brands, breweries, restaurants, creative portfolios, postershttps://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'] }Abril Fatface for hero headlines only. High-impact vintage feel.
1211Geometric ModernSans + SansOutfitWork Sansgeometric, modern, clean, balanced, contemporary, versatileGeneral purpose, portfolios, agencies, modern brands, landing pageshttps://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'] }Both geometric but Outfit more distinctive for headings.
1312Luxury SerifSerif + SansCormorantMontserratluxury, high-end, fashion, elegant, refined, premiumFashion brands, luxury e-commerce, jewelry, high-end serviceshttps://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'] }Cormorant's elegance with Montserrat's geometric precision.
1413Friendly SaaSSans + SansPlus Jakarta SansPlus Jakarta Sansfriendly, modern, saas, clean, approachable, professionalSaaS products, web apps, dashboards, B2B, productivity toolshttps://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.
1514News EditorialSerif + SansNewsreaderRobotonews, editorial, journalism, trustworthy, readable, informativeNews sites, blogs, magazines, journalism, content-heavy siteshttps://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'] }Newsreader designed for long-form reading. Roboto for UI.
1615Handwritten CharmScript + SansCaveatQuicksandhandwritten, personal, friendly, casual, warm, charmingPersonal blogs, invitations, creative portfolios, lifestyle brandshttps://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'] }Use Caveat sparingly for accents. Quicksand for body.
1716Corporate TrustSans + SansLexendSource Sans 3corporate, trustworthy, accessible, readable, professional, cleanEnterprise, government, healthcare, finance, accessibility-focusedhttps://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'] }Lexend designed for readability. Excellent accessibility.
1817Brutalist RawMono + MonoSpace MonoSpace Monobrutalist, raw, technical, monospace, minimal, starkBrutalist designs, developer portfolios, experimental, tech arthttps://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.
1918Fashion ForwardSans + SansSyneManropefashion, avant-garde, creative, bold, artistic, edgyFashion brands, creative agencies, art galleries, design studioshttps://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'] }Syne's unique character for headlines. Manrope for readability.
2019Soft RoundedSans + SansVarela RoundNunito Sanssoft, rounded, friendly, approachable, warm, gentleChildren's products, pet apps, friendly brands, wellness, soft UIhttps://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'] }Both rounded and friendly. Perfect for soft UI designs.
2120Premium SansSans + SansSatoshiGeneral Sanspremium, modern, clean, sophisticated, versatile, balancedPremium brands, modern agencies, SaaS, portfolios, startupshttps://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.
2221Vietnamese FriendlySans + SansBe Vietnam ProNoto Sansvietnamese, international, readable, clean, multilingual, accessibleVietnamese sites, multilingual apps, international productshttps://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'] }Be Vietnam Pro excellent Vietnamese support. Noto as fallback.
2322Japanese ElegantSerif + SansNoto Serif JPNoto Sans JPjapanese, elegant, traditional, modern, multilingual, readableJapanese sites, Japanese restaurants, cultural sites, anime/mangahttps://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'] }Noto fonts excellent Japanese support. Traditional + modern feel.
2423Korean ModernSans + SansNoto Sans KRNoto Sans KRkorean, modern, clean, professional, multilingual, readableKorean sites, K-beauty, K-pop, Korean businesses, multilingualhttps://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.
2524Chinese TraditionalSerif + SansNoto Serif TCNoto Sans TCchinese, traditional, elegant, cultural, multilingual, readableTraditional Chinese sites, cultural content, Taiwan/Hong Kong marketshttps://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'] }Traditional Chinese character support. Elegant pairing.
2625Chinese SimplifiedSans + SansNoto Sans SCNoto Sans SCchinese, simplified, modern, professional, multilingual, readableSimplified Chinese sites, mainland China market, business appshttps://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.
2726Arabic ElegantSerif + SansNoto Naskh ArabicNoto Sans Arabicarabic, elegant, traditional, cultural, RTL, readableArabic sites, Middle East market, Islamic content, bilingual siteshttps://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'] }RTL support. Naskh for traditional, Sans for modern Arabic.
2827Thai ModernSans + SansNoto Sans ThaiNoto Sans Thaithai, modern, readable, clean, multilingual, accessibleThai sites, Southeast Asia, tourism, Thai restaurantshttps://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.
2928Hebrew ModernSans + SansNoto Sans HebrewNoto Sans Hebrewhebrew, modern, RTL, clean, professional, readableHebrew sites, Israeli market, Jewish content, bilingual siteshttps://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.
3029Legal ProfessionalSerif + SansEB GaramondLatolegal, professional, traditional, trustworthy, formal, authoritativeLaw firms, legal services, contracts, formal documents, governmenthttps://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'] }EB Garamond for authority. Lato for clean body text.
3130Medical CleanSans + SansFigtreeNoto Sansmedical, clean, accessible, professional, healthcare, trustworthyHealthcare, medical clinics, pharma, health apps, accessibilityhttps://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'] }Clean, accessible fonts for medical contexts.
3231Financial TrustSans + SansIBM Plex SansIBM Plex Sansfinancial, trustworthy, professional, corporate, banking, seriousBanks, finance, insurance, investment, fintech, enterprisehttps://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.
3332Real Estate LuxurySerif + SansCinzelJosefin Sansreal estate, luxury, elegant, sophisticated, property, premiumReal estate, luxury properties, architecture, interior designhttps://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'] }Cinzel's elegance for headlines. Josefin for modern body.
3433Restaurant MenuSerif + SansPlayfair Display SCKarlarestaurant, menu, culinary, elegant, foodie, hospitalityRestaurants, cafes, food blogs, culinary, hospitalityhttps://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'] }Small caps Playfair for menu headers. Karla for descriptions.
3534Art DecoDisplay + SansPoiret OneDidact Gothicart deco, vintage, 1920s, elegant, decorative, gatsbyVintage events, art deco themes, luxury hotels, classic cocktailshttps://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'] }Poiret One for art deco headlines only. Didact for body.
3635Magazine StyleSerif + SansLibre BodoniPublic Sansmagazine, editorial, publishing, refined, journalism, printMagazines, online publications, editorial content, journalismhttps://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'] }Bodoni's editorial elegance. Public Sans for clean UI.
3736Crypto/Web3Sans + SansOrbitronExo 2crypto, web3, futuristic, tech, blockchain, digitalCrypto platforms, NFT, blockchain, web3, futuristic techhttps://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'] }Orbitron for futuristic headers. Exo 2 for readable body.
3837Gaming BoldDisplay + SansRusso OneChakra Petchgaming, bold, action, esports, competitive, energeticGaming, esports, action games, competitive sports, entertainmenthttps://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'] }Russo One for impact. Chakra Petch for techy body text.
3938Indie/CraftDisplay + SansAmatic SCCabinindie, craft, handmade, artisan, organic, creativeCraft brands, indie products, artisan, handmade, organic productshttps://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'] }Amatic for handwritten feel. Cabin for readable body.
4039Startup BoldSans + SansClash DisplaySatoshistartup, bold, modern, innovative, confident, dynamicStartups, pitch decks, product launches, bold brandshttps://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'] }Note: Clash Display on Fontshare. Outfit as Google alternative.
4140E-commerce CleanSans + SansRubikNunito Sansecommerce, clean, shopping, product, retail, conversionE-commerce, online stores, product pages, retail, shoppinghttps://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'] }Clean readable fonts perfect for product descriptions.
4241Academic/ResearchSerif + SansCrimson ProAtkinson Hyperlegibleacademic, research, scholarly, accessible, readable, educationalUniversities, research papers, academic journals, educationalhttps://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'] }Crimson for scholarly headlines. Atkinson for accessibility.
4342Dashboard DataMono + SansFira CodeFira Sansdashboard, data, analytics, code, technical, preciseDashboards, analytics, data visualization, admin panelshttps://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'] }Fira family cohesion. Code for data, Sans for labels.
4443Music/EntertainmentDisplay + SansRighteousPoppinsmusic, entertainment, fun, energetic, bold, performanceMusic platforms, entertainment, events, festivals, performershttps://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'] }Righteous for bold entertainment headers. Poppins for body.
4544Minimalist PortfolioSans + SansArchivoSpace Groteskminimal, portfolio, designer, creative, clean, artisticDesign portfolios, creative professionals, minimalist brandshttps://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'] }Space Grotesk for distinctive headers. Archivo for clean body.
4645Kids/EducationDisplay + SansBaloo 2Comic Neuekids, education, playful, friendly, colorful, learningChildren's apps, educational games, kid-friendly contenthttps://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'] }Fun, playful fonts for children. Comic Neue is readable comic style.
4746Wedding/RomanceScript + SerifGreat VibesCormorant Infantwedding, romance, elegant, script, invitation, feminineWedding sites, invitations, romantic brands, bridalhttps://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'] }Great Vibes for elegant accents. Cormorant for readable text.
4847Science/TechSans + SansExoRoboto Monoscience, technology, research, data, futuristic, preciseScience, research, tech documentation, data-heavy siteshttps://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'] }Exo for modern tech feel. Roboto Mono for code/data.
4948Accessibility FirstSans + SansAtkinson HyperlegibleAtkinson Hyperlegibleaccessible, readable, inclusive, WCAG, dyslexia-friendly, clearAccessibility-critical sites, government, healthcare, inclusive designhttps://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.
5049Sports/FitnessSans + SansBarlow CondensedBarlowsports, fitness, athletic, energetic, condensed, actionSports, fitness, gyms, athletic brands, competitionhttps://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'] }Condensed for impact headlines. Regular Barlow for body.
5150Luxury MinimalistSerif + SansBodoni ModaJostluxury, minimalist, high-end, sophisticated, refined, premiumLuxury minimalist brands, high-end fashion, premium productshttps://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'] }Bodoni's high contrast elegance. Jost for geometric body.
5251Tech/HUD MonoMono + MonoShare Tech MonoFira Codetech, futuristic, hud, sci-fi, data, monospaced, preciseSci-fi interfaces, developer tools, cybersecurity, dashboardshttps://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'] }Share Tech Mono has that classic sci-fi look.
5352Pixel RetroDisplay + SansPress Start 2PVT323pixel, retro, gaming, 8-bit, nostalgic, arcadePixel art games, retro websites, creative portfolioshttps://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'] }Press Start 2P is very wide/large. VT323 is better for body text.
5453Neubrutalist BoldDisplay + SansLexend MegaPublic Sansbold, neubrutalist, loud, strong, geometric, quirkyNeubrutalist designs, Gen Z brands, bold marketinghttps://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'] }Lexend Mega has distinct character and variable weight.
5554Academic/ArchivalSerif + SerifEB GaramondCrimson Textacademic, old-school, university, research, serious, traditionalUniversity sites, archives, research papers, historyhttps://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'] }Classic academic aesthetic. Very legible.
5655Spatial ClearSans + SansInterInterspatial, legible, glass, system, clean, neutralSpatial computing, AR/VR, glassmorphism interfaceshttps://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.
5756Kinetic MotionDisplay + MonoSyncopateSpace Monokinetic, motion, futuristic, speed, wide, techMusic festivals, automotive, high-energy brandshttps://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'] }Syncopate's wide stance works well with motion effects.
5857Gen Z BrutalDisplay + SansAntonEpiloguebrutal, loud, shouty, meme, internet, boldGen Z marketing, streetwear, viral campaignshttps://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'] }Anton is impactful and condensed. Good for stickers/badges.
Reference in New Issue View Git Blame Copy Permalink