ترکیب فونت ها (Font Pairings)
«ترکیب فونت ها (Font Pairings)» یعنی کنار هم گذاشتن دو فونت هماهنگ. هدف، خوانایی بهتر و هویت منسجم است. مثل لباس ورزشی ست؛ رنگ ها باید جور باشند، نه یکسانِ کامل و نه متضاد شدید.
قوانین پایه ترکیب فونت
مکمل (Complement): دو فونت باید هم نوا باشند. نه خیلی شبیه، نه خیلی دور.
ابرخانواده (Superfamily): مجموعه ای از فونت های هم خانواده است. استفاده از اعضای همان خانواده امن است.
کنتراست (Contrast): تفاوت کنترل شده عالی است؛ مثل serif کنار sans-serif.
یک رئیس انتخاب کن: یکی از فونت ها باید هدینگ ها را رهبری کند. با اندازه، وزن و رنگ سلسله مراتب بساز.
یک رئیس انتخاب کن
اینجا «Georgia» رئیس است و متن بدنه با «Verdana» می آید.
نمونه: Georgia رئیس، Verdana بدنه
<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style>
نکته: برای دریافت فونت های بیشتر، از فونت گوگل کمک بگیر. همچنین همیشه جایگزین فونت را آخر بنویس.
جفت های کلاسیک وب سیف
Georgia + Verdana
<style>
h1 {
font-family: Georgia, serif;
font-size: 46px;
}
p {
font-family: Verdana, sans-serif;
font-size: 16px;
}
</style>
Helvetica + Garamond
<style>
h1 {
font-family: Helvetica, sans-serif;
font-size: 46px;
}
p {
font-family: Garamond, serif;
font-size: 16px;
}
</style>
جفت های محبوب با فونت گوگل
اگر فونت های استاندارد کافی نیستند، از Google Fonts استفاده کن. رایگان است و بسیار متنوع.
Merriweather + Open Sans
<style>
h1 {
font-family: Merriweather, serif;
font-size: 46px;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
</style>
Ubuntu + Lora
<style>
h1 {
font-family: Ubuntu, sans-serif;
font-size: 46px;
}
p {
font-family: Lora, serif;
font-size: 16px;
}
</style>
Abril Fatface + Poppins
<style>
h1 {
font-family: "Abril Fatface", serif;
font-size: 46px;
}
p {
font-family: Poppins, sans-serif;
font-size: 16px;
}
</style>
Cinzel + Fauna One
<style>
h1 {
font-family: Cinzel, serif;
font-size: 46px;
}
p {
font-family: "Fauna One", serif;
font-size: 16px;
}
</style>
Fjalla One + Libre Baskerville
<style>
h1 {
font-family: "Fjalla One", sans-serif;
font-size: 46px;
}
p {
font-family: "Libre Baskerville", serif;
font-size: 16px;
}
</style>
Space Mono + Muli
<style>
h1 {
font-family: "Space Mono", monospace;
font-size: 46px;
}
p {
font-family: Muli, sans-serif;
font-size: 16px;
}
</style>
Spectral + Rubik
<style>
h1 {
font-family: Spectral, serif;
font-size: 46px;
}
p {
font-family: Rubik, sans-serif;
font-size: 16px;
}
</style>
Oswald + Noto Sans
<style>
h1 {
font-family: Oswald, sans-serif;
font-size: 46px;
}
p {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
}
</style>
گام های عملی سریع
- نوع متن را مشخص کن؛ هدینگ یا بدنه.
- یک رئیس انتخاب کن؛ معمولاً برای هدینگ.
- کنتراست منطقی بساز؛ مثلاً serif کنار sans-serif.
- اندازه و وزن را تست کن.
- Fallback را آخر زنجیره بگذار.
جمع بندی سریع
- هم نوا ولی متفاوت انتخاب کن.
- ابرخانواده ها امن ترند.
- یک فونت رئیس باشد.
- کنتراست سنجیده، خوانایی بهتر.
- Fallback را فراموش نکن.