چگونه تایپوگرافی را برای موبایل بهینه کنیم؟

بارها دیده‌ام سایتی که در دسکتاپ تمیز و حرفه‌ای به نظر می‌رسد، در موبایل به یک دیوار بی‌روح از متن تبدیل می‌شود؛ خواننده چند خط می‌خواند و صفحه را می‌بندد. تجربه‌ام می‌گوید بخش بزرگی از این شکست، نه از محتوا، که از تایپوگرافی موبایل (mobile typography) می‌آید. تایپوگرافی روی صفحه‌های باریک، نسخه کوچک‌شده تایپوگرافی دسکتاپ نیست؛ بازطراحی همان اجزا با قواعد متفاوت است. در ادامه همان مراحلی را می‌گویم که در پروژه‌های واقعی برای قابل‌خواندن کردن متن روی موبایل اجرا می‌کنم.

چرا تایپوگرافی موبایل قواعد جدا دارد؟

در دسکتاپ، کاربر چند سانتی‌متر از صفحه فاصله دارد و می‌تواند با حرکت چشم، یک خط طولانی را دنبال کند. در موبایل، فاصله کمتر است، میدان دید باریک‌تر است، و انگشت کاربر با هر اسکرول، دامنه‌ای از متن را وارد و خارج می‌کند. اگر اندازه فونت را کوچک بگذارید، کاربر مجبور می‌شود زوم کند؛ اگر بزرگ بگذارید، در هر خط سه کلمه جا می‌گیرد و پاراگراف به یک ستون نازک تبدیل می‌شود. اگر ارتفاع خط (line-height) را از دسکتاپ کپی کنید، چشم روی خط فارسی که به‌طور طبیعی بالاپرنده است، گم می‌شود. مهم‌تر این‌که تجربه‌ام نشان می‌دهد افت نرخ مطالعه موبایل، به‌طور مستقیم روی نرخ پرش (bounce rate) و زمان حضور اثر می‌گذارد؛ یعنی موضوع به سلیقه بصری محدود نمی‌شود. اگر با ساختار کلی نمایش متن در وردپرس آشنایی ندارید، پیش از ادامه قالب وردپرس چیست و چگونه انتخاب کنیم را بخوانید تا بفهمید این تغییرات در کدام لایه اعمال می‌شوند.

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

اندازه فونت و واحدهای نسبی

قاعدهٔ تجربی من این است که اندازه فونت بدنه متن روی موبایل زیر ۱۶ پیکسل نباشد. زیر این عدد، کاربر اندروید و iOS به‌صورت خودکار بزرگ‌نمایی می‌کنند و چیدمان شما را به‌هم می‌ریزند. بالای ۲۰ پیکسل هم عملاً هر خط شامل سه تا چهار کلمه فارسی می‌شود و کاربر مدام اسکرول می‌کند. بازه طلایی برای بدنه متن فارسی در موبایل، بین ۱۶ تا ۱۸ پیکسل است.

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

:root {
  font-size: 100%; /* respect user settings */
}

body {
  font-size: 1rem;      /* usually 16px */
  line-height: 1.7;
}

@media (min-width: 768px) {
  body { font-size: 1.0625rem; }
}

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

ارتفاع خط و فاصله‌گذاری

ارتفاع خط (line-height) روی موبایل مهم‌تر از دسکتاپ است. کاربر در موبایل با یک نگاه محدود مواجه است و اگر خطوط به هم چسبیده باشند، چشم نمی‌تواند خط فعلی را دنبال کند. قاعده کاری من: ارتفاع خط بین ۱.۶ تا ۱.۸ برابر اندازه فونت. برای متن فارسی که ارتفاع بصری بیشتری نسبت به لاتین دارد، عدد ۱.۷ معمولاً بهترین تعادل را می‌سازد.

فاصله بین پاراگراف‌ها هم قاعده خودش را دارد. یک پاراگراف سه‌خطی روی موبایل، حس متفاوتی از همان پاراگراف روی دسکتاپ دارد؛ بنابراین فاصله زیر هر پاراگراف را بین ۱ تا ۱.۵ em بگذارید. تیترها را با فضای بیشتری نسبت به متن جدا کنید تا کاربر سریع بفهمد بخش بعدی از کجا شروع می‌شود. یک ترفند کوچک که در پروژه‌ها استفاده می‌کنم: در صفحه‌های محتوایی، فاصله پایین h2 را کمی کمتر از فاصله بالای آن می‌گذارم؛ این کار بصری حس "چسبیدن تیتر به متن خودش" را ایجاد می‌کند.

طول خط و حاشیه‌ها

طول خط (line length) روی موبایل، خودبه‌خود محدود است؛ اما حاشیه‌ها (padding افقی) می‌توانند این طول را حتی از حد بهینه هم کوچک‌تر کنند. قاعده حدوداً ۳۰ تا ۴۵ کاراکتر در هر خط برای متن فارسی روی موبایل مناسب است. حاشیه افقی زیر ۱۶ پیکسل، متن را به لبه صفحه می‌چسباند و حاشیه بالای ۳۲ پیکسل، طول خط را بی‌دلیل کوچک می‌کند. بازه ۲۰ تا ۲۴ پیکسل حاشیه افقی روی موبایل، نقطه‌ای است که در پروژه‌هایم بیشترین رضایت را دیده‌ام.

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

تایپوگرافی فارسی روی موبایل

فارسی چالش‌های اختصاصی دارد. حروف بلند عمودی و کشیدگی افقی در فونت‌های فارسی، فضای بیشتری از لاتین مصرف می‌کنند. فونت‌های تک‌وزنی (single-weight) روی موبایل کم‌عمق به نظر می‌رسند؛ بنابراین انتخاب فونت با وزن‌های ۴۰۰ و ۵۰۰ عملاً لازم است تا تفکیک بصری متن و تیتر حفظ شود. سه انتخاب محبوب فونت فارسی در پروژه‌های من: وزیرمتن (Vazirmatn)، ایران‌سنس (IRANSans) و ساحل (Sahel) که هر سه فونت‌های بهینه‌شده دارند. نمونه‌های بیشتر را در بهترین فونت‌های فارسی برای وب مقایسه کرده‌ام.

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

تایپوگرافی فارسی روی موبایل، پیش از هر چیز وفاداری به نیم‌فاصله است؛ هر جا آن را حذف کنید، تایپوگرافی هم فرو می‌ریزد.

عملکرد و بارگذاری فونت

زیبایی فونت اگر با کندی بارگذاری همراه باشد، کاربر می‌رود. سه اصل عملی در این بخش: نخست، فقط از دو یا سه وزن فونت استفاده کنید؛ هر وزن اضافه، صدها کیلوبایت اضافه است. دوم، از فرمت‌های مدرن مانند WOFF2 استفاده کنید که حدود ۳۰ درصد کوچک‌تر از WOFF هستند. سوم، font-display: swap را روی فونت اصلی بگذارید تا متن بدون انتظار برای فونت نمایش داده شود و کلاس‌های CSS با ابعاد پشتیبان بارگذاری نشوند.

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

نبودن همین تنظیمات، بخشی از دلیل کندی بارگذاری متن روی موبایل است. اگر سرعت سایت شما کلی مشکل دارد، این بخش تایپوگرافی تنها یکی از لایه‌هاست؛ مرور کامل‌تری در بهبود سرعت سایت موبایل کرده‌ام. برای سنجش اثر واقعی این تنظیمات روی متریک‌هایی مثل CLS و LCP، مقایسه ابزارهای تست سرعت سایت به‌دردتان می‌خورد.

تست روی دستگاه واقعی

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

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

جدول مرجع تنظیمات

پرسش‌های کوتاه

آیا اندازه فونت ۱۴ پیکسل برای متن فرعی قابل قبول است؟ برای متن فرعی و برچسب‌ها، ۱۴ پیکسل قابل قبول است؛ ولی برای پاراگراف اصلی خیر، چون کاربر برای هر جمله زوم می‌کند.

آیا می‌توانم همان ارتفاع خط دسکتاپ را در موبایل نگه دارم؟ خیر. ارتفاع خط دسکتاپ (مثلاً ۱.۵) روی موبایل برای متن فارسی تنگ است. حداقل ۱.۶ و ترجیحاً ۱.۷ باشد.

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

از منظر فنی

اگر با دید یک توسعه‌دهنده حرفه‌ای نگاه کنید، تایپوگرافی موبایل بخشی از بودجه کارایی (performance budget) و معماری CSS است، نه فقط تصمیم طراح. سه نکته سطح‌پایین که در پروژه‌های پیچیده به‌کارم آمده: اول، استفاده از clamp() برای اندازه فونت بدنه تا در بازه عرض‌های مختلف، اندازه به‌طور پیوسته تنظیم شود و نیازی به مدیاکوئری‌های متعدد نباشد. دوم، جدا کردن متغیرهای تایپوگرافی در :root و استفاده از CSS Custom Properties؛ این کار امکان مدیریت متمرکز و کاهش پیچیدگی نگهداری را می‌دهد. سوم، در سایت‌های چندزبانه، لود فونت را وابسته به زبان کنید تا کاربر فارسی فونت لاتین اضافه دانلود نکند. همه این‌ها در نهایت به یک اصل ساده برمی‌گردند: تایپوگرافی موبایل، مجموعه‌ای از تصمیم‌های کوچک است که اگر آگاهانه گرفته نشوند، در گوشی کاربر به یک تجربه فرسوده تبدیل می‌شوند.

اگر تجربه‌ای از تنظیم تایپوگرافی روی پروژه‌ای دارید که با یک تصمیم کوچک (مثلاً تغییر ارتفاع خط یا فونت) تجربه کاربر عوض شد، در دیدگاه‌ها بنویسید؛ دقیقاً همان نوع جزئیات برای خواننده بعدی کاربردی‌تر از هر قاعده کلی است. 📱