ژورنال طراحیتایپوگرافی فارسی در طراحی وب

ژورنال طراحی

تایپوگرافی فارسی برای وب؛ از انتخاب فونت تا ساختن ریتم خواندن

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

فونت را با متن واقعی فارسی امتحان کنید

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

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

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

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

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

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

وزن‌های زیاد لزوماً سلسله‌مراتب بهتر نمی‌سازند

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

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

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

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

  • نقش وزن و تأکید را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

اندازه متن را از زمینه خواندن انتخاب کنید

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

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

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

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

نمای سه‌بعدی دوم از جزئیات اجرایی تایپوگرافی فارسی برای وب از انتخاب فونت تا ساختن ریتم خواندن
02

نمای دوم از فرم کلی فاصله می‌گیرد و روی اتصال تصمیم‌های ریز به تجربه نهایی تمرکز می‌کند.

فاصله خطوط در فارسی باید سخاوتمندتر باشد

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

بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر می‌رسد، اما وقتی نگاه از بالا تا پایین حرکت می‌کند، معلوم نیست کدام تصمیم واقعاً مهم‌تر است. در چنین لحظه‌ای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راه‌حل از افزودن یک افکت تازه نمی‌آید، از روشن‌کردن مسئولیت هر لایه می‌آید. در موضوع «فاصله خطوط در فارسی باید سخاوتمندتر باشد»، بهتر است از خود line-height و خستگی چشم شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا می‌کند و به نقشی که باید در تجربه صفحه داشته باشد برمی‌گرداند؛ جایی که می‌توان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.

می‌توان تصمیم را با یک پرسش ساده محک زد: اگر این عنصر حذف یا تغییر کند، فهم کاربر دقیقاً چه چیزی را از دست می‌دهد؟ پاسخ روشن، وجود عنصر را توجیه می‌کند. پاسخ مبهم معمولاً نشانه آن است که داریم با تزئین، نبود اولویت یا کمبود محتوا را پنهان می‌کنیم. برای line-height و خستگی چشم، نمونه را با متن کوتاه و بلند، حالت عادی و خطا، و دو اندازه کاملاً متفاوت بررسی کنید. تفاوت‌ها را یادداشت کنید و فقط قاعده‌ای را وارد سیستم کنید که دلیلش در خروجی قابل دیدن باشد.

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

  • نقش line-height و خستگی چشم را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

طول سطر، سرعت خواندن را تغییر می‌دهد

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

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

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

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

نیم‌فاصله و نشانه‌گذاری بخشی از UI هستند

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

طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متن‌ها کامل‌اند و هیچ‌کس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمی‌بیند. محصول واقعی این‌طور رفتار نمی‌کند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «نیم‌فاصله و نشانه‌گذاری بخشی از UI هستند»، بهتر است از خود جزئیات نگارشی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا می‌کند و به نقشی که باید در تجربه صفحه داشته باشد برمی‌گرداند؛ جایی که می‌توان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.

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

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

  • نقش جزئیات نگارشی را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

اعداد و عبارت‌های لاتین را کنترل کنید

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

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

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

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

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

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

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

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

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

  • نقش مقیاس واکنش‌گرا را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

قدم بعدی

برای پروژه شما، از پرسش‌های درست شروع کنیم.

شرح کوتاهی از وضعیت، هدف و محدودیت‌ها بفرستید تا مسیر مناسب را روشن کنیم.