بهترین راه برای ارائه فونت به وب سایت شما

طراحی وب از روزی که وب فونت ها به طور گسترده مورد استفاده قرار گرفتند، روی کار آمد. قبل از آن نقطه، می توان بحث کرد که ما کمتر طراح بودیم تا مهندس.

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

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

ما این گزینه‌ها را با تمرکز بر بهترین راه برای ارائه یک تایپ‌فیس کلاسیک، Garamond، نشان می‌دهیم.

انباشت قلم

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

منابع انباشته فونت های زیادی به صورت آنلاین وجود دارد، اما یکی از موارد مورد علاقه من cssfontstack.com،است. > این یک نقطه شروع عالی برای پشته قلم است، اما توجه داشته باشید که بیشتر اوقات نیاز به ارائه تخصص دارید.

طبق گزارش cssfontstack.com Garamond به عنوان یک فونت سیستمی در 49.91٪ از Mac و 86.47٪ از ماشین های ویندوز در دسترس است. این خیلی خوب است، اما به اندازه کافی خوب نیست. این پشته فونت پیشنهادی است که همه پایه‌ها را پوشش می‌دهد:

font-family: Garamond، Baskerville، "Baskerville Old Face"، "Hoefler Text"، "Times New Roman"، serif;

سوال این است که چگونه می توانیم این را بهبود بخشیم؟

خب، ما می‌دانیم که نسخه‌های متعددی از Garamond موجود است، بنابراین می‌توانیم یک تغییر در شکاف دوم به عنوان یک مصالحه جزئی اضافه کنیم.

ثانیاً من موافق نیستم که باسکرویل یا تایمز جایگزین های مناسبی برای گاراموند هستند، پس بیایید آنها را کنار بگذاریم. Hoefler Text به جای Garamond به خوبی کار می کند، بنابراین می تواند باقی بماند. ما باید سریف را به‌عنوان یک جمع‌بندی نهایی اضافه کنیم، اما از آنجایی که اکثر سیستم‌ها از Times به‌عنوان سریال پیش‌فرض خود استفاده می‌کنند، بیایید در گرجستان بسیار برتر برای هرکسی که از بین می‌رود، شکاف دهیم.

پشته قلم اصلاح شده نهایی ما به این صورت است:

font-family: Garamond، "Adobe Garamond Pro"، "Hoefler Text"، Georgia، serif;

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

مزایا و معایب

چیدمان فونت رایگان است، تا حد زیادی سریعترین راه حل، و بسته به نوع قلم انتخابی شما می تواند بسیار موثر باشد. در مورد Garamond استدلال خوبی برای نامیدن این “کار انجام شده” وجود دارد.

با این حال، یک مشکل عمده در چیدمان فونت‌ها، به‌ویژه با تایپ‌فیتی مانند Garamond وجود دارد: نسخه‌های دزدان دریایی بسیار زیادی در گردش هستند که نمی‌توان فهمید کدام فونت در سیستم کاربر “Garamond” نام دارد، نه تنها می‌توانیم مطمئن نباشید که طراحی با انتظارات ما مطابقت دارد، مقیاس فونت ممکن است به طور اساسی با نسخه طراحی ما متفاوت باشد. (از لحاظ فنی، هیچ چیزی مانع از تغییر نام یک نسخه از Arial به “Garamond” نمی شود، در این صورت پشته قلم ما از آن استفاده می کند.)

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

گوگل فونت

فونت‌های Google برای بسیاری از طراحان نقطه‌ای است که در آن به کار خود پایان می‌دهند. جستجو کردن. برای مجموع 0 دلار می توانید به راحتی وب فونت ها را با استفاده از CSS در سایت خود بارگذاری کنید.

تنها نقطه ضعف این است که تعداد حروف چاپی پیشنهادی بسیار محدود است. تایپ‌فیس‌هایی مانند Roboto و PT Sans محبوبیت خود را به همان اندازه مدیون در دسترس بودن رایگان آنها در فونت‌های Google و کیفیت طراحی آنهاست.

در حال حاضر، تنها نوع Garamond موجود در فونت‌های Google EB است. Garamond، تلاشی برای منبع باز حروف نگاری Garamond. اما نقص این نسخه این است که تنها یک وزن و سبک در دسترس است. هیچ پررنگ یا ایتالیک وجود ندارد. طراح گئورگ دافنر سخاوتمندانه کارهای خود را در حال پیشرفت در Bitbucket در دسترس قرار داده است. اما آماده تولید نیست.

مزایا و معایب

Google Fonts یک راه‌حل بودجه عالی و ایده‌آل برای موقعیت‌هایی است که ممکن است شما به‌جای مشتری خود، صورت حساب را پرداخت کنید. اینکه بتوانید فونت های خود را در CSS مشخص کنید تا حد ممکن ساده است.

عیب بزرگ فونت های گوگل این است که علیرغم بازاریابی آنها، انتخاب بسیار کمی وجود دارد. اگر به دنبال یک وب فونت Open Sans هستید، در جای درستی هستید، اما اگر فونتی مانند Garamond را می‌خواهید – که به سختی مبهم است – این یک کار پاک است.

خود میزبانی

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

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

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

برای زیر مجموعه یک فونت، به نرم افزار ویرایش فونت نیاز دارید. گزینه های زیادی از FontForge رایگان تا FontLab Studio. برای تولید نسخه زیرمجموعه ای از فونت، به سادگی علامتی را انتخاب کنید که ندارید. بخواهید، و آن را حذف کنید، سپس فایل را در پوشه پروژه خود ذخیره کنید. (مراقب باشید فایل فونت اصلی خود را بازنویسی نکنید!)

فایل کامل .ttf برای Adobe Garamond Pro 606 کیلوبایت است. حذف آن به نویسه‌های اصلی لاتین و علائم نگارشی آن را به 56 کیلوبایت کاهش می‌دهد. آن را در چندین وزن و سبک ضرب کنید تا چند مگابایت در دانلودها برای کاربران خود ذخیره کنید.

فونت های دسکتاپ خود میزبان

اکثر فایل‌های فونتی که نصب کرده‌اید TrueType (.ttf) با مقدار کمی OpenType (.otf) خواهند بود. می توانید آنها را در سرور خود ذخیره کنید و در CSS خود مشخص کنید.

پشتیبانی از فرمت‌های فایل .ttf و .otf در همه مرورگرهای مدرن به جز IE (حتی آخرین نسخه) و برخی از مرورگرهای تلفن همراه (از جمله نسخه‌های قدیمی iOS Safari) گسترده است.

برای افزایش پوشش خود به چندین قالب اضافی نیاز دارید. .eot برای IE کار می کند، .woff برای اکثر مرورگرها کار می کند و فرمت ترجیحی W3C است، .svg روی مرورگرهای قدیمی کار می کند. تعدادی سرویس وب وجود دارد که این قالب‌ها را از فایل ttf. شما برای شما تولید می‌کنند که یکی از محبوب‌ترین آنها Font Squirrel’s.

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

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

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

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

مکان‌های زیادی وجود دارد که می‌توانید فونت‌های وب خریداری کنید، دو تا از بازیگران کلیدی در این زمینه FontShop هستند. com و MyFonts.com.

با بازگشت به معضل Garamond، می‌توانیم ببینیم که MyFonts نسخه‌های مختلفی از Garamond را ارائه می‌کند. ما می‌توانیم مجوز Adobe Garamond را در چندین وزن، محدود به 250000 بازدید از صفحه، حدود 180 دلار.

FontShop همچنین تعدادی نسخه وب فونت Garamond را در دسترس دارد. URW Garamond Web هر وزن و سبکی را که می توانیم ارائه می دهد احتمالاً می خواهید، همه با سخاوتمندانه 500000 بازدید از صفحه در ماه. علاوه بر این، FontShop یک زیر مجموعه اختصاصی برای بهینه سازی خرید فونت های جدید و درخشان شما دارد. متأسفانه شما برای همه اینها حق بیمه پرداخت می کنید، حدود 680 دلار برای خانواده کامل فونت.

مزایا و معایب

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

علاوه بر این، اگر یک فونت وب حرفه‌ای خریداری می‌کنید، می‌توانید انتظار داشته باشید که کیفیت آن بسیار بالا باشد.

میزبانی شخصی برای کسانی از ما که ترجیح می‌دهند به جای اجاره کردن فونت‌هایمان، «مالک» فونت‌هایمان باشند، جذاب است. البته، از نظر حقوقی، مالکیت بسیار کمی وجود دارد، اما هزینه یکباره راحت‌تر از اشتراک برای بسیاری از افراد است.

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

خدمات وب فونت

درست مانند فونت های گوگل، سرویس های فونت وب فونت ها را از طریق CSS ساده به مرورگرهای ما ارائه می دهند. برخلاف فونت های گوگل، طیف وسیعی برای انتخاب وجود دارد.

تعدادی فروشنده مختلف برای انتخاب وجود دارد، و من به ویژه cloud.typography. با این حال، مانند بسیاری از فروشندگان کوچکتر، سودمندی آنها کاملاً به در دسترس بودن تایپ فیس مورد نظر شما بستگی دارد. نزدیک‌ترین فونتی که Hoefler & Frere-Jones می‌تواند ارائه کند Hoefler Text است، اما اگر حق بیمه پرداخت می‌کنیم، نباید مصالحه کنیم.

بزرگترین پخش کننده در پخش فونت وب Adobe Typekit است. کیفیت فونت آنها بسیار بالا است، پیاده سازی ساده است، و مهمتر از همه آنها یک کاتالوگ بزرگ برای انتخاب دارند.

Typekit طیف وسیعی از اشتراک‌ها را ارائه می‌کند که از 24.99 دلار در سال برای 50000 بازدید در ماه تا 99.99 دلار در سال برای 1000000 بازدید در ماه متغیر است. با این حال، اگر عضو Creative Cloud هستید، طرح نمونه کارها در اشتراک شما گنجانده شده است. به این معنی که برای اکثر طراحان وب، Typekit یک راه حل رایگان است.

یک جستجوی سریع به ما می گوید که چندین نسخه Garamond وجود دارد، از جمله Adobe’s خود، موجود در Typekit. و همچنین یک ویژگی زیرمجموعه بسیار محدود وجود دارد که به ما امکان می دهد تا اندازه فایل را کمی کاهش دهیم.

مزایا و معایب

سرویس‌های پخش وب فونت‌های متنوعی از فونت‌های با کیفیت عالی را ارائه می‌دهند که به راحتی به سایت شما اضافه می‌شوند.

در مورد Typekit، اگر قبلاً عضو Creative Cloud هستید، دسترسی رایگان این گزینه را جذاب‌تر می‌کند. با این حال، اگر عضو نیستید، با انتخابی بین پرداخت اشتراک قابل توجه و پیوستن به Adobe روبرو هستید.

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

کدام انتخاب مناسب است؟

مانند بسیاری از چیزها، پاسخ این است: بستگی به پروژه شما دارد. اما تصمیماتی وجود دارد که می توانیم بر اساس تست Garamond خود بگیریم:

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

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

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

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

تصویر/تصویر کوچک، دانلود تصویر از طریق Shutterstock.