CSS – جفت کردن فونت‌ها (Font Pairings)

قوانین ترکیب فونت‌ها

برای داشتن طراحی زیبا، ترکیب درست فونت‌ها بسیار مهم است. در ادامه چند قانون اساسی برای ترکیب فونت‌ها ارائه شده است:

  1. تکمیل‌کننده بودن

    • همیشه بهتر است فونت‌هایی انتخاب کنید که با یکدیگر هم‌خوانی داشته باشند. ترکیب درست فونت‌ها باید هم‌زمان هماهنگ باشند و نه خیلی شبیه به هم و نه خیلی متفاوت.
  2. استفاده از سوپرفونت‌ها

    • یک سوپرفونت مجموعه‌ای از فونت‌ها است که برای هماهنگی با یکدیگر طراحی شده‌اند. استفاده از فونت‌های مختلف از یک سوپرفونت انتخابی امن است. برای مثال سوپرفونت Lucida شامل فونت‌های Lucida Sans، Lucida Serif و غیره می‌شود.
  3. تضاد کلید است

    • فونت‌هایی که خیلی به هم شبیه هستند، معمولاً با یکدیگر تداخل دارند. اما تضاد به روش درست می‌تواند بهترین جنبه‌های هر فونت را نمایان کند. یک ترکیب شناخته‌شده استفاده از فونت‌های serif و sans-serif است.
  4. یک فونت باید رئیس باشد

    • همیشه یک فونت باید نقش اصلی را داشته باشد تا یک سلسله مراتب برای فونت‌ها در صفحه ایجاد کند. این کار می‌تواند با تغییر اندازه، وزن و رنگ انجام شود.

مثال: ترکیب فونت‌ها

در این مثال فونت “Georgia” رئیس است:

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: ترکیب کلاسیکی که به استانداردهای فونت‌های وب ایمن پایبند است.
  • Helvetica و Garamond: ترکیبی دیگر از فونت‌های وب ایمن.

ترکیب فونت‌های Google

  • Merriweather و Open Sans: Merriweather برای تیترها و Open Sans برای متن.
  • Ubuntu و Lora: Ubuntu برای تیترها و Lora برای متن.
  • Abril Fatface و Poppins: Abril Fatface برای تیترها و Poppins برای متن.
  • Cinzel و Fauna One: Cinzel برای تیترها و Fauna One برای متن.
  • Fjalla One و Libre Baskerville: Fjalla One برای تیترها و Libre Baskerville برای متن.
  • Space Mono و Muli: Space Mono برای تیترها و Muli برای متن.
  • Spectral و Rubik: Spectral برای تیترها و Rubik برای متن.
  • Oswald و Noto Sans: Oswald برای تیترها و Noto Sans برای متن.

نکته مهم

ترکیب فونت‌ها می‌تواند تأثیر بسزایی در طراحی وب داشته باشد، اما مراقب باشید که از تعداد زیادی فونت در یک صفحه استفاده نکنید، زیرا ممکن است باعث کندی بارگذاری صفحه شود.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.