PromptBase
🤖 GPT
Create 2 distinct font combinations to match your brand style. The prompt asks you for a description of your brand. Then it describes 2 font combinations (Title, Subhead, Body Text) using Google Fonts. Then, it generates the HTML code required to see the combinations in a browser and compare. You can modify the prompt for more combinations or different display styles. The prompt includes specific details such as text size and line height.
...more
$3.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Over 1 month ago
Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
267 ($0.00050 / call)
Example input
My brand is the largest professional services firm in the world. It's in the consulting and tax business. It's about simplicity and being human.
Example output
Great! Based on your brand's focus on simplicity and being human, I would recommend two font combinations that are easy to read and have a modern, professional look with a touch of warmth.
For the first font combination, I suggest using the following Google fonts:
Heading: Poppins (700)
Subheading: Open Sans (600)
Body text: Lato (regular)
Poppins is a modern sans-serif font with a clean and professional look that's great for headings. Open Sans is also a sans-serif font, but it has a slightly softer and more approachable look, which makes it a great fit for subheadings. Finally, Lato is a well-balanced sans-serif font that's easy to read and works well for body text.
For the second font combination, I recommend using the following Google fonts:
Heading: Roboto Slab (700)
Subheading: Montserrat (600)
Body text: Roboto (regular)
Roboto Slab is a serif font with a modern and elegant look that works well for headings. Montserrat is a sans-serif font with a slightly geometric feel that's great for subheadings. Finally, Roboto is a clean and easy-to-read sans-serif font that's perfect for body text.
Do these font combinations sound good to you?
A: Yes, they both sound good.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font Combinations for Your Brand</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:700|Open+Sans:600|Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Montserrat:600|Roboto" rel="stylesheet">
<style type="text/css">
/* Set up a common style for all text */
body {
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 0;
}
h1, h2, p {
margin: 20px 0;
}
/* First font combination */
.first-combination {
margin: 0 auto;
max-width: 500px;
text-align: left;
}
.first-combination h1 {
font-family: 'Poppins', sans-serif;
font-size: 36px;
line-height: 44px;
font-weight: 700;
}
.first-combination h2 {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
line-height: 30px;
font-weight: 600;
}
.first-combination p {
font-family: 'Lato', sans-serif;
}
/* Second font combination */
.second-combination {
margin-top: 40px;
margin-bottom: 40px;
margin: 0 auto;
max-width: 500px;
text-align: left;
}
.second-combination h1 {
font-family: 'Roboto Slab', serif;
font-size: 36px;
line-height: 44px;
font-weight: 700;
}
.second-combination h2 {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
line-height: 30px;
font-weight: 600;
}
.second-combination p {
font-family: 'Roboto', sans-serif;
}
/* Divider */
.divider {
border-top: 1px solid #ccc;
margin: 40px 0;
padding: 0;
}
</style>
</head>
<body>
<div class="first-combination">
<h1>Heading font: Poppins</h1>
<h2>Subheading font: Open Sans</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper, velit eget elementum euismod, felis tortor auctor risus, vel dapibus lorem massa eget nibh. Sed pretium commodo lacus quis ornare. </p>
<div class="divider"></div>
</div>
<div class="second-combination">
<h1>Heading font: Roboto Slab</h1>
<h2>Subheading font: Montserrat</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper, velit eget elementum euismod, felis tortor auctor risus, vel dapibus lorem massa eget nibh. Sed pretium commodo lacus quis ornare.</p>
<div class="divider"></div>
</div>
</body>
</html>