tinyfont/font-combinations.html at main · base64converter/tinyfont · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Combinations for Specific Use Cases | Tinyfont</title>
    <meta name="description" content="Discover perfect Google Font combinations for resumes, presentations, blogs, and more. Find harmonious font pairings for any design project.">
    <meta name="keywords" content="font combinations, font pairings, google fonts, resume fonts, presentation fonts, blog fonts, headline fonts, body fonts">
    <meta name="author" content="Prasoon">
    <link rel="canonical" href="https://tinyfont.me/font-combinations.html">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://tinyfont.me/font-combinations.html">
    <meta property="og:title" content="Font Combinations for Specific Use Cases | Tinyfont">
    <meta property="og:description" content="Discover perfect Google Font combinations for resumes, presentations, blogs, and more. Find harmonious font pairings for any design project.">
    <meta property="og:image" content="https://tinyfont.me/assets/images/og/font-combinations.png">
    <meta property="og:image:alt" content="An icon representing font combinations, showing two different font styles.">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://tinyfont.me/font-combinations.html">
    <meta name="twitter:title" content="Font Combinations for Specific Use Cases | Tinyfont">
    <meta name="twitter:description" content="Discover perfect Google Font combinations for resumes, presentations, blogs, and more. Find harmonious font pairings for any design project.">
    <meta name="twitter:image" content="https://tinyfont.me/assets/images/og/font-combinations.png">

    <link rel="stylesheet" href="assets/css/main.css">
    <script type="application/ld+json">{
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Font Combinations for Specific Use Cases",
      "url": "https://tinyfont.me/font-combinations.html",
      "description": "Find harmonious Google Font pairings for any design project, tailored to specific use cases.",
      "author": {
        "@type": "Person",
        "name": "Prasoon"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Tinyfont.me"
      },
      "applicationCategory": "Utility",
      "keywords": "font combinations, font pairings, google fonts, resume fonts, presentation fonts"
    }</script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9534887202409405" crossorigin="anonymous"></script>
    <!-- ANALYTICS_PLACEHOLDER -->
</head>
<body>
    <header class="site-header"><div class="container">
        <a href="./index.html" class="logo">TinyFont</a>
        <nav class="main-nav" aria-label="Main Navigation"><ul><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Font Discovery</a><div class="dropdown-menu"><a href="./live-preview-tool.html">Live Google Font Previewer</a><a href="./font-comparison-tool.html">Compare Fonts Instantly</a><a href="./variable-font-finder.html">Discover Variable Google Fonts</a><a href="./language-support-finder.html">Find Fonts for Any Language</a></div></li><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Design & Typography</a><div class="dropdown-menu"><a href="./font-pairing-generator.html">Generate Beautiful Font Pairings</a><a href="./logo-fonts-tool.html">Find the Perfect Font for Your Logo</a><a href="./font-color-tester.html">Test Font Color Contrast</a><a href="./font-performance-checker.html">Analyze Font Performance Impact</a></div></li><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Performance & Web</a><div class="dropdown-menu"><a href="./google-fonts-css-generator.html">Generate Optimized Font CSS</a><a href="./css-font-stack-generator.html">Create Bulletproof CSS Font Stacks</a><a href="./web-safe-fonts-checker.html">Web Safe Font Reference</a></div></li><li class="nav-item"><a href="#" class="nav-link" aria-haspopup="true">Guides</a><div class="dropdown-menu"><a href="./accessibility-checker.html">Check Font Accessibility</a><a href="./subset-text-optimizer.html">Font Subsetting Text Generator</a></div></li></ul></nav>
        <div class="header-controls">
            <button class="dark-mode-toggle" title="Toggle Dark Mode">🌙</button>
            <button class="mobile-nav-toggle" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle Navigation">☰</button>
        </div>
    </div></header>
    <main>
        <header class="page-header"><div class="container">
            <h1>Font Combinations for Specific Use Cases</h1>
            <p>Find the perfect Google Font pairings tailored for your specific design needs.</p>
        </div></header>
        <div class="container">
            <div class="content-section tool-container">
                <h2>Select a Use Case</h2>
                <div class="tool-wrapper">
                    <div class="control-group">
                        <label for="useCaseSelector">Choose a Scenario:</label>
                        <select id="useCaseSelector" class="tool-select">
                            <option value="">-- Select a Use Case --</option>
                            <option value="resume">Resume</option>
                            <option value="presentation">Presentation</option>
                            <option value="blog">Blog Post</option>
                            <option value="headline">Headline</option>
                            <option value="body">Body Text</option>
                            <option value="branding">Branding/Logo</option>
                        </select>
                    </div>
                    <div id="combinationDisplay" style="margin-top: 2rem;">
                        <!-- Font combination will be displayed here -->
                    </div>
                </div>
            </div>
            <section id="how-to" class="content-section">
                <h2>How to Use This Tool</h2>
                <p>1. **Select a Use Case:** Choose the design scenario that best fits your project from the dropdown menu.<br>2. **View Combinations:** The tool will instantly display recommended Google Font pairings for that specific use case.<br>3. **Preview & Copy:** See how the fonts look together and copy the CSS code to use them in your project.</p>
            </section>
            <section id="faqs" class="content-section">
                <h2>Frequently Asked Questions</h2>
                <p><strong>Q: How are these combinations chosen?</strong><br>A: Our combinations are curated based on design principles like contrast, harmony, and readability, considering the typical requirements of each use case.</p>
                <p><strong>Q: Can I use these fonts for free?</strong><br>A: Yes, all fonts suggested are from Google Fonts and are open-source, free for both personal and commercial use.</p>
                <p><strong>Q: What if I don't like the suggestions?</strong><br>A: These are recommendations to get you started. Feel free to experiment further with our other tools like the Font Pairing Generator or Live Previewer.</p>
            </section>
        </div>
    </main>
    <footer class="site-footer"><div class="container"><div class="footer-grid"><div class="footer-column"><h4>Font Discovery</h4><ul><li><a href="./live-preview-tool.html">Live Google Font Previewer</a></li><li><a href="./font-comparison-tool.html">Compare Fonts Instantly</a></li><li><a href="./variable-font-finder.html">Discover Variable Google Fonts</a></li><li><a href="./language-support-finder.html">Find Fonts for Any Language</a></li></ul></div><div class="footer-column"><h4>Design & Typography</h4><ul><li><a href="./font-pairing-generator.html">Generate Beautiful Font Pairings</a></li><li><a href="./logo-fonts-tool.html">Find the Perfect Font for Your Logo</a></li><li><a href="./font-color-tester.html">Test Font Color Contrast</a></li><li><a href="./font-performance-checker.html">Analyze Font Performance Impact</a></li></ul></div><div class="footer-column"><h4>Performance & Web</h4><ul><li><a href="./google-fonts-css-generator.html">Generate Optimized Font CSS</a></li><li><a href="./css-font-stack-generator.html">Create Bulletproof CSS Font Stacks</a></li><li><a href="./web-safe-fonts-checker.html">Web Safe Font Reference</a></li><li><a href="./google-fonts-downloader.html">Google Fonts Downloader</a></li></ul></div><div class="footer-column"><h4>Guides</h4><ul><li><a href="./accessibility-checker.html">Check Font Accessibility</a></li><li><a href="./subset-text-optimizer.html">Font Subsetting Text Generator</a></li></ul></div></div>
        <div class="footer-bottom">
            <p>&copy; 2025 Prasoon. Built with ❤️ at TinyFont.me.</p>
            <p>Last updated: August 21, 2025</p>
        </div>
    </div></footer>
    <script src="assets/js/main.js"></script>
    <script>
        const useCaseSelector = document.getElementById('useCaseSelector');
        const combinationDisplay = document.getElementById('combinationDisplay');

        const fontCombinations = [
            {
                useCase: 'resume',
                headingFont: 'Roboto Slab',
                headingWeight: '700',
                bodyFont: 'Roboto',
                bodyWeight: '400',
                description: 'A professional and clean combination for resumes, ensuring readability and a modern look.'
            },
            {
                useCase: 'presentation',
                headingFont: 'Montserrat',
                headingWeight: '700',
                bodyFont: 'Open Sans',
                bodyWeight: '400',
                description: 'Clear and legible fonts for impactful presentations, maintaining clarity even at a distance.'
            },
            {
                useCase: 'blog',
                headingFont: 'Merriweather',
                headingWeight: '700',
                bodyFont: 'Lato',
                bodyWeight: '400',
                description: 'A classic and comfortable pairing for blog posts, prioritizing long-form reading experience.'
            },
            {
                useCase: 'headline',
                headingFont: 'Oswald',
                headingWeight: '700',
                bodyFont: 'Roboto',
                bodyWeight: '400',
                description: 'Bold and impactful fonts designed to grab attention for headlines.'
            },
            {
                useCase: 'body',
                headingFont: 'Playfair Display',
                headingWeight: '700',
                bodyFont: 'Lora',
                bodyWeight: '400',
                description: 'Elegant and highly readable fonts optimized for extensive body text.'
            },
            {
                useCase: 'branding',
                headingFont: 'Poppins',
                headingWeight: '600',
                bodyFont: 'Source Sans Pro',
                bodyWeight: '400',
                description: 'Versatile and modern fonts suitable for a wide range of branding and logo applications.'
            }
        ];

        function displayCombination(combination) {
            if (!combination) {
                combinationDisplay.innerHTML = '<p>Please select a use case to see font combinations.</p>';
                return;
            }

            const headingStyle = `font-family: '${combination.headingFont}', var(--font-family-heading); font-weight: ${combination.headingWeight}; font-size: 2.5rem; margin-bottom: 0.5rem;`;
            const bodyStyle = `font-family: '${combination.bodyFont}', var(--font-family-sans); font-weight: ${combination.bodyWeight}; font-size: 1.1rem; line-height: 1.6;`;

            const googleFontsLink = `https://fonts.googleapis.com/css2?family=${combination.headingFont.replace(/ /g, '+')}:wght@${combination.headingWeight}&family=${combination.bodyFont.replace(/ /g, '+')}:wght@${combination.bodyWeight}&display=swap`;

            const cssSnippet = `h1, h2, h3, h4 {
  font-family: '${combination.headingFont}', serif;
  font-weight: ${combination.headingWeight};
}

body {
  font-family: '${combination.bodyFont}', sans-serif;
  font-weight: ${combination.bodyWeight};
}`; // Simplified for example

            combinationDisplay.innerHTML = `
                <h3>${combination.description}</h3>
                <div style="border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 8px; background-color: var(--card-bg); margin-bottom: 1.5rem;">
                    <p style="${headingStyle}">Heading: ${combination.headingFont}</p>
                    <p style="${bodyStyle}">Body: ${combination.bodyFont}</p>
                    <p style="${bodyStyle}">The quick brown fox jumps over the lazy dog.</p>
                </div>
                <h4>Google Fonts Link</h4>
                <pre><code class="language-html">&lt;link rel="stylesheet" href="${googleFontsLink}"&gt;</code></pre>
                <h4>CSS Snippet</h4>
                <pre><code class="language-css">${cssSnippet}</code></pre>
            `;

            // Dynamically load fonts for preview
            const link = document.createElement('link');
            link.href = googleFontsLink;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }

        useCaseSelector.addEventListener('change', (event) => {
            const selectedUseCase = event.target.value;
            const selectedCombination = fontCombinations.find(combo => combo.useCase === selectedUseCase);
            displayCombination(selectedCombination);
        });

        // Initial display if a default is set or after loading
        // displayCombination(fontCombinations[0]); // Optional: display first combo on load
    </script>
</body>
</html>