ناامید کننده ترین جنبه طراحی وب برای طراحان آموزش دیده برای print، فقدان مداوم کنترل تایپوگرافی است. انتخاب دقیق تایپوگرافی مشخصه کار با کیفیت است و فقدان آن کیفیت آنلاین هرگز برای ما که می‌دانیم به دنبال چه هستیم آزاردهنده نیست. خوشبختانه سطح کنترلی که ما داریم مدام در حال افزایش است و پشتیبانی از رندر تایپوگرافی پیشرفته تر نیز در حال افزایش است. در حالی که مطمئناً نمی‌توان نوع رفتاری را ارائه کرد که برنامه‌هایی مانند Illustrator ارائه می‌کنند – که در آن هر حرف می‌تواند در صورت لزوم تغییر داده شود – ابزارهایی برای افزایش کیفیت وجود دارد. یکی از کم شناخته شده ترین ویژگی های رندر متن است. شما ویژگی رندر متن را در هیچ مشخصات CSS پیدا نخواهید کرد زیرا از نظر فنی CSS نیست، یک ویژگی SVG است، اگرچه درست مانند یک ویژگی CSS استفاده می شود. مهمترین چیز این است که با یک خط CSS می توانیم چند رودخانه و سایر عیوب را از متن خود حذف کنیم. ویژگی text-rendering چهار تنظیمات دارد:

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

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

.myClass { text-rendering: optimizeLegibility; }

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

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

کروم مک

Chrome Windows

فایرفاکس مک

فایرفاکس ویندوز

اینترنت اکسپلورر 9 ویندوز

سافاری مک

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

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

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