اصول تایپوگرافی

مقدمه

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

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

شما می‌تونید چک لیستی از این موارد تهیه کنید و هنگامی که متنی رو در یک طرح اجرا می‌کنید؛ در صورت رعایت هر یک از موارد رو علامت بزنید.

اصول تایپوگرافی

1- انتخاب فونت

انتخاب فونت اولین چیزیِ که باید در نظر بگیرید و احتمالاً بیش‌ترین زمان رو برای اون صرف کنید. این مرحله کمی خسته کننده است ولی در پایان کار ارزشش رو نشون می‌ده. برای آشنایی کامل با نحوه انتخاب فونت مقاله “نحوه انتخاب فونت مناسب” رو مطالعه کنید.

هنگام انتخاب فونت بهترِ چند نکته رو در نظر داشته‌باشید:

• انتخاب نوع فونت تا حد زیادی به بستر طراحی بستگی داره. برای مثال فونت‌های سِریف (serif) در چاپ خواناتر هستند اما در وب به دلیل پایین اومدن وضوح صفحه قابلیت خوانایی خود رو از دست می‌دند.
• استفاده از چندین فونت مختلف (بیش از دو فونت) در یک طرح توصیه نمی‌شه. (بهترِ از فونت‌هایی استفاده کنید که در چند وزن مختلف طراحی شده‌اند (مثل فونت وزیر، شبنم، ایران سنس، کلمه و …))
• استفاده از فونت‌های سریف و غیرسریف در کنار هم معمولاً نتیجه مطلوبی رو به وجود نمیارند.
• فونت‌های Script به فونت‌هایی گفته می‌شه که تقلیدی از دست نوشته‌ها هستند (مثل فونت دست نویس، مانلی، آوینی، مهرگان، شکاری، Beauty People، Calligraffiti، Rage و … ) و برای القای حس صمیمیت به کار می‌رند و فونت‌های Monospaced به فونت‌های هندسی گفته می‌شه (مثل کلمه، پیدا، سینما، دانا، Axis، Maxim، Gilroy و …) و برای طرح‌های مربوط به مکان‌های رسمی یا متن‌های جدی‌تر مناسب‌ترند.

2- اندازه نوشته‌ها

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

نکته مهم: مهم‌ترین عنصر لازم نیست بزرگترین عنصر باشه، فقط باید برجسته‌تر از عناصر دیگه باشه.

3- فاصله بین خطوط (Line hight)

فاصله بین خطوط یکی از جنبه‌های مهم تایپوگرافیِ که غالبا فراموش می‌شه. اغلب اوقات مقدار پیش فرض بدون هیچ فکری اعمال می‌شه. این امر می‌تونه خوندن یک متن رو دشوار کنه و خواننده در هنگام خوندن متن، خطوط رو اشتباه کنه.

در بعضی مواقع خطوط نزدیک به هم یا با فاصله زیاد می‌تونه زیبایی بصری ایجاد کنه؛ البته در مقادیر اندک و نه در متون طولانی.

نکته مهم: معمولا بهترِ فاصله بین خطوط رو ضریبی بین 1.5 تا 2 از سایز فونت (بسته به نوع فونت) در نظر بگیرید. مثلا اگر سایز فونت مورد استفاده شما 16px است، فاصله بین خطوط می‌تونه عددی بین 24 تا 32 باشه.  

4- تراز و نزدیکی (Alignment and proximity)

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

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

5-  خوانایی در تایپوگرافی (Readability)

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

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

6- کنتراست رنگ (Color contrast)

تضاد رنگ ممکنه به عنوان یک مفهوم ابتدایی به نظر برسه، اما در هنگام انتخاب رنگ برای تایپوگرافی و طراحی کلی، مواردی وجود داره که به راحتی نادیده گرفته می‌شند.
یکی از رایج‌ترین اشتباهات قرار دادن متن سیاه بر روی پس زمینه سفیدِ. تضاد رنگ سیاه و سفید بیش از حدِ! اگر به وب‌سایت‌های برتر (از لحاظ طراحی) نگاه کنید، متوجه می‌شید که متن سیاه موجود در زمینه سفید واقعاً سیاه نیست بلکه خاکستری است. یا نوشته سیاه بر روی زمینه طوسی قرار گرفته‌. این تکنیک، کنتراست رو کاهش می‌ده و خوندن رو برای بیننده آسون‌تر می‌کنه.

چطور بفهمیم رنگ هایی که استفاده کردیم کنتراست خوبی باهم دارند؟

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

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

پیشنهاد ویژه: برای آشنایی با مفهوم کنتراست، مقاله “آشنایی با مفهوم کنتراست و انواع آن” رو بخونید.

تشخیص کنتراست در فتوشاپ و ایلوستریتور

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

در فتوشاپ پس از اینکه همه لایه‌هایی که می‌خواهید کنتراست اون‌ها رو اندازه‌گیری کنید رو به یک لایه تبدیل کردید؛ به مسیر Image>Adjustments>Desaturate برید و عکستون رو به مقیاس خاکستری تبدیل کنید.

اگر می‌خواهید کنتراست را در وب سایت تمام شده بررسی کنید، از checkmycolours.com استفاده کنید.

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

در ویدیوهای زیر می‌تونید چندتا از تکنیک‌ها و ترفندهای زیباسازی متن رو یاد بگیرید.

• افکت متن یکپارچه

جمع‌بندی

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