آموزش جفت فونت ها(font pairings) در CSS

از جفت فونت ها برای طراحی های عالی استفاده می شود.

قواعدی برای جفت فونت ها

در زیر، چند قاعده ی اصلی برای ایجاد جفت فونت ها توضیح داده ایم:

1. مکمل بودن(Complement).

همیشه خوب است که جفت فونت هایی را پیدا کنیم که مکمل یکدیگر هستند. یک ترکیب فونت عالی باید هارمونی داشته باشد(هماهنگ باشد)، بدون اینکه خیلی شبیه باشند، یا خیلی متفاوت باشند. 

2. استفاده از فونت ابرخانواده ها(Font Superfamilies).

یک فونت ابرخانواده، مجموعه ای از فونت ها است که برای کار با یکدیگر طرحی شده اند. بنابراین، استفاده از فونت های مختلف، در داخل همان ابرخانواده ایمن است. بعنوان مثال، ابرخانوده ی Lucida شامل فونت های زیر است:

1. Lucida Sans
2. Lucida Serif
3. Lucida Typewriter Sans
4. Lucida Typewriter Serif
5. Lucida Math

3. کنتراست بسیار مهم است.

دو فونت که خیلی شبیه هم هستند اغلب با هم تداخل پیدا می کنند.اما، کنتراست ها، اگر به روش درست انجام شوند، بهترین نتیجه را در هر فونت به ارمغان می آورند. مثال: ترکیب فونت serif با sans serif یک ترکیب یک ترکیب شناخته شده است. یک ابرخانواده ی قوی، شامل هردو نوع serif و sans serif از یک فونت است(مانند Lucida و Lucida Sans).

4. فقط یک رئیس را انتخاب کنید.

فقط یک فونت باید رئیس باشد. این یک سلسله مراتب برای فونت های روی صفحه ی شما برقرار می کند. این را می توان با تغییر اندازه، وزن و رنگ به دست آورد.

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

 در زیر، برخی جفت فونت های محبوب را که برای بسیاری از برندها و زمینه ها مناسب است، نشان داده ایم.

فونت های Georgia و Verdana

ترکیب Georgia و Verdana یک ترکیب قدیمی(کلاسیک) است. این ترکیب، همچنین به استانداردهای فونت ایمن وب نیز پایبند است:

body  {
  font-family: Verdana, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Georgia, serif;
  font-size: 46px;  
}

ترکیب فونت های Helvetica و Garamond

ترکیب Helvetica و Garamond یک ترکیب قدیمی(کلاسیک) دیگر است که از فونت های ایمن وب استفاده می کند:

body {
  font-family: Garamond, serif;
  font-size: 16px;  
}

h1 {
  font-family: Helvetica, sans-serif;
  font-size: 46px;  
}

محبوب ترین جفت فونت های گوگل

اگر نمی خواهید از فونت های استاندارد HTML استفاده کنید، می توانید از فونت های گوگل استفاده کنید. استفاده از فونت های گوگل، رایگان است و می توانید فونت خود را از میان بیش از 1000 فونت، انتخاب کنید. در زیر، برخی از فونت های محبوب گوگل را مشاهده می کنید.

فونت Merriweather و Open Sans

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Merriweather, serif;
  font-size: 46px;
}

فونت Ubuntu و Lora

body {
  font-family: Lora, serif;
  font-size: 16px;  
}

h1 {
  font-family: Ubuntu, sans-serif;
  font-size: 46px;  
}

فونت های Abril Fatface و Poppins

body {
  font-family: Poppins, sans-serif;
  font-size: 16px;  
}

h1 {
  font-family: 'Abril Fatface', serif;
  font-size: 46px;  
}

فونت Cinzel و Fauna One

body {
  font-family: 'Fauna One', serif;
  font-size: 16px;  
}

h1 {
  font-family: Cinzel, serif;
  font-size: 46px;  
}

فونت Fjalla One و Libre Baskerville

body {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;  
}

h1 {
  font-family: 'Fjalla One', sans-serif;
  font-size: 46px;  
}

فونت های Space Mono و Muli

body {
  font-family: Muli, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: "Space Mono", monospace;
  font-size: 46px;
}

فونت Spectral و Rubik

body {
  font-family: Rubik, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Spectral, serif;
  font-size: 46px;
}

فونت Oswald و Noto Sans

body {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Oswald, sans-serif;
  font-size: 46px;
}