رفع ارور Use Legible Font Sizes

انتخاب مناسب اندازه فونت به صورت خوانا

این قاعده زمانی فعال می شود که PageSpeed Insights تشخیص دهد متن داخل صفحه شما بیش از حد کوچک بوده و خوانا نیست.https://www.seomoz.ir/img/mobile-responsive-v.png
بررسی اجمالی Use Legible Font Sizes

اندازه فونت وب می تواند از طریق four common units (چهار واحد متداول) مشخص شود: پیکسل (px)، نقاط (pt)، EMs (emm) و درصد (%).

• منظور از پیکسل، «پیکسل های CSS» بوده که بر اساس اندازه دستگاه و تراکم، متفاوت است.
• نقاط، در ارتباط با پیکسل ها تعریف شده اند. یک پیکسل ۷۵/۰ نقطه است *.
• EMها و درصد، واحدهای «نسبی» هستند: این واحدها با اندازه و ویژگی های به ارث برده شده در فونت مورد استفاده، متناسب هستند. مقدار ۱ برای EM معادل با ۱۰۰% است.

* به توضیحات بیشتر مراجعه کنید.علاوه بر این، viewport، بر چگونگی مقیاس بندی فونت ها روی تلفن های همراه، تاثیر می گذارد. یک صفحه بدون viewportای که به شکل مناسب، پیکربندی شده باشد، بر روی تلفن های همراه، کوچک شده و اغلب به واسطه کوچک شدن اندازه فونت ها، باعث ناخوانا بودن متن درون صفحه می گردد.
توصیه ها برای Use Legible Font Sizes

ابتدا، viewport خود را پیکربندی کنید configure a viewport، تا مطمئن شوید فونت ها، همانطور که انتظار دارید بر روی دستگاه های مختلف مقیاس بندی می شوند. پس از آنکه یک viewport را پیکربندی کردید، توصیه های زیر را به کار بگیرید.

1. از یک اندازه فونت پایه، ۱۶ پیکسل CSS، استفاده کرده و در صورت نیاز، اندازه را بر مبنای ویژگی های فونت مورد استفاده، تنظیم کنید.
2. از اندازه ها متناسب با اندازه پایه برای تعریف مقیاس چاپی استفاده کنید.
3. در متن ها باید فضای عمودی کافی، بین کاراکترها وجود داشته باشد و ممکن است شما برای هر فونت نیاز به تنظیم این فاصله داشته باشید. توصیه کلی ما این است که از مقدار پیش فرض مرورگر، یعنی ارتفاع خطوط، معادل با em2/1 استفاده کنید.
4. محدود کردن تعداد فونت های مورد استفاده و مقیاس تایپوگرافی: تعداد بیش از حد فونت ها و اندازه آنها، منجر به شلوغی و پیچیدگی لی اوت صفحات می گردد.

به عنوان مثال، اسنیپت CSS زیر، یک اندازه فونت پایه، معادل با ۱۶ پیکسل CSS، با کلاس ‘small’ که اندازه فونت آن، ۷۵% فونت پایه (۱۲ پیکسل CSS)، و کلاس ‘large’ که اندازه فونت آن ۱۲۵% فونت پایه (۲۰ پیکسل CSS) است، تعریف می کند:body { font-size: 16px;}.small { font-size: 12px; /* 75% of the baseline */}.large { font-size: 20px; /* 125% of the baseline */}برای مشاهده توصیه های بیشتر در ارتباط با فونت های قابل استفاده در تلفن های همراه، به دستورالعمل تایپوگرافی اندروید Android typography guidelines.، مراجعه کنید.



https://www.seomoz.ir/img/font-size-few-g.png

اطلاعات تکمیلی Use Legible Font Sizes

به منظور درک چگونگی تعریف واحدهای طول، CSS 2.1 specification را باید به طور دقیق مطالعه کرد. این مجموعه مشخصات، شامل واحد های بیشتری مانند اینچ، سانتی متر، میلی متر و پیکای است که در اینجا ذکر نشده اند. به راحتی فراموش می شود که اینچ CSS همیشه با اینچ فیزیکی برابر نیست.توجه داشته باشید که تمام واحدهای مطلق در ارتباط با یکدیگر تعریف شده اند. بعنوان مثال یک پیکسل، ۰.۷۵ نقطه است. یک نقطه، ۱/۷۲ اینچ است. یک اینچ، ۲.۵۴ سانتی متر است. به هر حال، تصمیم گیری در مورد چگونگی «لنگر شدن» این واحدها، بستگی به نوع دستگاه دارد. به عنوان مثال، هنگام چاپ بر روی کاغذ، یک اینچ به یک اینچ فیزیکی لنگر شده است و تمام واحد های دیگر باید متناسب با اینچ فیزیکی باشند. هنگامی که در یک تلفن همراه نمایش داده شده باشد، دستگاه ها با آنچه که به عنوان «پیکسل مرجع» شناخته شده است، لنگر می شوند. یک پیکسل CSS مطابق با این پیکسل مرجع تعریف شده و تمام واحد های دیگر، از قبیل اینچ، سانتی متر و غیره، نسبت به پیکسل CSS تنظیم شده اند. بنابراین، در یک تلفن همراه، یک اینچ CSS، معمولا کوچکتر از یک اینچ فیزیکی واقعی، نمایش داده می شود.به همین دلیل ما توصیه می کنیم اندازه فونت های خود را با استفاده پیکسل تعریف کنید. برخی از طراحان و توسعه دهندگان ممکن است هنگام دیدن واحدهای اینچ یا نقاط مورد استفاده، گمراه شوند. هر چند که این واحدها، ابعاد فیزیکی هستند، اما لزوما با اندازه های واقعی خود مطابقت ندارند. باید توجه داشته باشید که تغییر اندازه یک پیکسل مطابق با دستگاهی که روی آن نمایش داده می شود، همیشه قابل تصور است.در نهایت، هر فونت نیز دارای ویژگی های خاص خود از قبیل اندازه، فاصله و غیره می باشد. به طور پیش فرض، مرورگر هر فونت را با اندازه px16(پیکسل CSS) نشان می دهد. این یک پیش فرض مناسب برای اغلب موارد است، اما ممکن است برای یک فونت خاص، نیاز به تنظیم باشد، یعنی اندازه پیش فرض می تواند برای تطبیق با ویژگی های مختلف فونت، بزرگتر یا کوچکتر در نظر گرفته شود. پس از آنکه اندازه پیش فرض تنظیم شد، فونت های بزرگتر و کوچکتر باید با استفاده از پیکسل ها، نسبت به اندازه پیش فرض تعریف شوند. این امر می تواند بعدا برای تنظیم اندازه متون محتوای اولیه، ثانویه و انواع دیگر محتوای موجود در صفحه، مورد استفاده قرار گیرد.برخی از مرورگرهای تلفن همراه ممکن است بدون پیکربندی مناسب viewport سعی در مقیاس بندی فونت ها برای صفحات داشته باشند. این عمل در مرورگرهای مختلف، متفاوت بوده و نباید به آن برای ارائه فونت های خوانا در تلفن های همراه، اتکا کرد.PageSpeed Insights، متون واقع در صفحات شما را بدون مقیاس بندی فونت بکار رفته در مرورگر-خاص، نمایش می دهد.

منبع: سئوموز