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

بخش اول: چرا سایز ۱۶ پیکسل، خط قرمز طراحی وب مدرن است؟

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

بخش دوم: تفاوت ذاتی خط فارسی با انگلیسی

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

بخش سوم: فاصله بین خطوط (Line Height)؛ ستون اصلی خوانایی

بسیاری از طراحان تمام تمرکز خود را روی سایز فونت می‌گذارند و فاصله خطوط را پیش‌فرض رها می‌کنند. در فونت‌های فارسی، خطوط باید حتماً فضایی برای نفس کشیدن داشته باشند. فاصله خطوط استاندارد برای متن فارسی بین ۱.۶ تا ۱.۸ برابر اندازه فونت است. یعنی برای فونت ۱۶ پیکسل، ارتفاع خط باید بین ۲۶ تا ۲۹ پیکسل (یا ۱.۷em) تنظیم شود تا دندانه‌ها و کلمات سطر بالا و پایین با هم تداخل پیدا نکنند.

بخش چهارم: سیستم اندازه‌بندی تیترها و متن

تیتر اصلی برگه (تگ H1): ۳۲ تا ۳۶ پیکسل در دسکتاپ و ۲۴ تا ۲۸ پیکسل در موبایل با وزن ضخیم یا بولد.

تیترهای اصلی بخش‌ها (تگ H2): ۲۴ تا ۲۸ پیکسل در دسکتاپ و ۲۰ تا ۲۲ پیکسل در موبایل.

تیترهای فرعی (تگ H3): ۱۸ تا ۲۲ پیکسل در دسکتاپ و ۱۸ پیکسل در موبایل.

متن بدنه و پاراگراف‌ها: ۱۶ پیکسل ثابت در دسکتاپ و موبایل با وزن نرمال (۴۰۰).

متون کم‌اهمیت و پانویس‌ها: ۱۲ تا ۱۴ پیکسل.

بخش پنجم: مزیت استفاده از واحد rem به جای پیکسل

در المنتور یا کدهای CSS، بهتر است به جای نوشتن عدد ثابت پیکسل، از واحد rem استفاده شود. یک rem دقیقاً معادل سایز پیش‌فرض مرورگر کاربر (۱۶ پیکسل) است. اگر کاربری به دلیل ضعف بینایی اندازه فونت دستگاه خود را درشت کرده باشد، با استفاده از rem تمام صفحات شما خودبه‌خود با نیاز او همگام می‌شوند که این موضوع امتیاز سئو و تجربه کاربری (Accessibility) سایت را به شدت بالا می‌برد.