تصميم الويب جاء من عصر اليوم دخلت webfonts استخدام واسعة الانتشار. قبل هذه النقطة يمكن القول بأننا كنا أقل مصممين من المهندسين.
ومع ذلك ، فإن الحماسة التي استخدمناها في خيارات الخط في تصميم الويب قد أدت إلى مجموعة مذهلة من الخيارات. لدرجة أن العديد من المصممين يختارون الطريق الأقل مقاومة ، مما يسمح للرغبة في التنفيذ البسيط بإملاء طباعتهم.
إذا كنت تعرف ما تبحث عنه ، فإن جميع الخيارات بسيطة. في هذه المقالة ، سنقوم بتسليحك بالمعرفة التي تحتاجها لاتخاذ قرارات مستنيرة عند الاختيار بين تقنية الخطوط.
سنوضح هذه الخيارات من خلال التركيز على أفضل طريقة لتقديم محرف كلاسيكي ، Garamond.
بعد أن أشاد بفضائل خطوط الويب ، فإن الخيار الأول الذي سننظر فيه لا يستخدم أية خطوط ويب على الإطلاق. إن تكديس الخط هو تقنية CSS تقوم فيها بتحديد عدد من الأخطاء التي تبدأ باختيارك الأول وتنتهي بحل شامل.
هناك الكثير من موارد تجميع الخطوط عبر الإنترنت ، ولكن أحد المفضلة هي cssfontstack.com، إنها نقطة بداية رائعة لمكدّس الخطوط ، لكن كن على دراية بأنه في أكثر الأحيان ستحتاج إلى جلب بعض الخبرة.
وفقا ل cssfontstack.com يتوفر Garamond كخط نظام على 49.91٪ من أجهزة Mac و 86.47٪ من أجهزة Windows. هذا جيد جدًا ، لكنه ليس جيدًا بما فيه الكفاية. في ما يلي مكدس الخط المقترح الذي يغطي جميع القواعد:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;السؤال هو ، كيف يمكننا تحسين هذا؟
حسنًا ، نحن نعلم أن هناك إصدارات عديدة من Garamond متاحة ، لذا يمكننا أن نضيف في شكل مختلف في الفتحة الثانية كحل وسط ثانوي.
وثانياً ، أنا لا أتفق مع "باسكرفيل" أو "تايمز" على أنهما بديلان مناسبان لـ "جاراموند" ، لذا دعنا نسقطها. يعمل Hoefler Text بشكل جيد بدلاً من Garamond ، بحيث يمكن أن يبقى. نحتاج إلى إضافة serif كأسلوب جمع نهائي ، ولكن نظرًا لأن معظم الأنظمة تستخدم Times كسلطتها الافتراضية ، فدعنا ندخل جورجيا المتفوقة إلى أقصى حد لأي شخص ينزلق عبر الشقوق.
تبدو كومة الخط النهائية المعدّلة كما يلي:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;غالبية المشاهدين سيشاهدون Garamond ، وسيجد عدد قليل من الآخرين تسوية معقولة وستحصل أقلية ضئيلة فقط على خطها الافتراضي الخطي.
تكون عملية تكديس الخط مجانية ، إلى حد بعيد ، أسرع حل ، واعتمادًا على الخط الذي اخترته يمكن أن يكون فعالاً للغاية ؛ في حالة Garamond هناك حجة جيدة لاستدعاء هذه "المهمة المنجزة".
ومع ذلك ، هناك مشكلة رئيسية واحدة مع تراص الخط ، وخاصة مع محرف مثل Garamond: هناك الكثير من إصدارات القراصنة في التداول أنه من المستحيل معرفة الخط الذي يسمى "Garamond" على نظام المستخدم ، وليس فقط لا يمكننا التأكد التصميم متوافق مع توقعاتنا ، قد يكون حجم الخط مختلفًا جذريًا عن الإصدار في تصميمنا. (من الناحية الفنية ، لا يوجد شيء يمنع نسخة Arial من إعادة تسمية "Garamond" ، وفي هذه الحالة ستستخدم كومة الخط الخاصة بنا ذلك.)
لذلك ، يعتبر تجميع الخطوط احتياطيًا رائعًا ، ويجب اعتباره للاستخدام مع جميع الحلول الواردة أدناه ، ولكنه أقل من مثالي كحل أولي.
جوجل الخطوط هو ، بالنسبة للعديد من المصممين ، النقطة التي تنتهي عندها عملية البحث. للحصول على إجمالي إجمالي قدره $ 0 ، يمكنك بسهولة تحميل صفحات الويب إلى موقعك باستخدام CSS.
الجانب السلبي الوحيد هو أن عدد المحارف المعروضة محدود للغاية. تدين خطوط محتملة مثل Roboto و PT Sans بشعبيتها بقدر ما توفرها مجانًا على Google Fonts ، فضلاً عن ميزات التصميم الخاصة بها.
حاليا ، الاختلاف الوحيد من Garamond المتاحة على Google Fonts هو EB جاراموند ، محاولة لفتح المصدر من محرف Garamond. لكن الخلل في هذا الإصدار هو أن هناك وزنا وأسلوبًا واحدًا فقط متاحين ؛ لا يوجد جريء أو مائل. قام المصمم جورج دوفنر بسخاء أعماله قيد التقدم Bitbucket لكنها ليست جاهزة للإنتاج.
Google Fonts هو حل رائع للميزانية ومثالي للحالات التي قد تكون فيها فاتورة الحساب بدلاً من العميل. القدرة على تحديد الخطوط في CSS بسيطة بقدر ما يمكن.
العيب الكبير في Google Fonts هو أنه على الرغم من تسويقها ، إلا أن هناك القليل من الخيارات. إذا كنت تبحث عن webfont من Open Sans ، فأنت في المكان الصحيح ، ولكن إذا كنت ترغب في استخدام خط مثل Garamond - وهو أمر غير واضح - فهو عملية غسيل.
الاستضافة الذاتية هي مقاربة لا تحظى بتقدير كبير لخطوط الويب. جذبها الرئيسي هو القدرة على الخطوط الفرعية ، وهو خيار جذاب تقريبا جميع خدمات البث محاولة لمحاكاته.
إذا كان لديك نسخة مكتوبة من Garamond على نظامك ، فافتحها وسيظهر لك عدد محير من الأحرف. يُعد تضمين خط ما عملية حذف الأحرف غير الضرورية مما يؤدي إلى حجم ملف أصغر وتسليم أسرع.
وبالطبع ، ستعتمد الشخصيات التي تحتاجها على الموقع الذي تبنيه: إذا كنت بصدد بناء مرشد سياحي إلى دوبروفنيك ، فستحتاج على الأرجح إلى الأحرف السيريلية الصربية. إذا كنت تقوم بإعادة إنتاج الأعمال التي تم جمعها من Shakespeare فمن غير المحتمل أنك ستحتاج إلى رمز @.
لتعيين خط ، ستحتاج إلى برنامج لتعديل الخطوط. هناك العديد من الخيارات المتاحة من مجانا فونت فورج إلى القسط فونت لاب ستوديو. لإنتاج نسخة فرعية من الخط ، ما عليك سوى تحديد حرف رسومي لا تريده ، وحذفه ، ثم حفظ الملف في مجلد المشروع. (يجب الحرص على عدم استبدال ملف الخط الأصلي الخاص بك!)
ملف ttf الكامل لـ Adobe Garamond Pro هو 606 كيلوبايت. يخفضها إلى الأحرف اللاتينية الأساسية وعلامات الترقيم تقلل إلى 56 كيلوبايت. يمكنك مضاعفة ذلك عبر العديد من الأوزان والأنماط ، ويتم توفير بضع ميغابايت في التنزيلات للمستخدمين.
معظم ملفات الخطوط التي قمت بتثبيتها ستكون TrueType (.ttf) مع القليل من OpenType (.otf). يمكنك حفظها على خادمك وتحديدها في CSS.
دعم تنسيقات الملفات .ttf و .otf واسع الانتشار في جميع المتصفحات الحديثة باستثناء IE (حتى الإصدار الأخير) وبعض متصفحات الجوال (بما في ذلك الإصدارات القديمة من iOS Safari).
لزيادة التغطية ، ستحتاج إلى العديد من التنسيقات الإضافية. يعمل .eot لـ IE ، .woff يعمل لمعظم المتصفحات وهو التنسيق المفضل لـ W3C ، سيعمل .svg على المتصفحات القديمة. هناك عدد من خدمات الويب التي ستنشئ هذه التنسيقات لك من ملف. ttf الخاص بك ، وهو أحد أكثر الملفات شعبية الخط السنجاب.
الجانب السلبي مع تحويل خطوط سطح المكتب للاستخدام عبر الإنترنت ذو شقين: أولاً ، من شبه المؤكد أنك غير مرخص للقيام بذلك ؛ وثانيًا ، يتم دائمًا تحسين خطوط سطح المكتب للطباعة ، فهي ببساطة لا تعرض بشكل جيد على الشاشة.
أخيرا استيقظت مسابك الخط إلى حقيقة أن هناك سوقا ضخمة لخطوط الويب. ونتيجة لذلك ، لم يقوموا فقط بتشديد الترخيص الخاص بهم ، ولكنهم يعملون نحو تحسين كتالوجاتهم الخلفية للشاشات.
توفر المسابك التي توفر خطوط ويب مخصصة كافة التنسيقات المطلوبة وجودة فحصها وجاهزة للتحميل إلى خادمك. والأكثر من ذلك أنك لا تزال أحرارًا في تجميع ملف ما ، وأنك لا تعتمد على وقت تشغيل خادم الجهة الخارجية.
هناك العديد من الأماكن يمكنك شراء خطوط الويب ، اثنين من اللاعبين الرئيسيين في هذا المجال FontShop.com و MyFonts.com .
بالعودة إلى مأزق Garamond ، يمكننا أن نرى أن MyFonts لها عدد من الإصدارات المختلفة من Garamond على العرض. يمكننا الترخيص أدوبي جاراموند في عدة أوزان ، مقيدًا بـ 250 ألف مشاهدة للصفحة ، مقابل 180 دولارًا تقريبًا.
لديها FontShop أيضا عددا من إصدارات webfont من Garamond المتاحة. URW Garamond الويب يوفر كل الوزن والأسلوب الذي يمكن أن نرغب فيه ، وكل ذلك مع عدد مشاهدات سخي تبلغ 500،000 صفحة شهريًا. ما هو أكثر من ذلك ، لديها FontShop مخصص subsetter لتحسين مشترياتك الخطية الجديدة اللامعة. لسوء الحظ ، أنت تدفع علاوة لكل هذا ، حوالي 680 دولارًا لأسرة الخطوط الكاملة.
الاستضافة الذاتية تمكن الغطس. يضمن لك التحكم في تسليم الخط الخاص بك ، وتجنب أي نوع من الاعتماد على خوادم الطرف الثالث.
والأكثر من ذلك ، إذا كنت تشتري webfont محترف ، فيمكنك توقع أن تكون الجودة عالية للغاية.
كما أن الاستضافة الذاتية تناشد أولئك الذين يفضلون "امتلاك" خطوطنا بدلاً من استئجارها. وبالطبع ، من الناحية القانونية ، هناك ملكية ضئيلة للغاية على الإطلاق ، لكن الرسوم التي تدفع لمرة واحدة تجلس بشكل مريح أكثر بكثير من الاكتتاب لكثير من الناس.
الجانب السلبي الوحيد للاستضافة الذاتية هو السعر الأساسي. لن تحتاج فقط إلى دفع ثمن الخط ، بل قد تحتاج إلى حساب تكاليف الاستضافة والنطاق الترددي في الأرقام الخاصة بك.
تمامًا مثل Google Fonts ، تقدم خدمات webfont الخطوط إلى متصفحاتنا عبر CSS بسيط. بخلاف Google Fonts ، هناك مجموعة كبيرة للاختيار من بينها.
هناك عدد من البائعين المختلفين للاختيار من بينها ، وأنا معجب على نحو خاص بـ Hoefler & Frere-Jones cloud.typography الخدمات. ومع ذلك ، وكما هو الحال مع العديد من البائعين الأصغر ، تعتمد فائدتهم بشكل كامل على توفر محرف الطباعة الذي تبحث عنه. يمكن لأقرب خط Hoefler & Frere-Jones العرض على Hoefler Text ، ومع ذلك إذا كنا ندفع قسطًا لا ينبغي لنا تقديم تنازلات.
أكبر لاعب في تدفق webfont هو أدوبي Typekit . جودة الخطوط الخاصة بهم عالية جداً ، والتنفيذ بسيط ، والأهم من ذلك لديهم كتالوج ضخم للاختيار من بينها.
يوفر Typekit مجموعة من الاشتراكات تتراوح من 24.99 دولارًا في السنة مقابل 50000 مشاهدة في الشهر ، إلى 99.99 دولارًا سنويًا مقابل 1000000 مشاهدة في الشهر. ومع ذلك ، إذا كنت عضو Creative Cloud ، يتم تضمين خطة Portfolio Plan في اشتراكك ؛ وهذا يعني أنه بالنسبة لمعظم مصممي الويب Typekit هو حل مجاني.
يخبرنا بحث سريع أن هناك العديد من إصدارات Garamond ، بما في ذلك أدوبي الخاصة ، المتاحة على Typekit. وهناك أيضًا ميزة محدودة للغاية تتيح لنا تقليل حجم الملف قليلاً.
توفر خدمات بث Webfont مجموعة كبيرة من الخطوط الممتازة ذات الجودة ، والتي يسهل إضافتها إلى موقعك.
في حالة Typekit ، إذا كنت عضو Creative Cloud بالفعل ، فإن الوصول المجاني يجعل هذا الخيار أكثر جاذبية. ومع ذلك ، إذا لم تكن عضوًا ، فأنت تواجه خيارًا بين دفع اشتراك كبير وربط نفسك بـ Adobe.
اهتمامي الأساسي بأي خدمة بث هو أنك تعتمد بشكل كامل على أداء خادم الجهة الخارجية. إذا انحل الخادم الخاص به ، فإن جزءًا كبيرًا من علامتك التجارية ينخفض أيضًا.
كما هو الحال مع الكثير من الأشياء ، فإن الإجابة هي: تعتمد على مشروعك. ولكن هناك بعض القرارات التي يمكننا اتخاذها استنادًا إلى اختبار Garamond:
إن تكديس الخط هو نسخة احتياطية بدون تكلفة ، ويوفر حلًا على العلامة التجارية إذا كانت ملفات الخطوط مفقودة أو بطيئة. يجب أن يتم تنفيذه دائمًا على أي موقع ، ولكن الاعتماد عليه ، حتى بالنسبة لشيء شائع مثل Garamond يحتمل أن يكون خطيراً.
إذا كان الخط الذي تبحث عنه متاحًا للبث مجانًا ، إما عبر Google Fonts ، أو على سبيل المثال إذا كان لديك اشتراك Creative Cloud ، فهذا خيار جيد. وبما أن لديّ اشتراك Creative Cloud ، فسأكون قد أغمي على هذا الطريق ، على الرغم من أن الافتقار إلى مقاصة حقيقية سيكون مصدر قلق.
إذا كان لديك ميزانية ، فإن الاستضافة الذاتية لل webfont المحترف هو الخيار الأفضل. إن التكلفة المتواضعة نسبيا - عند مقارنتها بالتصوير الفوتوغرافي للأوراق المالية - يمكن تبريرها بسهولة عن طريق التوصيلات الضخمة لتعزيز السرعة.
في الصناعة التي نقوم فيها بتصغير ملفات جافا سكريبت إلى حفظ بضعة كيلوبايت ، فإن حلق مئات المرات من ذلك المبلغ من ملف واحد هو عدم التفكير.