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

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

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

خوشبختانه، سطح کنترلی که ما داریم همیشه در حال افزایش است و پشتیبانی از رندر تایپوگرافی پیشرفته تر نیز در حال افزایش است. در حالی که مطمئناً نمی‌توان نوع رفتاری را ارائه داد که برنامه‌هایی مانند Illustrator ارائه می‌کنند – که در آن می‌توان هر حرف را در صورت لزوم تغییر داد – ابزارهایی برای افزایش کیفیت وجود دارد. یکی از کم شناخته شده ترین ویژگی های رندر متن است.

شما ویژگی رندر متن را در هیچ یک از مشخصات CSS پیدا نخواهید کرد زیرا از نظر فنی CSS نیست، یک ویژگی SVG است، اگرچه درست مانند یک ویژگی CSS استفاده می شود. مهم‌ترین چیز این است که با یک خط CSS، می‌توانیم چند رودخانه و سایر نواقص را از متن خود حذف کنیم.

ویژگی رندر متن دارای چهار تنظیم است:

• خودکار: به مرورگر این امکان را می‌دهد که خودش یک تنظیم را انتخاب کند
• optimizeSpeed: روی سرعت تمرکز می کند
• optimizeLegibility: بر رندر پیشرفته تمرکز دارد
• geometricPrecision: رندر دقیق

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

از آنجایی که بسیاری از ما صفحاتی را تولید نمی کنیم که به اندازه کافی قابل توجه باشد تا نیاز به تنظیمات optimizeSpeed ​​را توجیه کند، ما واقعاً فقط به optimizeLegibility علاقه مند خواهیم بود (اگرچه geometricPrecision برای فونت های خاص مفید است).

کد CSS به شرح زیر است:

.myClass { text-rendering: optimizeLegibility; }

در اینجا یک مقایسه مستقیم بین optimizeSpeed ​​و optimizeLegibility وجود دارد، همانطور که با دقت می‌بینید، دو پیشرفت قابل توجه در نسخه خواناتر وجود دارد: کاراکترهای ‘ffi’ در خط اول به درستی با یک لیگاتور جایگزین شده‌اند، و هسته گذاری در سراسر بهبود یافته است، که به ویژه در خط پنجم قابل توجه است، جایی که فضای بین “V” و “e” اصلاح شده است.

پیشرفت‌های هسته‌سازی را می‌توان به راحتی در این هم‌پوشانی‌ها مشاهده کرد:

Chrome Mac

Chrome Windows

Firefox Mac

Firefox Windows

Internet Explorer 9 Windows

Safari Mac

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

آیا از ویژگی رندر متن در CSS خود استفاده می کنید؟ آیا کسی جز یک تایپوگراف متوجه تفاوت می شود؟ نظرات خود را در نظرات با ما در میان بگذارید.

تصویر/تصویر کوچک ویژه، تنظیم تصویر از طریق Shutterstock.