سایز مناسب فونت در طراحی وب سایت
سایز مناسب فونت در طراحی وب سایت : دستگاه های تلفن همراه انواع مختلفی دارند ، بنابراین مهم است که متن موجود در سایت شما دارای اندازه قلم قابل خواندن در اندازه های مختلف صفحه باشد. متن باید به اندازه کافی بزرگ باشد تا بدون بزرگنمایی برای بزرگنمایی خوانده شود ، اما در عین حال خیلی بزرگ نباشد که کاربران برای خواندن تمام مطالب برای همیشه پیمایش کنند.
داشتن اندازه ای از قلم که کاربران می توانند برای بزرگنمایی یا تغییر حالت به راحتی بخوانند ، به افرادی که از طریق دستگاه های تلفن همراه از سایت شما بازدید می کنند ، تجربه بسیار بهتری می دهد.
اندازه ایده آل قلم موبایل چیست؟
سایت موبایل ایده آل متنی دارد که وقتی کاربر به تلفن خود از فاصله ای راحت نگاه می کند ، به راحتی قابل خواندن است.سایز مناسب فونت در طراحی وب سایت برای صفحه های موبایل ۱۶ پیکسل است. در CSS سایت شما ، توصیه می شود “font-size” را در متغیر “ems” تنظیم کنید تا به راحتی مقیاس بندی شود.
استفاده از ems مفید است زیرا متن را نسبت به اندازه تعیین شده در document تغییر می دهد.
چگونه اطمینان حاصل کنیم که متن شما در همه صفحه ها خوانا است.
- در مورد موضوع یا الگوی تلفن همراه تحقیق کنید.
اگر از وردپرس ، Shopify یا دیگر سیستم عامل CMS استفاده می کنید ، می توانید به سادگی یک تم یا الگوی موبایل خریداری کنید که باعث شود سایت شما به طور خودکار پاسخگو باشد. اندازه متن به طور خودکار متناسب با دستگاه مورد استفاده تغییر می کند.
قبل از پرداختن به theme یا template ، حتماً نظرات طراحان وب را که قبلاً از آن استفاده کرده اند بخوانید و به سایتهایی نگاه کنید که از موضوع یا قالب خاص استفاده می کنند تا مورد علاقه شما باشد.
بیشتر قالبها قبل از خرید نسخه آزمایشی به صورت دمو را ارائه می دهند تا بتوانید موضوع را روی دسک تاپ خود آزمایش کنید و روی “Inspect Element”کلیک کنید تا طرح الگوی سایت را براساس چند اندازه صفحه مشاهده کنید: -
خواه از theme یا طرح وب سفارشی استفاده می کنید ، باید نمای موبایل خود را مشخص کنید. - طراحی پاسخگو همراه را پیاده سازی کنید.
برای مدیریت اندازه قلم سایت خود در دستگاه های مختلف می توانید از CSS استفاده کنید. روش کار بسیار ساده است:
اندازه قلم می تواند از واحدهای مختلفی برای اندازه گیری متن شما استفاده کند:
– pixels (px)
– points (pt)
– EMs (em)
– percent (%)
توصیه عمومی استفاده از پیش فرض مرورگر ۱.۲em ، ۱۲pt ، ۱۶px یا p {font-size: 120٪؛} است.
اندازه قلم مناسب را برای هر نوع انتخاب کنید: عنوان ، پاراگراف. ۱۶ پیکسل تنظیمات پیش فرض CSS است. اکثر theme های که برای سایت خود نصب کرده اید دارای تنظیمات اضافی هستند تا تغییر اندازه را بر اساس نیاز سایت انجام دهید.
از اندازه خیلی بزرگ [اندازه ۲۰ یا بیشتر] استفاده نکنید. این را برای titles و headlines بگذارید. اندازه قلم های بزرگ به این معنی است که کاربران مجبور به scroll طولانی تر هستند ، که کاربر پسند نیست.
قانون Thumb :
تئوری خوانایی کلاسیک نشان می دهد که یک ستون ایده آل باید شامل ۷۰ تا ۸۰ حرف در هر خط باشد (حدود ۸ تا ۱۰ کلمه به زبان انگلیسی). بنابراین ، هر بار که عرض یک بلوک متنی از ۱۰ کلمه عبور کرد ، افزودن نقطه شکست (breakpoint)را در نظر بگیرید.
این اندازه قلم را بسته به ویژگی های قلم مورد استفاده خود تنظیم کنید.
- اندازه قد برای قلم شما
حتماً فضای کافی بین خطوط و پاراگراف ها را بگذارید تا صفحه خیلی فشرده به نظر نرسد. اگرچه می توانید با ارتفاع کم خط و متن فشرده در یک سایت دسک تاپ کنار بیایید ، اما تقریباً غیرممکن است که کاربر چنین متنی را روی دستگاهی با صفحه کوچک بدون بزرگنمایی بخواند و این تجربه نسبتاً ناخوشایندی را ایجاد می کند.
برای لینک ها ، شما باید فضای بیشتری بین خطوط متن برای tap screen readiness بگذارید.
سه مثال پاراگراف فوق که توسط css-tricks ارائه شده اند که دارای ارتفاع خط ۱۵۰٪ ، ۲۰۰٪ و ۲۵۰٪ یا ۳۰px ، ۴۰px و ۵۰px می باشند.
Google پیشنهاد می کند حداقل از خط پیش فرض مرورگر ، برابر با ۱.۲ استفاده کنید ، این بدان معنی است که فاصله بین خطوط متن حداقل ۱.۲ برابر اندازه متن است.