منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۵ دقیقه

تایپوگرافی (Typography) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. این نوشته چند بخش افزوده هم دارد — از جمله بخشی دربارهٔ تایپوگرافی فارسی — که در جعبهٔ منبع مشخص شده‌اند.

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

چرا برای طراح محصول این‌قدر مهم است؟ چون بیش از ۹۰ درصد اطلاعات آنلاین به‌شکل متن است. یعنی وقتی دربارهٔ «طراحی رابط» حرف می‌زنیم، عملاً بیشتر وقتمان صرف چیدن متن می‌شود، حتی اگر اسمش را چیز دیگری بگذاریم. و همان‌طور که در نظریهٔ رنگ دیدیم، کاربر ظاهر یک صفحه را در ۱۷ تا ۵۰ هزارم ثانیه قضاوت می‌کند — بخش بزرگی از آن قضاوت، دربارهٔ تایپ است.

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

آناتومی حروف

برای حرف‌زدن دقیق دربارهٔ تایپ، به چند واژه نیاز دارید که در تصویر ابتدای صفحه می‌بینید:

• - خط پایه (Baseline): خط نامرئی‌ای که حروف روی آن می‌نشینند.
• - ارتفاع ایکس (x-height): فاصلهٔ خط پایه تا بالای حرف کوچک x.
• - بالارو (Ascender): بخشی از حروفی مثل h، b و d که از ارتفاع ایکس بالاتر می‌رود.
• - پایین‌رو (Descender): بخشی از حروفی مثل y، p و g که زیر خط پایه می‌افتد.
• - محفظه (Counter): فضای بستهٔ درون حروفی مثل o و a.
• - سریف (Serif): همان «پاچه»های کوچک انتهای خطوط حرف.

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

نتیجهٔ عملی: وقتی قلم را عوض می‌کنید، اندازه‌ها را هم باید دوباره تنظیم کنید. ۱۶ پیکسل در یک قلم، معادل ۱۵ پیکسل در قلم دیگری است. تیم‌هایی که قلم را عوض می‌کنند و اندازه‌ها را دست‌نخورده می‌گذارند، معمولاً بعد از انتشار متوجه می‌شوند که «یک جای کار فرق کرده» ولی نمی‌دانند کجا.

تایپ‌فیس یا فونت؟

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

جمله‌ای که منبع نقل می‌کند خوب در ذهن می‌ماند: «تایپ‌فیس را انتخاب می‌کنید؛ فونت را استفاده می‌کنید.» در عمل کسی به‌خاطر این اشتباه نمی‌میرد، اما وقتی با تیم توسعه یا با یک طراح تایپ حرف می‌زنید، دقت واژگان جلوی سوءتفاهم را می‌گیرد.

پنج خانوادهٔ قلم

• - سریف: با پاچه‌های کوچک در انتهای خطوط. سنتاً برای خواندن طولانی در چاپ بهتر بوده و حس رسمی و باسابقه منتقل می‌کند. روی نمایشگرهای کم‌وضوح خوب رندر نمی‌شد، اما با بهترشدن نمایشگرها این محدودیت تقریباً از بین رفته است.
• - بدون‌سریف (Sans-serif): بدون پاچه، تمیز و خنثی. انتخاب پیش‌فرض رابط‌های دیجیتال، به‌ویژه در اندازه‌های کوچک.
• - تک‌عرض (Monospace): همهٔ نویسه‌ها عرض یکسان دارند. برای کد، داده و هر چیزی که باید ستونی تراز شود.
• - دست‌نویس (Script): تقلید دست‌خط. فقط برای لوگو و تأکید — هرگز برای متن اصلی.
• - نمایشی (Display): ساخته شده برای بزرگ و پرصدا بودن. در اندازهٔ کوچک خوانایی‌اش را از دست می‌دهد.

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

مقیاس تایپ و سلسله‌مراتب

مقیاس تایپ یعنی به‌جای اینکه هر بار اندازه را حسی انتخاب کنید، یک نسبت ثابت (مثلاً ۱٫۲۵) بردارید و همهٔ اندازه‌ها را از آن بسازید. دقیقاً همان منطق توکن‌ها در سیستم طراحی: تصمیم را یک بار می‌گیرید.

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

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

خوانایی حروف و خوانایی متن

دو واژه که در فارسی هر دو «خوانایی» ترجمه می‌شوند اما در انگلیسی و در عمل متفاوت‌اند:

• - خوانایی حروف (Legibility): اینکه تک‌تک نویسه‌ها و کلمه‌ها قابل تشخیص باشند. ویژگی خودِ قلم است. قلمی که در آن I بزرگ و l کوچک یکسان دیده می‌شوند، مشکل legibility دارد.
• - خوانایی متن (Readability): اینکه دنبال‌کردن کل متن آسان باشد. ویژگی چیدمان است: طول سطر، ارتفاع خط، کنتراست و ساختار جمله.

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

طول سطر و ارتفاع خط

طول سطر: منبع پیشنهاد می‌کند در دسکتاپ حدود ۶۰ نویسه در هر سطر و در موبایل ۳۰ تا ۴۰ نویسه. سطر خیلی کوتاه باعث می‌شود چشم مدام برگردد و ریتم خواندن بشکند؛ سطر خیلی بلند باعث می‌شود پیداکردن ابتدای سطر بعدی سخت شود — همان حسی که وقت خواندن یک PDF تمام‌عرض تجربه می‌کنیم.

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

کرنینگ و ترکینگ

• - کرنینگ (Kerning): تنظیم فاصلهٔ میان یک جفت نویسهٔ مشخص. کلاسیک‌ترین نمونه‌اش جفت AV است که بدون تنظیم، فاصلهٔ زیادی میانشان دیده می‌شود.
• - ترکینگ (Tracking): تنظیم یکنواخت فاصله در کل یک بلوک متن.

در کار روزمرهٔ رابط، کرنینگ را معمولاً به خودِ قلم می‌سپارید و سراغش نمی‌روید. اما ترکینگ دو کاربرد واقعی دارد: کمی باز کردن فاصله در متن‌های تمام‌بزرگ (که ذاتاً فشرده دیده می‌شوند) و کمی بستن فاصله در تیترهای خیلی درشت. برای متن اصلی، به ترکینگ دست نزنید.

انتخاب و جفت‌کردن قلم‌ها

قاعده‌های عملی که منبع می‌آورد:

• - دو قلم شبیه به هم را جفت نکنید. تفاوت‌های ظریفشان دیده نمی‌شود و نتیجه فقط بی‌نظمی است.
• - کنتراست بسازید: یک سریف با یک بدون‌سریف. نمونهٔ خوبی که منبع می‌آورد Georgia و Verdana است؛ نمونهٔ بد، Baskerville و Impact.
• - حداکثر سه قلم در یک وب‌سایت؛ دو قلم مکمل حالت ایدئال است.
• - قلم را با شخصیت برند هماهنگ کنید و اگر برند راهنمای سبک دارد، از آن پیروی کنید.
• - روی دستگاه‌های مختلف تست کنید و مطمئن شوید قلم، نویسه‌های ویژه و اعرابِ زبان‌های موردنیازتان را پوشش می‌دهد.

یک توصیهٔ عملی از تجربه: ساده‌ترین جفت خوب، یک قلم با دو وزن است. پیش از آنکه سراغ دو خانوادهٔ متفاوت بروید، ببینید آیا با «همان قلم، وزن ۷۰۰ برای تیتر و ۴۰۰ برای متن» به نتیجه نمی‌رسید. در بیشتر محصولات می‌رسید — و یک قلم کمتر یعنی یک فایل کمتر برای بارگذاری و یک منبع خطای کمتر.

دسترس‌پذیری

• - کنتراست رنگ را در اولویت بگذارید. همان اعداد WCAG که در نظریهٔ رنگ دیدیم: دست‌کم ۴٫۵:۱ برای متن معمولی.
• - ناتوانی همیشه دائمی نیست. نکتهٔ خوب منبع همین است: کاربری که در آفتاب تند به صفحهٔ گوشی نگاه می‌کند، در آن لحظه دقیقاً همان محدودیتی را دارد که یک کاربر کم‌بینا.
• - دربارهٔ نارساخوانی (دیسلکسیا) ادعای قطعی نکنید. منبع صادقانه می‌گوید پژوهش‌ها دربارهٔ برتری قلم‌های بدون‌سریف برای این کاربران قطعی نیست. آنچه قطعی‌تر است: فاصلهٔ کافی، طول سطر معقول و اجتناب از متن تمام‌بزرگ.
• - اندازه و وزن کافی و در نهایت، تست با کاربران واقعی.

یک قاعدهٔ عملی که اضافه می‌کنم: اندازهٔ متن اصلی را زیر ۱۶ پیکسل نبرید و هرگز امکان بزرگ‌کردن متن را با تنظیمات viewport غیرفعال نکنید. این دومی یکی از رایج‌ترین و بی‌سروصداترین آسیب‌های دسترس‌پذیری در وب فارسی است.

تایپوگرافی فارسی چه فرقی دارد؟

این بخش افزودهٔ من است، چون منبع طبیعتاً به خط لاتین فکر می‌کند و چند تفاوت اساسی را پوشش نمی‌دهد:

• - حروف بزرگ نداریم. در لاتین، نوشتن یک عبارت با حروف بزرگ خودش یک سطح از سلسله‌مراتب است. در فارسی چنین ابزاری وجود ندارد، پس تمام بار سلسله‌مراتب روی اندازه، وزن، رنگ و فاصله می‌افتد. این یعنی مقیاس تایپ در فارسی از انگلیسی مهم‌تر است، نه کم‌اهمیت‌تر.
• - ارتفاع خط باید بیشتر باشد. خط فارسی هم بالارو و پایین‌رو دارد و هم نقطه‌ها و اعراب که عمودی روی هم می‌نشینند. اگر ارتفاع خط ۱٫۵ را از یک راهنمای انگلیسی کپی کنید، متن فارسی فشرده و شلوغ می‌شود. از ۱٫۸ شروع کنید.
• - خط متصل است. حروف به هم می‌چسبند و شکلشان بسته به موقعیت (آغازین، میانی، پایانی، منفرد) عوض می‌شود. نتیجهٔ مستقیمش: هرگز به متن فارسی ترکینگ ندهید. باز کردن فاصلهٔ حروف، کلمه را از هم می‌پاشد — کاری که در لاتین بی‌ضرر و گاهی مفید است، اینجا متن را خراب می‌کند.
• - جهت مختلط. عدد، ایمیل، نشانی وب و نام‌های لاتین درون متن راست‌به‌چپ، چپ‌به‌راست اجرا می‌شوند. اگر این‌ها را در بستر درست قرار ندهید، پرانتزها و علائم جابه‌جا می‌شوند. (در همین سایت، همهٔ عبارت‌های لاتین داخل یک span با جهت مشخص گذاشته شده‌اند.)
• - نیم‌فاصله را جدی بگیرید. «می شود» و «می‌شود» برای خواننده یکسان نیستند و اولی متن را غیرحرفه‌ای نشان می‌دهد — نکته‌ای که در یو‌ایکس رایتینگ هم به آن اشاره کردم.
• - تنوع قلم محدودتر است. شمار قلم‌های فارسیِ باکیفیت و دارای وزن‌های متعدد، به‌مراتب کمتر از لاتین است. پیش از آنکه مقیاس تایپ را طراحی کنید، مطمئن شوید قلم انتخابی‌تان وزن‌های لازم را واقعاً دارد؛ وگرنه مرورگر وزن جعلی می‌سازد و نتیجه زشت است.

اشتباه‌های رایج

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

چک‌لیست عملی

• - یک قلم اصلی انتخاب کنید و ابتدا با دو وزن کار کنید.
• - یک مقیاس با نسبت ثابت بسازید و همیشه از پله‌های آن انتخاب کنید.
• - متن اصلی ۱۶ پیکسل یا بیشتر، ارتفاع خط ۱٫۸ برای فارسی.
• - طول سطر را محدود کنید؛ عرض ستون متن را آزاد نگذارید.
• - کنتراست را اندازه بگیرید، حدس نزنید.
• - سه سطح سلسله‌مراتب، نه بیشتر.
• - روی گوشی واقعی و در نور روز نگاه کنید.
• - مطمئن شوید قلم فارسی‌تان وزن‌های لازم را واقعاً دارد.

جمع‌بندی

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