پث‌وایز

اصول طراحی بصری (Visual Design Fundamentals) · درس ۹ از ۱۲ · ۱۲ دقیقه

تایپوگرافی‌ای که خوب خونده می‌شه

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

سریف و بدون سریف

سریف (پاسردار)

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

بدون سریف

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

چیزی که واقعاً خوانایی رو تعیین می‌کنه

  • اندازه. متن اصلی تو چاپ حدود ۱۰ تا ۱۲ پوینت، روی صفحه‌نمایش حدود ۱۶ پیکسل، تو اسلاید ۲۴ پوینت به بالا. بعد بپرس واقعاً کجا خونده می‌شه: از ردیف آخر سالن، روی دیوار، یا با گوشی زیر آفتاب.
  • فاصله‌ی خط. برای متن اصلی حدود ۱٫۴ تا ۱٫۶ برابر اندازه‌ی فونت. برای تیترهای درشت کمتر.
  • طول خط. تقریباً ۴۵ تا ۷۵ کاراکتر تو هر خط.
  • تراز. به سمتی تراز کن که خوندن ازش شروع می‌شه و لبه‌ی دور رو دندونه‌دار بذار، مثل درس ۳. متن تراز از دو طرف روی خط‌های کوتاه، رودخونه‌های زشت سفید درست می‌کنه.
  • اینکه کدوم فونت. آخر از همه و کم‌اهمیت‌ترین. تقریباً هر خانواده‌ی شناخته‌شده‌ای که همین الان داری، برای کاری که می‌کنی به‌اندازه‌ی کافی خوبه.

خودت رو امتحان کن

امید یه اطلاعیه‌ی یک‌صفحه‌ای روی A4 با ۱۱ پوینت نوشته، تمام عرض صفحه با حاشیه‌های باریک. خواننده‌ها می‌گن خسته‌کننده‌ست، با اینکه جمله‌ها کوتاهن. کدوم تغییر بیشتر کمک می‌کنه؟

  1. متن رو ریزتر کنه که صفحه راحت‌تر جاش بده
  2. متن رو باریک‌تر کنه تا هر خط حدود ۴۵ تا ۷۵ کاراکتر بشه
  3. همه‌ی پاراگراف‌ها رو وسط‌چین کنه که صفحه متعادل به نظر بیاد
  4. به یه فونت تزئینی‌تر و باشخصیت‌تر سوئیچ کنه
جواب رو ببین

متن رو باریک‌تر کنه تا هر خط حدود ۴۵ تا ۷۵ کاراکتر بشه

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

فاصله‌ی خطوط (Line Height / Leading)

اسم · تایپوگرافی · بهش می‌گن line height

فاصله‌ی یه خط متن تا خط بعدی، که معمولاً به‌صورت ضریبی از اندازه‌ی فونت نوشته می‌شه. ۱٫۰ یعنی خط‌ها تقریباً به هم چسبیدن. متن اصلی حدود ۱٫۴ تا ۱٫۶ بهترین حالتش رو داره. تیترهای درشت کمتر لازم دارن، حدود ۱٫۱ تا ۱٫۲، چون تو اندازه‌ی بزرگ همون ضریب تبدیل می‌شه به یه چاله.

متن ۱۶ پیکسلی با ضریب ۱٫۵ یعنی ۲۴ پیکسل فاصله از یه خط تا خط بعدی. همون پاراگراف رو ببر روی ۱٫۱، می‌شه یه آجر خاکستری که چشم ازش سُر می‌خوره.

طول سطر (Line Length / Measure)

اسم · تایپوگرافی · بهش می‌گن measure

یعنی هر خط چندتا کاراکتر جا می‌ده، با شمردن فاصله‌ها. خوندن راحت تقریباً بین ۴۵ تا ۷۵ کاراکتره، که وسطش حدود ۶۰ می‌شه. زیادی بلند باشه، چشم تو مسیر برگشت به اول خط بعدی جاش رو گم می‌کنه. زیادی کوتاه باشه، جمله تیکه‌تیکه می‌رسه و تلق‌تلق می‌خونیش.

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

دستور متن اصلی

  کجا            اندازه      فاصله‌ی خط    طول خط
  کاغذ A4       ۱۰ تا ۱۲ pt  ۱٫۴ تا ۱٫۵    ۴۵ تا ۷۵ کاراکتر
  صفحه‌ی وب      ۱۶ px        ۱٫۶ تا ۱٫۸    ۴۵ تا ۷۵ کاراکتر
  گوشی           ۱۶ px        ۱٫۶ تا ۱٫۸    ۳۵ تا ۵۰ کاراکتر
  اسلاید         ۲۴ pt به بالا ۱٫۳ تا ۱٫۴   یه خط کوتاه

حساب یه صفحه‌ی A4:
  عرض صفحه                 ۲۱ سانت
  حاشیه‌ی ۳ سانت هر طرف ← ستون متن ۱۵ سانت
     با ۱۱ پوینت می‌شه حدود ۸۰ کاراکتر به بالا: هنوز پهنه
  حاشیه‌ی ۴ سانت هر طرف ← ستون متن ۱۳ سانت
     حدود ۶۵ کاراکتر: درست

خروجی

حاشیه‌ی پهن تزئین نیست.
همون چیزیه که طول خط رو تنظیم می‌کنه.

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

خودت رو امتحان کن

نگار فاصله‌ی خط متن اصلیش رو ۱٫۵ می‌ذاره و تیتر ۴۸ پوینتیش رو ۱٫۱۵. همین دو تا عدد متفاوت اینجا انتخاب یکدسته‌ست، نه بی‌دقتی.

جواب رو ببین

درست

درسته. فاصله‌ی خط ضریبیه از اندازه‌ی متن، پس هرچی حروف درشت‌تر، هر پله فضای بیشتری اضافه می‌کنه. متن اصلی با حدود ۱٫۴ تا ۱٫۶ راحته، ولی یه تیتر ۴۸ پوینتی با ۱٫۵ بین خط‌هاش یه چاله‌ی تابلو باز می‌کنه؛ حدود ۱٫۱ تا ۱٫۲ جمعش می‌کنه. یکدستی یعنی یه قانون رو همه‌جا اجرا کنی، نه یه عدد رو.

جفت کردن

تایپوگرافی (Typography): هماهنگی فونت‌ها

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

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

خودت رو امتحان کن

هر تنظیم رو به عددی که معمولاً جواب می‌ده وصل کن

جواب رو ببین
  • فاصله‌ی خط برای متن اصلی → حدود ۱٫۴ تا ۱٫۶ برابر اندازه
  • فاصله‌ی خط برای یه تیتر درشت → حدود ۱٫۱ تا ۱٫۲ برابر اندازه
  • طول خط برای خوندن راحت → حدود ۴۵ تا ۷۵ کاراکتر
  • تعداد فونت‌ها تو یه صفحه → دوتا، و خیلی وقت‌ها یکی بهتره

خودت رو امتحان کن

این به خوندن کمک می‌کنه یا بهش ضربه می‌زنه؟

  • متن اصلی با فاصله‌ی خط ۱٫۵
  • یه پاراگراف کامل با حروف بزرگ
  • تیترها با وزن بولد همون فونت متن
  • چهار تا فونت تو یه پوستر
  • خط‌هایی که تمام عرض یه صفحه‌ی پهن رو می‌رن
  • ستون متنی که تا حدود ۶۰ کاراکتر باریک شده
جواب رو ببین

کمک می‌کنه: متن اصلی با فاصله‌ی خط ۱٫۵, تیترها با وزن بولد همون فونت متن, ستون متنی که تا حدود ۶۰ کاراکتر باریک شده

ضربه می‌زنه: یه پاراگراف کامل با حروف بزرگ, چهار تا فونت تو یه پوستر, خط‌هایی که تمام عرض یه صفحه‌ی پهن رو می‌رن

خودت رو امتحان کن

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

  1. فاصله انداختن خط پیوسته رو می‌شکنه و کج کردن هم شکل حروف رو خراب می‌کنه
  2. هیچ ایرادی نداره؛ هر دوتا راه‌های معمول برجسته کردن عنوان تو هر زبونی‌ان
  3. عنوان باید وسط‌چین هم بشه تا پوستر متعادل به نظر بیاد
  4. عنوان فارسی همیشه باید با فونت سریف‌دار نوشته بشه
جواب رو ببین

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

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

مرور درس

  • سریف حس سنتی می‌ده و به متن چاپی طولانی می‌خوره؛ بدون سریف حس امروزی می‌ده و به صفحه‌نمایش، تابلو و اندازه‌های ریز.
  • متن اصلی: حدود ۱۶ پیکسل روی صفحه یا ۱۰ تا ۱۲ پوینت تو چاپ، فاصله‌ی خط ۱٫۴ تا ۱٫۶، خط‌های ۴۵ تا ۷۵ کاراکتری.
  • تیترهای درشت فاصله‌ی خط جمع‌تری می‌خوان، حدود ۱٫۱ تا ۱٫۲.
  • حداکثر دو تا فونت، و یه خانواده تو دو وزن امن‌تر از دو تا خانواده‌ست.
  • فارسی یه فونت واقعی فارسی می‌خواد، فاصله‌ی خط بیشتر (حدود ۱٫۷ تا ۲٫۰)، بدون فاصله بین حروف، بدون حروف بزرگ و بدون ایتالیک قلابی.

فقط نخونش، نگهش دار

پث‌وایز هر ایده رو درست قبل از اینکه فراموشش کنی با یه سؤال کوتاه برمی‌گردونه. رایگان روی اندروید و وب، به فارسی و انگلیسی.

Cafe Bazaar Myket باز کردن نسخه‌ی وب

همه‌ی درس‌های این دوره

  1. سلسله‌مراتب بصری (Visual Hierarchy): اول به چی نگاه می‌کنم؟
  2. کنتراست: چیزهای متفاوت رو واقعاً متفاوت کن
  3. هم‌ترازی و نزدیکی
  4. فضای خالی و یه سیستم فاصله‌گذاری
  5. گرید و تعادل
  6. ترکیب‌بندی و نقطه‌ی کانونی (Focal Point)
  7. تئوری رنگ: فام، اشباع و روشنایی (Color Theory: HSL)
  8. ساختن یه پالت
  9. تایپوگرافی‌ای که خوب خونده می‌شه
  10. چطور یه طرح رو نقد کنی
  11. یه پوستر بساز، قدم به قدم
  12. ده اشتباه رایج طراحی و چک‌لیست بازبینی (Design Mistakes & Audit Checklist)