اما مانند بسیاری از جنبه‌های طراحی، تایپوگرافی قوانینی دارد که به شما کمک می‌کند تا جفت کردن حروف کامل را کمی آسان‌تر کنید. ما قصد داریم آنچه را که باید در مورد ترکیب فونت ها بدانید را به شما نشان می دهیم و چند ترکیب فونت عالی را به شما ارائه می دهیم که می توانید در کار خود از آنها استفاده کنید.

نکاتی برای ترکیب فونت ها در طراحی وب

1. از فونت هایی استفاده کنید که تناژهای متفاوتی دارند

نوشتن می تواند احساسات را بیان کند. حروفی که برای نمایش کلمات استفاده می کنیم نیز بر ادراک ما تأثیر می گذارد. برخی از فونت ها سختگیرانه و تجاری هستند، در حالی که برخی دیگر شاد و غیررسمی هستند. تایپ‌فیس‌ها هویت‌های متمایزی دارند که می‌توانند به کلماتی که نمایش می‌دهند معنی بیافزایند. هنگام انتخاب فونت های وب، ترکیب تایپوگرافی با رنگ های مختلف تضادهای بصری دلپذیری را اضافه می کند.

هنگام انتخاب بهترین جفت فونت ها، ابتدا روحیه اینکه یک وب سایت چه کسی یا چه چیزی را نشان می دهد را در نظر بگیرید. یک حروف حباب دار ممکن است برای یک شرکت اسباب بازی کار کند، اما در وب سایت یک شرکت حقوقی نامناسب به نظر می رسد. از طرف دیگر، یک طراحی وب برای چیزهای سبک دلخواه درگیر جدی ترین سریف ها می شود.

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

این الگو با استفاده از Webflow برای یک شرکت تولید آب نبات خیالی از حروف چاپ Lovelace و حروف خیالی و مدرن Erotique برای سرصفحه های خود استفاده می کند. پشتیبانی از محتوای بدنه از حروف مرسوم‌تر مگابایتی استفاده می‌کند. فونت ها شخصیت های متفاوتی دارند اما با هم هماهنگ هستند.

از استفاده از تایپوگرافی متضاد در طراحی وب خود نترسید – گاهی اوقات کنار هم قرار گرفتن می تواند محتوای شما را برجسته کند.

2. با جفت حروف، کنتراست ایجاد کنید – اما نه تضاد زیاد

جفت فونت ها باید به طور قابل توجهی متفاوت باشند – برای مثال، از یک تایپ sans serif در هدر استفاده نکنید که به طور قابل توجهی شبیه به یک sans serif است که در متن اصلی استفاده می کنید. شما می‌خواهید ترکیب‌های متمایز با حروفی که از نظر بصری متفاوت هستند، اما مکمل یکدیگر باشند.

چه اتفاقی می افتد اگر یک تایپ فیس با شکوفایی خوشنویسی مانند Great Vibes را انتخاب کنیم و آن را با سریفی مانند Merriweather ترکیب کنیم؟ در نهایت با حس کنتراست مواجه می شویم که چندان چشم نواز نیست.

شکوفا شدن و حلقه‌های Great Vibes نرمی و حسی از پیچیدگی دارد، در حالی که Merriweather یک تایپ بی‌معنی با فرمالیته‌ای است که با حروف سریف آن منتقل می‌شود. در اینجا، کنتراست بیش از حد عالی است که ترکیب کار نمی کند.

بیایید به یک جفت کردن فونت رضایت‌بخش‌تر برویم. در اینجا در هدر، ما از Vollkorn استفاده می کنیم ، یک تایپ سریف ظریف و بازیگوش. ما آن را با Open Sans ، یک sans serif خنثی‌تر و ساده‌تر جفت کرده‌ایم . این جفت سازی به خوبی کار می کند زیرا اگرچه کنتراست وجود دارد، اما ظرافت هر دو تایپ فیس آنها را از نظر بصری تکمیل می کند.

3. حروف مختلف را به سه یا کمتر محدود کنید

در اکثر طرح ها، شما از یک تایپ وب برای عنوان و دیگری برای بدنه استفاده می کنید. همچنین ممکن است مکان‌هایی در چیدمان داشته باشید که از حروف دستی یا تایپوگرافی شیک‌تر برای اهداف تزئینی استفاده می‌کنید. مهم نیست که چقدر با تمام فونت های رایگان موجود وسوسه شده اید، برای یک وب سایت به بیش از سه تایپ فیس نیاز ندارید.

بسیاری از طراحان ترجیح می دهند از یک خانواده حروف تایپ برای کار خود استفاده کنند. سوپرخانواده گروهی از حروف چاپی است که همه به هم مرتبط هستند. ممکن است دارای تغییرات سبکی مانند ایتالیک، سبک تا سنگین، نسخه‌های سریف و سان‌سریف و همچنین انواع دیگر باشد. بهترین چیز در مورد سوپرخانواده ها این است که آنها حدس و گمان را از یافتن فونت های مکمل حذف می کنند، زیرا آنها با در نظر گرفتن سازگاری طراحی شده اند.

سوپرخانواده ها استفاده از یک تایپ فیس را به روش های مختلف ممکن می سازند. نگاهی به این انتخاب از ابرخانواده Roboto بیندازید. تفاوت بسیار زیادی بین ظرافت Thin 100 Italic و اعلامیه قوی ارائه شده توسط Regular 400 وجود دارد.

ابرخانواده‌های تایپ‌فیس گزینه‌های فونت زیادی را در اختیار شما قرار می‌دهند تا با آن‌ها بازی کنید، در حالی که همچنان به یک سبک تایپ‌فیس واحد پایبند هستید.

4. ارتباط سلسله مراتب بصری از طریق جفت کردن فونت

Equitist ، یک وب سایت مراقبت های بهداشتی که با Webflow ساخته شده است ، سلسله مراتب خود را از طریق سبک های حروف، اندازه و رنگ های مختلف به اشتراک می گذارد.

می توانید از تایپوگرافی برای ارسال سیگنال های بصری در مورد اهمیت بخش های مختلف محتوا استفاده کنید. سرفصل‌ها باید سنگین‌ترین ضربه بصری را داشته باشند، به دنبال آن عناوین فرعی و سپس کپی متنی قرار بگیرند. از ترکیب فونت های خود استفاده کنید تا به محتوای خود حس ساختاری واضحی بدهید.

از اندازه فونت برای نشان دادن نظم استفاده کنید

این یکی راحته. بزرگ‌ترین نوع حروف، چیزی را نشان می‌دهد که اولویت دارد، با اندازه‌های نزولی نشان‌دهنده سلسله مراتب محتوا. استفاده از تمام حروف بزرگ نیز در برجسته کردن عناصر مهم مانند فراخوانی برای اقدام به خوبی کار می کند. اما مطمئن شوید که از تمام حروف‌ها در حد اعتدال استفاده می‌کنید – هیچ‌کس نمی‌خواهد احساس کند که یک وب‌سایت سر آنها فریاد می‌زند.

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

با وزن های مختلف آزمایش کنید

این وب سایت برای آژانس Babel که با Webflow ساخته شده است، همه چیز را با وزن حروف سبک تر و سنگین تر ترکیب می کند.

وزن های سنگین تر نشان دهنده اهمیت هستند، در حالی که وزن های سبک تر نشان دهنده یک پله پایین تر در سلسله مراتب محتوا هستند. همانطور که در سوپرخانواده Roboto دیدیم، می‌توانید با تغییر وزن یک فونت، کارهای زیادی انجام دهید.

رنگ های فونت را تغییر دهید

در حالی که نمی خواهید طرح خود را با یک کالیدوسکوپ از رنگ های متضاد پر کنید، تغییر سایه های متن می تواند به برجسته شدن برخی کلمات کمک کند. تغییرات روشن‌تر و تیره‌تر حس کنتراست خوبی ایجاد می‌کنند، با سایه‌های تیره‌تر نشان‌دهنده نسخه‌ای است که باید ابتدا خوانده شود. هنگام آزمایش با رنگ های فونت، مطمئن شوید که در پس زمینه گم نشوند.

تایپ فیس هایی که باید هنگام ایجاد ترکیب فونت در نظر بگیرید

اکنون که اصول تایپوگرافی را که باید در نظر داشته باشید توضیح دادیم، بیایید نگاهی به دسته بندی اصلی حروف و برخی از ترکیباتی که می توانید در کار طراحی خود استفاده کنید بیاندازیم.

سریف ها

حروف سرف برای خوانایی در چاپ توسعه داده شد و می توان آن را به اواخر دهه 1700 ردیابی کرد.

یک سریف یک خط یا خط کوچک است که به یک حرف اضافه شده است. سریف‌ها نشانه‌های بصری را ارائه می‌کنند که باعث می‌شود چشم‌های کسی به راحتی آن را دنبال کنند. حروف سرف اسکن متن را کارآمدتر می کند، به خصوص وقتی صحبت از تکه های بزرگ نوشته می شود، مانند صفحات کتاب.

در روزهای اولیه محاسبات، وضوح مانیتورهای اولیه به خوبی با تایپ‌های مبتنی بر سریف کار نمی‌کردند. اما مانیتورهای امروزی با وضوح بالا به طراحان گرافیک مجموعه‌ای از سریف‌ها را می‌دهند که می‌توانند با آنها کار کنند.

هنگام استفاده از یک سریف، همیشه آن را با فونت sans serif جفت کنید. حروف سرف معمولاً بیش از حد شبیه به هم هستند و جفت شدن فونت های نامناسبی را ایجاد می کنند.

سریف ها انعطاف پذیری زیادی را ارائه می دهند. خواندن آن‌ها در اندازه‌های کوچک و بزرگ فونت آسان است، و برای هر دو کپی بدنه و هدر ایده‌آل هستند.

ایده جفت کردن فونت: EB Garamond و Montserrat

در اینجا سرف EB Garamond را در اندازه کوچکتر در کپی بدنه گرفته ایم و آن را با مونتسرات در مقیاس بزرگتر در تیتر ترکیب کرده ایم. فونت‌های Serif برای تکه‌های بزرگ کپی زمانی که اندازه فونت کوچک‌تری دارند بهتر عمل می‌کنند.

ایده جفت کردن فونت: Libre Baskerville و Raleway

سری‌های برجسته‌تر و زاویه‌ای بودن Libre Baskerville به خوبی با خط نازک Raleway تضاد دارد.

بدون سریف

این به اندازه کافی ساده است – سان سریف ها فاقد خطوط اضافی هستند که سریف ها را تزئین می کنند. بدون سری‌ها را می‌توان در مقیاس کوچک‌تر برای متن پاراگراف یا متن استفاده کرد، یا می‌توان آن‌ها را با یک سریف در سرفصل‌ها ترکیب کرد.

ایده جفت کردن فونت: Open Sans و Lato

برخی از طراحان ممکن است فونت هایی مانند Open Sans و Helvetica را به دلیل استفاده بیش از حد از آنها مسخره کنند، اما آنها به دلایلی محبوب هستند. Open Sans یک فونت ساده و در عین حال خوشایند است، به این معنی که به خوبی با بسیاری از فونت های دیگر ترکیب می شود. آن را مانند بستنی وانیلی در نظر بگیرید – این یک پایه محکم برای ساخت است.

در اینجا ما از Open Sans در هدر، به همراه Lato در کپی بدنه، یک نوع sans serif دیگر استفاده می‌کنیم.

نمایش فونت ها

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

ایده جفت کردن فونت: Bubblegum Sans و Open Sans

Bubblegum Sans دارای حروف تلطیف شده شادی آور است که با بی طرفی Open Sans یک جفت عالی را ایجاد می کند .

ایده جفت کردن فونت: Poiret One و Lato

اگر به دنبال کمی پیچیدگی هستید، حروف ظریف با الهام از هنر دکو و خط خطی نازک Poiret One آن را به یک فونت مدرن عالی تبدیل کرده است. جفت کردن این فونت با حروف ظریف تری مانند Lato حس کنتراست ایجاد می کند که همچنان به خوبی با هم کار می کند.

حروف تک فضایی

هر کاراکتر در یک تایپ تک فاصله دارای عرض یکسان است. این اندازه‌گیری ثابت افقی، آنها را از حروفی که دارای عرض متغیر هستند متمایز می‌کند و به آن‌ها حس سازگاری قوی می‌دهد. در روزهای اولیه محاسبات، فونت‌های تک فضایی به دلیل سادگی و توانایی ظاهری خوب در نمایشگرهای اولیه با وضوح پایین، به طور گسترده مورد استفاده قرار می‌گرفتند.

ایده جفت کردن فونت: IBM Plex Mono و PT Sans

IBM Plex Mono که به‌عنوان ادای احترام به IBM طراحی شده است، حروفی مدرن با هویت بصری است که برای استارت‌آپ‌ها و سایرین در حوزه فناوری عالی است. جفت کردن این فونت تک فاصله با PT Sans – که هندسه واضح تری دارد – حس خوبی از کنتراست و سلسله مراتب بصری ایجاد می کند.

ایده جفت کردن فونت: Roboto Mono و Roboto

ما Roboto را به دلیل خوانایی بالای آن دوست داریم. این ترکیب فونت که Roboto Mono را با نسخه استاندارد جفت می‌کند، برای چشم آسان است.