۵ اشتباه تایپوگرافی که طراحی را خراب می‌کند
گاهی مشکل یک طراحی نه رنگ است، نه تصویر و نه ترکیب‌بندی؛ متن‌ها فقط درست کنار هم ننشسته‌اند. در این مقاله از مانستیزو، ۵ اشتباه رایج تایپوگرافی را از انتخاب و ترکیب فونت تا سلسله‌مراتب، فاصله‌گذاری، ترازبندی و خوانایی بررسی می‌کنیم و می‌بینیم چطور می‌توان آن‌ها را در طراحی‌های گرافیکی و دیجیتال اصلاح کرد.
۵ اشتباه تایپوگرافی که طراحی را خراب می‌کند
چرا تایپوگرافی می‌تواند یک طراحی خوب را ضعیف نشان دهد؟
تایپوگرافی فقط انتخاب یک فونت زیبا نیست. اندازه حروف، وزن، فاصله خطوط، فاصله حروف، عرض بلوک متن، ترازبندی و رابطه میان عنوان و متن اصلی همگی روی این تأثیر می‌گذارند که مخاطب محتوا را چگونه ببیند و بخواند.
در یک طراحی گرافیک خوب، Typography علاوه بر خوانایی، وظیفه سازمان‌دهی اطلاعات را هم بر عهده دارد. مخاطب باید بدون فکر کردن متوجه شود کدام بخش عنوان است، کدام متن توضیحی است و از کجا باید خواندن را شروع کند.
به همین دلیل، حتی اگر فونت انتخاب‌شده به‌تنهایی زیبا باشد، استفاده اشتباه از آن می‌تواند خروجی را شلوغ، نامنسجم یا آماتور نشان دهد. نکته مهم این است که بسیاری از توصیه‌های تایپوگرافی «قانون قطعی» نیستند؛ Typeface، زبان، مدیوم، اندازه صفحه و نوع محتوا روی تصمیم نهایی اثر دارند.
۱. استفاده از فونت‌های متعدد بدون نقش مشخص
یکی از اشتباهات رایج این است که برای ایجاد تنوع، چند Typeface متفاوت وارد یک طراحی شوند؛ بدون اینکه مشخص باشد هرکدام چه وظیفه‌ای دارند. نتیجه معمولاً این است که هر بخش تلاش می‌کند توجه مخاطب را به خودش جلب کند و انسجام کلی طراحی کاهش پیدا می‌کند.
این به معنی وجود یک قانون جهانی مثل «همیشه فقط از دو فونت استفاده کنید» نیست. Adobe نیز محدود کردن تعداد فونت‌ها را به‌عنوان یک Rule of Thumb مطرح می‌کند، نه یک قانون مطلق. مهم‌تر از تعداد فونت‌ها، این است که هر Typeface نقش مشخصی داشته باشد و ترکیب آن‌ها از نظر شخصیت بصری و کاربرد منطقی باشد.
در بسیاری از طراحی‌ها حتی یک خانواده فونت می‌تواند کافی باشد. Weightهای Regular، Medium، Semibold و Bold، همراه با تغییر اندازه و فاصله، معمولاً امکان ساخت چند سطح از اطلاعات را فراهم می‌کنند.
اگر پروژه به دو Typeface نیاز دارد، بهتر است رابطه میان آن‌ها هدفمند باشد. مثلاً یکی وظیفه ایجاد شخصیت در عنوان را داشته باشد و دیگری برای متن‌های طولانی و خوانایی بهتر استفاده شود.
برای محتوای فارسی نیز انتخاب Typeface اهمیت بیشتری پیدا می‌کند، چون نباید توصیه‌های مربوط به حروف لاتین را بدون توجه به ساختار خط فارسی مستقیماً تعمیم داد. اگر در حال انتخاب فونت برای پروژه فارسی هستید، مقاله بهترین فونت‌های فارسی می‌تواند نقطه شروع مناسب‌تری برای بررسی گزینه‌ها باشد.
حالت اشتباه: استفاده از چند فونت متفاوت فقط برای اینکه هر قسمت طرح متفاوت دیده شود.
حالت بهتر: تعریف نقش مشخص برای Typography و ایجاد تنوع ابتدا با Size، Weight، Contrast و Spacing؛ سپس اضافه کردن Typeface دوم فقط زمانی که واقعاً به طراحی کمک می‌کند.
۲. نبود سلسله‌مراتب بصری مشخص بین عنوان و متن
اگر عنوان، زیرعنوان، توضیحات و متن اصلی تقریباً اندازه، وزن و رنگ یکسانی داشته باشند، مخاطب نمی‌داند ابتدا باید کدام قسمت را بخواند. اینجا مشکل اصلی نبود Visual Hierarchy است.
سلسله‌مراتب بصری یعنی اهمیت اطلاعات را به شکلی نشان دهیم که چشم مخاطب تقریباً به‌صورت طبیعی مسیر درست را دنبال کند. برای این کار فقط Font Size در اختیار ما نیست؛ Weight، Contrast، Position، White Space و فاصله بین عناصر هم می‌توانند Hierarchy ایجاد کنند.
مثلاً یک تیتر می‌تواند بدون اینکه دو برابر متن بدنه باشد، با ترکیبی از وزن بیشتر، فضای خالی اطراف و Contrast مناسب از بقیه محتوا متمایز شود.
به همین دلیل، پیشنهادهایی مثل «تیتر باید دقیقاً دو برابر متن اصلی باشد» را نباید به‌عنوان قانون تایپوگرافی در نظر گرفت. اندازه مناسب به Typeface، ابعاد طراحی، فاصله مشاهده و نوع محتوا بستگی دارد.
این موضوع در طراحی رابط کاربری اهمیت بیشتری پیدا می‌کند؛ چون Typography بخشی از سیستم هدایت کاربر است. برای مثال در طراحی UI، تفاوت میان عنوان صفحه، Label، متن دکمه و Body Text باید بدون ایجاد شلوغی مشخص باشد.
حالت اشتباه: تیتر، زیرعنوان و متن بدنه تقریباً یک اندازه و یک Weight دارند.
حالت بهتر: کاربر در نگاه اول عنوان را تشخیص می‌دهد، سپس اطلاعات سطح دوم و در نهایت متن اصلی را می‌خواند.
۳. فاصله‌گذاری نامناسب بین حروف و خطوط
فاصله‌گذاری یکی از بخش‌هایی است که تفاوت میان تایپوگرافی معمولی و تایپوگرافی پرداخت‌شده را مشخص می‌کند. در اینجا سه مفهوم را نباید با یکدیگر اشتباه گرفت.
Kerning: تنظیم فاصله میان یک جفت مشخص از کاراکترها.
Tracking: تغییر فاصله حروف در یک محدوده یا مجموعه‌ای از متن.
Leading یا Line Height: فاصله عمودی میان خطوط متن.
Adobe نیز این تفاوت را به همین شکل تعریف می‌کند: Kerning روی فاصله یک جفت کاراکتر متمرکز است، Tracking فاصله کلی یک محدوده متن را تغییر می‌دهد و Leading مربوط به فاصله عمودی خطوط است.
مشکل زمانی ایجاد می‌شود که Tracking برای حل یک مشکل Kerning استفاده شود، یا فاصله خطوط آن‌قدر کم شود که بلوک متن فشرده و خسته‌کننده به نظر برسد. برعکس، Line Height بیش از حد هم می‌تواند ارتباط بصری میان خطوط یک پاراگراف را کاهش دهد.
برای Leading یک عدد واحد که برای همه فونت‌ها و همه مدیوم‌ها مناسب باشد وجود ندارد. Adobe صراحتاً اشاره می‌کند که Typeface، هدف طراحی و طول خطوط روی انتخاب فاصله خطوط تأثیر می‌گذارند. در متون طولانی وب نیز MDN استفاده از Line Height نسبتاً باز را برای بهبود خوانایی توصیه می‌کند.
در منابع تخصصی Typography مثل Practical Typography، بازه‌هایی مانند حدود ۱۲۰ تا ۱۴۵ درصد برای بسیاری از متن‌ها پیشنهاد شده است؛ اما حتی همان منبع نیز توضیح می‌دهد که فونت‌های مختلف در یک Point Size یک اندازه دیده نمی‌شوند. بنابراین این اعداد بهتر است نقطه شروع آزمایش باشند، نه دستور ثابت.
طول خط هم بخشی از مسئله است
فاصله خطوط را نمی‌توان جدا از عرض متن بررسی کرد. وقتی خطوط بسیار بلند باشند، چشم برای پیدا کردن شروع خط بعدی مسیر بیشتری طی می‌کند. Matthew Butterick در Practical Typography حدود ۴۵ تا ۹۰ کاراکتر را برای بسیاری از متون یک محدوده کاربردی می‌داند؛ باز هم به‌عنوان یک راهنمای Typography، نه استانداردی که در تمام پوسترها، رابط‌ها و زبان‌ها الزام‌آور باشد.
حالت اشتباه: خطوط بسیار فشرده، Tracking شدید یا تلاش برای اصلاح فاصله یک جفت حرف با تغییر فاصله تمام متن.
حالت بهتر: بررسی Kerning، Tracking، Leading و عرض بلوک متن به‌صورت جداگانه و تنظیم آن‌ها بر اساس Typeface و Context طراحی.
۴. ترازبندی نامناسب و ایجاد مسیر خواندن نامنظم
Alignment فقط یک تصمیم زیبایی‌شناختی نیست. محل شروع هر خط روی ریتم خواندن و ساختار کل صفحه تأثیر دارد.
Center Alignment برای عنوان، نقل‌قول کوتاه یا ترکیب‌های نمایشی می‌تواند کاملاً مناسب باشد؛ اما زمانی که یک پاراگراف طولانی وسط‌چین می‌شود، محل شروع هر خط تغییر می‌کند و چشم باید دوباره نقطه شروع را پیدا کند.
برای متن فارسی پیوسته، راست‌چین بودن معمولاً یک نقطه شروع ثابت در سمت راست ایجاد می‌کند و با جهت طبیعی نوشتار فارسی هماهنگ است. با این حال، نوع ترازبندی همچنان باید با نوع محتوا و ترکیب‌بندی هماهنگ شود.
Justify نیز ذاتاً اشتباه نیست. مشکل زمانی ایجاد می‌شود که نرم‌افزار برای صاف کردن هر دو لبه مجبور شود فاصله کلمات را بیش از حد تغییر دهد. در چنین شرایطی ممکن است مسیرهای خالی ناخواسته‌ای میان کلمات شکل بگیرد که در Typography لاتین معمولاً با عنوان Rivers شناخته می‌شوند.
این موضوع در طراحی پست و Carousel هم اهمیت دارد. کاربر شبکه اجتماعی زمان کمی برای دریافت پیام دارد و بلوک‌های متنی نامنظم می‌توانند سرعت اسکن محتوا را پایین بیاورند. اگر روی چنین محتواهایی کار می‌کنید، صفحه تولید محتوای اینستاگرام مانستیزو نمونه دیگری از کاربرد Typography در طراحی محتوای دیجیتال است.
حالت اشتباه: یک پاراگراف طولانی وسط‌چین که شروع خطوط آن دائماً تغییر می‌کند.
حالت بهتر: انتخاب Alignment بر اساس جهت زبان، طول متن و ساختار صفحه، نه صرفاً ظاهر یک نمونه کوتاه.
۵. قربانی کردن خوانایی برای زیبایی ظاهری
یک فونت ممکن است در تیتر فوق‌العاده به نظر برسد اما برای چند پاراگراف متن انتخاب مناسبی نباشد. همین اتفاق درباره رنگ و Contrast هم رخ می‌دهد؛ متن خاکستری بسیار روشن روی پس‌زمینه روشن شاید در Mockup مینیمال به نظر برسد، اما اگر خواندن آن سخت باشد، Typography وظیفه اصلی خود را انجام نداده است.
خوانایی فقط به Font Choice محدود نیست. اندازه متن، Contrast، Spacing، طول خطوط، پس‌زمینه و حتی عرض Container هم در نتیجه اثر دارند.
در پروژه‌های وب، Accessibility یک لایه دیگر به این موضوع اضافه می‌کند. یکی از معیارهای مهم WCAG، معیار 1.4.12 Text Spacing است.
اما این معیار معمولاً اشتباه تفسیر می‌شود. WCAG نمی‌گوید همه سایت‌ها باید از ابتدا Line Height برابر ۱.۵ یا Letter Spacing برابر ۰.۱۲em داشته باشند. معیار می‌گوید در زبان‌ها و سیستم‌های نوشتاری مرتبط، اگر کاربر تنظیمات فاصله متن را تا مقادیر مشخصی افزایش دهد، نباید محتوا یا قابلیت‌های صفحه از بین بروند.
Line Height تا حداقل ۱.۵ برابر اندازه فونت
فاصله بعد از پاراگراف تا حداقل ۲ برابر اندازه فونت
Letter Spacing تا حداقل ۰.۱۲ برابر اندازه فونت
Word Spacing تا حداقل ۰.۱۶ برابر اندازه فونت
پس این اعداد در WCAG یک «نسخه طراحی» برای ظاهر اولیه صفحه نیستند؛ آن‌ها شرایطی برای آزمایش انعطاف‌پذیری محتوا هستند. W3C حتی برای زبان‌ها و Scriptهایی که بعضی از این ویژگی‌های Spacing در آن‌ها کاربرد ندارند استثنا در نظر گرفته است.
به همین دلیل، مشکل واقعی می‌تواند Layoutی باشد که با افزایش Spacing می‌شکند؛ مثلاً Container بسیار محدود باشد و متن بعد از بزرگ‌تر شدن فاصله‌ها بریده یا مخفی شود.
این نگاه در سطح برند هم اهمیت دارد. Typography بخشی از هویت بصری است، اما هویت برند فقط به لوگو یا انتخاب یک فونت محدود نمی‌شود. اگر به این موضوع علاقه دارید، مقاله چرا هویت برند فراتر از لوگو است؟ ارتباط میان عناصر مختلف هویت بصری را دقیق‌تر بررسی می‌کند.
حالت اشتباه: انتخاب ظاهر مینیمال یا فونت خاص به قیمت کاهش خوانایی متن.
حالت بهتر: طراحی Typography به شکلی که شخصیت بصری، خوانایی و نیازهای واقعی مخاطب هم‌زمان در نظر گرفته شوند.
چک‌لیست بررسی تایپوگرافی قبل از خروجی گرفتن
آیا در نگاه اول مشخص است کدام متن باید زودتر دیده شود؟
آیا هر Typeface یا Style نقش مشخصی در طراحی دارد؟
آیا بدون اضافه کردن فونت جدید می‌توان Hierarchy را با Size، Weight یا Spacing ایجاد کرد؟
آیا فاصله خطوط متناسب با Typeface و طول خطوط است؟
آیا Kerning و Tracking با هم اشتباه گرفته نشده‌اند؟
آیا متن‌های طولانی مسیر شروع خط مشخصی دارند؟
آیا Contrast متن و پس‌زمینه برای خواندن کافی است؟
آیا Typography روی اندازه واقعی خروجی و نه فقط در Zoom بالا بررسی شده است؟
در طراحی وب، آیا Layout با تغییر اندازه و Spacing متن همچنان سالم می‌ماند؟
جمع‌بندی
بیشتر اشتباهات تایپوگرافی از انتخاب یک «فونت بد» شروع نمی‌شوند؛ مشکل معمولاً در نحوه استفاده از فونت است. استفاده بی‌دلیل از چند Typeface، Hierarchy نامشخص، فاصله‌گذاری ضعیف، Alignment نامتناسب و قربانی کردن خوانایی برای ظاهر می‌توانند کیفیت یک طراحی خوب را به‌وضوح پایین بیاورند.
در عین حال، بهتر است Typography را مجموعه‌ای از اعداد و قوانین خشک نبینیم. بسیاری از اعدادی که در آموزش‌ها می‌بینیم، نقطه شروع یا Guideline هستند. تصمیم نهایی باید بر اساس Typeface، زبان، مدیوم، اندازه طراحی و نیاز مخاطب گرفته شود.
اگر هنگام طراحی قبل از Export چند لحظه Hierarchy، Spacing، Alignment و Readability را جداگانه بررسی کنید، بسیاری از مشکلاتی که باعث آماتور دیده شدن یک خروجی می‌شوند همان‌جا قابل اصلاح‌اند.
منابع
W3C Web Accessibility Initiative — WCAG 2.1 / Success Criterion 1.4.12: Text Spacing
W3C Web Accessibility Initiative — ACT Rules for Letter Spacing and Word Spacing
Adobe — Leading and Line Spacing Guide
Adobe — Kerning Typography Guide
Adobe — Adjust Letter Spacing in InDesign
Adobe Express — Font Pairing Guide
MDN Web Docs — CSS line-height
Matthew Butterick — Practical Typography: Line Spacing
Matthew Butterick — Practical Typography: Line Length
سؤالات متداول
پاسخ پرتکرارترین پرسش‌ها درباره موضوع این مقاله را در ادامه بخوانید.
نظرات
در حال بارگذاری نظرات…
نظر بگذارید