تحطيم بودكاست الحلقة 5 مع جايسون بايتنشيال: ما هي الخطوط المتغيرة؟

كل أسبوعين ، ننشر بودكاست أتحدث فيه إلى شخص من صناعة الويب حول موضوع مختلف. في هذه الحلقة ، دعونا نتعرف على كل ما يتعلق بالخطوط المتغيرة! أتحدث إلى مجموعة من المعارف في هذا الشأن ، يا جيسون بيتيكال.

وتظهر الملاحظات

تحديث اسبوعي

• "أنظمة توضيح العلامة التجارية: رسم هوية بصرية قوية" ، ييهوي ليو
• "تكافح من أجل السيطرة على زيادات المرور" ، سوزان سكاكا
• راشيل أندرو "Building A CSS Layout: Live Stream with Rachel Andrew"
• "تقرير عن تصميم الويب وتطويره لعام 2019" ، راشيل أندرو
• "هل يجب أن يكون موقع محفظتك PWA؟" ، سوزان سكاكا

الخطوط المتغيرة

• ابحث عن Jason على الويب على rwt.io
• النشرة الإخبارية للطباعة على شبكة الإنترنت
• "الخطوط المتغيرة: ما يحتاج مؤلفو الويب إلى معرفته" ، جايسون بايجال
• كتاب إيلين لبتون "التفكير بالنوع"
• كتاب إيريك سبيكرمان "توقف عن سرقة الأغنام واكتشف كيف تعمل الكتابة"

نسخة طبق الأصل

درو ماكليلان: هو استراتيجي تصميم ، وقائد تجربة المستخدم ، وتقني ، وخبير في طباعة الويب ، وخبير مدعو في مجموعة عمل W3C Web Fonts. يكتب ويتحدث ويعمل مع الفرق وأصحاب العلامات التجارية حول كيفية تعيين الكتابة بشكل أفضل على المنصات الرقمية. لقد تحدث مع مؤسسات مثل Adobe و Audible و Conde Nast و GoDaddy و IBM ، وقدم عروضًا تقديمية وورش عمل ومؤتمرات في جميع أنحاء العالم. رسالته الإخبارية ، Web Typography News ، تحظى بشعبية بين أولئك الذين يريدون آخر التحديثات والنصائح حول الطباعة على الويب. من الواضح أنه خبير في طباعة الويب. لكن هل تعلم أنه مثل السويد في لون كروكيه في دورة الألعاب الأولمبية عام 1984؟ أصدقائي المحطمون ، من فضلكم رحبوا بجيسون بيتيكال. مرحبا جايسون. كيف حالك؟

جايسون باتريكي: أنا محطمة. خاصة بعد تلك المقدمة.

درو: أردت التحدث معك اليوم بشكل واضح عن طباعة الويب لأن هذا هو الشيء الذي تفضله حقًا. أنت خبير حقيقي في طباعة الويب. حول ذلك بشكل عام ، ولكن بشكل خاص ، تحدث قليلاً عن الخطوط المتغيرة. سأكون أول من يعترف بأنني لست خبيرًا في الطباعة. أعني ، من فضلك اعتبرني جاهل مثل أي شخص يستمع. لا يمكنك إرضائي بأي معلومات حول الطباعة. أعتقد أن لدينا خطوط ويب قابلة للاستخدام على الويب على الأرجح لنحو عقد الآن. هل هذا صحيح؟

جايسون: أجل. في الواقع ، ألم تكن أنت من بدأت شيئًا ما على Twitter منذ بضعة أيام؟ كان ذلك مثل التاسع من نوفمبر (تشرين الثاني) من عام 2009. إنه مثل 10 أعوام في يومين منذ إطلاق Typekit. أعلم أن Font Deck كان على حق في نفس الإطار الزمني. ثم Google Fonts and Monotype Service لم يمض وقت طويل. تلقيت دعوة تجريبية تلقيتها من صديقي ، جون سيانسي ، الذي لا يزال في الواقع الآن زميلًا لزوجتي في الوكالة التي تعمل بها في Typekit في وقت ما في عام 2009. كان هذا تجديدًا كاملاً لاهتمامي بالويب . أعني أنها كانت ثورة بالنسبة لي. أعني ، لطالما أحببت الطباعة عندما كنت أدرسها في المدرسة ، لكن لم نتمكن من فعل أي شيء بها على الويب لمدة 15 عامًا. كان ذلك مذهلاً جدًا.

درو: يجب أن يكون هناك مصممين يعملون على الويب الآن لديهم خطوط ويب لمدة 10 سنوات بالإضافة إلى إمكانية. هناك مصممين يعملون على الويب الآن لم يسبق لهم تصميم موقع دون القدرة على الاختيار من بين مجموعة كبيرة من الخطوط.

جايسون: نعم ، هذا صحيح. لم يضطر أي شخص بدون هذه الخبرة إلى دفع وحدات البكسل صعودًا في كلا الاتجاهين كما فعلنا عندما نشأنا. نحن لسنا رجال عجوز غريب الأطوار يهزون بقبضاتهم في السماء. لكن نعم ، إنه لأمر مدهش نوعًا ما مع كل الأشياء التي تغيرت على الويب ، فإن الفكرة التي لم يختبرها بعض الأشخاص بأي طريقة أخرى هي فكرة رائعة.

درو: في الوقت الذي حصلنا فيه على خطوط الويب ، كان هذا تحولًا كبيرًا في كيفية بدء استخدام الطباعة على الويب لأننا استطعنا حقًا البدء في استخدام الطباعة على الويب. من الواضح أنه كانت هناك أشياء يمكننا القيام بها باستخدام الخطوط الآمنة للويب ، لكننا كنا مقيدين جدًا بلوحة ألوان محدودة للغاية. ولكن من المحتمل الآن أن يكون هناك تحول كبير آخر بنفس الأهمية ربما مع الخطوط المتغيرة. يعني ما هي الخطوط المتغيرة؟ ماذا يفعلون لنا؟ من أين نبدأ؟

جايسون: أحاول دائمًا وأبدأ بإعطاء الناس إطارًا مرجعيًا. لذلك عندما نفكر في استخدام الخطوط على الويب ، فإن الشيء الذي يجب أن نتذكره هو أنه في الوقت الحالي مع الخطوط "التقليدية" ، يكون كل خط عرضًا فرديًا ، ووزنًا ، وانحرافًا ، ومتغيرًا لذلك الخط. لكل شخص نريد استخدامه على الويب ، يتعين علينا تحميل ملف. بالنسبة إلى موقع ويب نموذجي تستخدمه للنسخ الأساسي ، فأنت تقوم عادةً بتحميل أربعة خطوط: الخط المائل العادي والجريء والمائل والمائل الغامق. كل هذه الأشياء يجب أن يتم تحميلها. كل واحد من هؤلاء هو القليل من البيانات التي يجب تنزيلها ومعالجتها وتقديمها.

جايسون: عادةً ، ما فعلناه على مر السنين هو تقييد أنفسنا باستخدام هذا العدد الصغير جدًا من الخطوط ، والتي في الواقع ليست ممارسة رائعة للطباعة بشكل خاص. من الشائع أكثر في تصميم الرسوم استخدام نطاق أوسع بكثير. يمكنك استخدام ثمانية أو 10 أوزان مختلفة ومتغيرات لمحرف في تصميم معين. على الويب ، كنا مقيدين للغاية بسبب الأداء. الاختلاف الكبير في الخط المتغير هو كل تلك التباديل ، هذه الاختلافات موجودة في ملف واحد. هذا التنسيق فعال حقًا لأن ما يقوم به هو تخزين الشكل العادي لتلك الشخصية ثم ما يسمى دلتا حيث تتحرك النقاط الموجودة على طول تلك المنحنيات لجعلها جريئة أو رفيعة أو عريضة أو ضيقة.

جايسون: لذلك من خلال تخزين الاختلافات فقط ، لن تضطر إلى تخزين المخطط بالكامل. إنه تنسيق أكثر فاعلية. على الرغم من أنه ليس صغيرًا مثل ملف خط واحد ، إلا أنه لا يزال أصغر بكثير من كل الملفات الفردية التي يتم التقاطها بشكل منفصل. إذا نظرت إلى شيء مثل Plex Sans من IBM ، فقد تكون كل هذه الملفات المنفصلة تقريبًا ميغا بايت حيث يوجد ملفان خط متغيران يحتويان على جميع العروض والأوزان في الوضع الرأسي في ملف واحد ، فإن الخط المائل في الآخر يشبه 230 كيلو. هذا حقًا لمجموعات الشخصيات الكاملة حقًا. يمكن لمعظم الناس استخدام مجموعة فرعية من ذلك وتصغيرها. لقد رأيت بشكل عام أحجام الملفات هذه من 50 إلى 100 كيلو بايت لحاجة موقع ويب لغة غربية نموذجي. هذا لا يختلف عن التحميل ... بمجرد تحميل ثلاثة أو أربعة ملفات خطوط فردية ، فمن المحتمل أنك تقوم بتحميل بيانات أكثر من ذلك. إنه فوز مثير للأداء ، ولكنه أيضًا يفتح النطاق الكامل للمحرف لنا لاستخدامه على الويب من خلال CSS.

درو: هذا يشبه تقديم الوصفة بدلاً من الوجبة. بدلاً من النسخة المائلة هنا ، ها هي النسخة الغامقة. إنه مثل ، "ها هي النسخة العادية ولجعلها مائلة ، ستفعل هذا ، لتجعلها غامقة ، وستفعل ذلك." يؤدي ذلك إلى تقليل حجم الملف الذي ينخفض ​​عبر السلك.

جايسون: أجل. حسنًا ، بطريقة ما ، يمنحك كل المكونات وبعد ذلك يمكنك عمل أي وصفة تريدها. لأنه يمكنك حقًا الذهاب إلى أي مكان من ... للعودة إلى مثال Plex ، من 100 إلى 700 وزن حيث 700 نوع من النوع الغامق النموذجي ، سيكون وزن 400 نوعًا عاديًا. ولكن بعد ذلك لديك أخف وزنا بكثير. لذلك يمكنك عمل عناوين كبيرة ورائعة حقًا أو اقتباسات مجمعة أو عناصر مختلفة أو مثل التركيز ، ومن ثم تكون قادرًا على تعديل ما تريد أن تكون جريئة بأحجام مختلفة. هناك كل أنواع الأشياء المختلفة التي يمكنك القيام بها من أجل طباعة أفضل ، وتجربة مستخدم أفضل ، وكل ذلك مع الحصول على أداء أفضل. هذا هو البواب.

درو: إذن هناك عدد لا حصر له من التعديلات على الخطوات بين ما نعتقد أنه عادي وجريء اليوم؟ هل لديك بالفعل القدرة على الذهاب إلى أي مكان على طول هذا المحور للتبديل بين الاثنين؟

جايسون: صحيح. ما أعتقد أنه مثير حقًا بالنسبة لي كشخص درس التصميم الجرافيكي ونظر عن كثب إلى حد ما في تصميم الطباعة لسنوات عديدة ، يجب أن تتغير فكرة ما هو جريء حقًا بناءً على حجم النص الذي تقدمه. لذلك ، بشكل افتراضي ، فإن 400 و 700 للعادي والجريء هي نوع من الإعدادات الافتراضية للويب. لكن في الحقيقة ، السبب الوحيد الذي يجعلك تتحدث بجرأة هو أنك تريد بعض التركيز ، وتريد شيئًا ما يبرز. ولكن كلما زاد حجم الخط عن الحجم الصغير ، زادت صعوبة قراءته. إنه نوع من يملأ الفراغات الصغيرة المفتوحة. بدلاً من استخدام 700 لنسخة الجسم عندما يتم ضبطها على حجم 16 بكسل تقريبًا أو أيًا كان ما نستخدمه هناك ، يمكنك استخدام 550 ، 575 حيث تحصل على تركيز كافٍ ولكن لا تزال نماذج الحروف أكثر انفتاحًا. ثم كلما كبرت ، قد تستخدم وزنًا أثقل.

جايسون: لكن مرة أخرى ، إنه نوع من اختيارك في تلك المرحلة. من خلال تعديل ذلك للحصول على المستوى الصحيح من التركيز ، مع الحفاظ على وضوح جيد حقًا ، لدينا قدر أكبر من المرونة. آمل حقًا أنه نظرًا لأن هذه الأشياء أصبحت أكثر شيوعًا واستخدامها على نطاق واسع ، يمكننا البدء في تعليم الأشخاص أن يكونوا أكثر دقة قليلاً في طريقة استخدامهم لهذا النطاق وأن يصبحوا في الواقع أكثر تعبيرًا وأكثر قابلية للقراءة في نفس الوقت .

درو: أحد الأشياء التي لاحظتها عند تنفيذ التصميمات كواجهة أمامية وتنفيذ التصميمات التي أعطيت لي هو أن مجموعات تباين الألوان المختلفة والنص الفاتح على خلفية داكنة مقابل نص غامق على خلفية فاتحة ، يمكن أن تبدو الأوزان مختلفة تمامًا. إذن ، من المفترض أن هذا من شأنه أن يساعد في تعديل نوع التجربة المرئية والقراءة على أساس تغييرات من هذا القبيل؟

جايسون: بالتأكيد. هذا أحد الأشياء التي عادةً ما أعرضها في ورش العمل والمحادثات هو إضافة دعم لاستعلام وسائط الوضع الخفيف. يمكنك قلب هذا التباين ولكن بعد ذلك تريد القيام بذلك بطريقة دقيقة. اعتمادًا على المحرف ، يمكن أن ينتهي الأمر بمظهر ثقيل جدًا أو نوعًا من الضيق باستخدام محرف serif. في بعض الأحيان تريد أن تصبح أثقل قليلاً أو أخف قليلاً ، لكنك تميل أيضًا إلى ترك مسافة بين الحروف عندما يكون لديك على خلفية داكنة وإلا فإن الحرف يتحول إلى نوع من النزيف معًا. هناك أشياء صغيرة يمكنك تعديلها في الطباعة. يتم إسقاط الاستعلام عن الوسائط ببساطة ميتة. أعني ، إنه يشبه سطرين من التعليمات البرمجية لإضافة ذلك إلى موقعك. ثم هذا ما تفعله بذلك. ليس بالضرورة مجرد قلب الألوان. تحتاج أحيانًا إلى ضبط التباين ، ولكن أيضًا تحتاج إلى تعديل النوع نفسه من أجل وضوح أفضل.

درو: من المفترض أنه لا يمكن تغيير الوزن بخط متغير فقط. هل هناك طرق أخرى يمكننا من خلالها تغيير خطنا كما هو معروض؟

جايسون: أجل. الأمر متروك تمامًا لمصمم النوع. أعتقد أنه من الجيد حقًا التأكيد على أن هذا ليس مجانيًا للجميع في المتصفح. يمكن للمتصفح فقط عرض ما تم تمكينه في الخط. في النهاية ، مصمم النوع هو الذي يقول أن الوزن يتراوح من هذا إلى هذا الحد. قد يكون لديك محور عرض. سيصبح أضيق قليلاً أو أوسع قليلاً ، ولكن هناك أيضًا القدرة على الحصول على ما يسمى بالمحاور المسجلة. هناك عرض ووزن ومائل ومائل وحجم بصري. هذه كلها نوع من الأشياء الأساسية التي يتم تعيينها لخصائص CSS. يسمح المنحدر بزاوية بين واحدة وأخرى ، لذلك رأيتها في الوضع الرأسي وقد رأيت بالفعل زاوية بميل عكسي بالإضافة إلى ميل للأمام. هذا مفتوح تمامًا. الخط المائل يكون بشكل عام في وضع التشغيل أو الإيقاف ولكن ليس بالضرورة. يمكنك في الواقع ... حسنًا ، هناك مصممي كتابة جربوا تغيير أشكال الحروف تدريجيًا أثناء تحولك من العادي إلى المائل ، واستبدال الأحرف على طول الطريق. هذا نوع من الشيء المثير للاهتمام.

جايسون: ولكن هناك إمكانية الحصول على محاور مخصصة. يمكن لمصمم النوع تحديد أي محاور مخصصة يريدون تغييرها. لقد رأيت تلك التي تضيف نوعًا من الجاذبية تنتشر الرطوبة وجميع أنواع التواء الأشكال الممتعة ، أو تمتد الرقيق ، وتغير ارتفاع الصاعد والهبوط. على أشكال الحروف الصغيرة ، تغيير ما إذا كانت الرقيق أم لا. هناك كل أنواع الأشياء التي يمكنك القيام بها. الأمر متروك حقًا لخيال مصمم النوع. أعتقد أننا نخدش السطح فقط فيما يتعلق بما يمكن أن يحدث بشكل واقعي مع كل هذه الأشياء. يمكن الوصول إليها جميعًا من خلال CSS.

درو: نعم. يمكن تعديل كل هذه الخصائص فقط من خلال CSS العادي الذي تقدمه مع بقية التصميم الخاص بك. ما نوع الأشياء التي يمكننا القيام بها في CSS لإحداث نوع من هذه التغييرات؟ هل هو تمامًا كما نفعل مع تخطيط سريع الاستجابة حيث لدينا استعلامات وسائط لتشغيل ذلك؟

جايسون: هناك كل أنواع الطرق التي يمكنك القيام بها. هناك تغيير صغير عليك القيام به. أفترض أننا سنوفر مجموعة من الروابط لبعض الأشياء التي ستساعد الناس نوعًا ما على اللعب بهذه الأشياء. أعني ، لقد كتبت مجموعة. نأمل أن يساعد ذلك الناس. ثم على جانب الاستخدام ، يتم فقط تعيين محور وزن الخط لوزن الخط. بدلًا من أن تقول بخط عريض عادي ، ما عليك سوى توفير رقم. يمكنك تغيير ذلك باستعلامات الوسائط. يمكنك تغييره باستخدام JavaScript. يمكنك أن تفعل ذلك ما تريده نوعًا ما. لقد كنت أستخدم تقنية تسمى CSS Locks تعلمتها من Tim Brown لاستخدام الرياضيات بشكل أساسي. خصائص وحسابات CSS المخصصة لتوسيع نطاقها ، بمجرد أن تصل إلى نقطة فاصل صغيرة تصل إلى نقطة فاصل كبيرة ، فإنها نوعًا ما تقيس حجم الخط وارتفاع الخط بسلاسة.

جايسون: بعد ذلك يمكنك أيضًا استخدام القليل من JavaScript لفعل الشيء نفسه مع وزنهم إذا كنت تريد ذلك. يتم تعيين محور الوزن إلى وزن الخط ، وهي خاصية CSS. سيتم تعيين محور العرض في الخط إلى امتداد الخط ، ويتم التعبير عنه فقط كنسبة مئوية. يجب أن أشير إلى أن العديد من مصممي الكتابة لا يفكرون بالضرورة في كيفية التعبير عن ذلك ، لذا قد ترى نطاقات وزن تقوم بأشياء غريبة مثل الانتقال من 400 إلى 650. لا يزال يتعين عليك التعبير عنها بنسبة مئوية ، لكنها تعمل. لا بأس. تحتاج فقط إلى معرفة ما هو طبيعي ويتم توثيق جميع الخطوط. ثم مع أي شيء آخر غير هذين ، يوجد حاليًا دعم متفاوت قليلاً في التنفيذ للمائل والمائل. هناك الكثير من تلك الأشياء التي تحتاج إلى الرجوع إليها باستخدام إعدادات تنوع الخط ومن ثم يمكنك توفير عدة أشياء في وقت واحد. إنه نوع من مثل إعدادات ميزة الخط. إنه نوع من بناء جملة المستوى الأدنى حيث يمكنك توفير قائمة مفصولة بفواصل من هذا المحور المكون من أربعة أحرف والقيمة ، التالي ، التالي.

جايسون: الشيء الوحيد الذي يجب على الأشخاص مراعاته هو أنه عند استخدام إعدادات تنوع الخط ، فإنك تفقد كل الفهم الدلالي لذلك وتفقد الاحتياطية. يتم دعم وزن الخط وامتداد الخط بشكل عام في جميع المتصفحات. يجب عليك بالتأكيد استخدام تلك السمات. لأي شيء آخر ، يمكنك استخدام إعدادات تنوع الخط. لكن ميزة استخدام وزن الخط بالطريقة المعتادة هي أنه إذا لم يتم تحميل الخط المتغير ، فلا يزال بإمكان المتصفح فعل شيء بهذا. في حين أنه إذا لم يفهم الخطوط المتغيرة ، أو لم يتم تحميله ، إذا كان كل شيء في إعدادات تنوع الخط ، فستفقد جميع معلومات التصميم. هذه مجرد ملاحظة جانبية صغيرة من حيث ما يتم دعمه وأين. لكن يجب أن أقول أيضًا إنه مدعوم في جميع متصفحات الشحن التي من المحتمل أن تواجهها في معظم الظروف. لا يعمل I-11 ، ولكن يمكنك تقديم خطوط ويب ثابتة ، ثم استخدام دعم الإعلانات في CSS لديك للتغيير إلى الخطوط المتغيرة. بعد ذلك ستتجنب أي تنزيلات مكررة للأصول وهي تعمل بشكل جيد حقًا. لدي هذا في الإنتاج في عدة مواقع بالفعل.

درو: أعتقد أنه مثل العديد من أنواع تقنيات الويب الحديثة التي تراها ، إذا كان هناك خط متغير كان يتلاشى بهدوء لفترة من الوقت ، وفقط عندما ينتهي الأمر نوعًا ما ونحصل على الدعم في المتصفحات وأشخاص مثلك يصدرون ضوضاء بشأنه ويخبرون الجميع أنه موجود. يمكن أن يشعر المصمم أو المطور القياسي بهذا الأمر تقريبًا الذي يتابع وظيفته يومًا بعد يوم ولا يتتبع جميع التنزيلات الأخيرة. قد يبدو الأمر وكأنه خرج من العدم. لكن أعتقد أن هذا كان يتدفق بعيدًا تمامًا ... أعني ، لقد ذكرت التطبيقين المختلفين قليلاً اللذان نتعامل معه الآن. هل هناك نوع من المعايير القديمة والحديثة للتنفيذ؟

جايسون: حسنًا ، إنها في الواقع ليست أقدم وأحدث. كلاهما متعمد للغاية. سأعود إلى ذلك في ثانية لأنه يستحق نوعًا من فهم الفرق مع هؤلاء. لكنك على حق. تم تقديم التنسيق منذ ما يزيد قليلاً عن ثلاث سنوات ، كان في سبتمبر 2016. كان لدينا في الواقع أول تنفيذ عملي في الإنشاء الليلي لـ Safari بعد ثلاثة أسابيع. لقد كان سريعًا بشكل ملحوظ حيث كان لدينا متصفح يعمل. كان Safari هو أول من قدم الدعم الكامل له. أعتقد أنه كان عندما خرج هاي سييرا. لا أعرف ، كان مثل Safari 12 أو شيء من هذا القبيل.

جايسون: ولكن بعد فترة ليست طويلة ، انتهى بنا الأمر بالحصول على دعم يتم شحنه في Firefox و Edge و Chrome. لقد حصلنا بالفعل على دعم المتصفح لمدة عامين تقريبًا. لكن لم يكن هناك الكثير من الخطوط. كان هناك هذا النوع من التطور المطرد. لقد كان دعم استخدامها على الويب في الواقع أطول من أي مكان آخر. أعني ، من الناحية الفنية ، أن هذا التنسيق يعمل على نظام تشغيل سطح المكتب أيضًا. لذلك إذا كان لديك تنسيق TTF ، فيمكنك تثبيته في نظام تشغيل سطح المكتب الخاص بك على Windows أو Mac ، ويمكنك استخدامه في أي تطبيق. لا يمكنك دائمًا تغيير المحاور بالطريقة التي قد ترغب في اللعب بها بلا حدود ، ولكن هناك فكرة عن المثيلات المسماة مضمنة في ملف الخط هذا الذي يعيدها إلى ما اعتدنا عليه.

Jason: في Keynote ، على سبيل المثال ، لا يوجد دعم واضح للخطوط المتغيرة ، لكن التنسيق يعمل إذا كانت هناك أشياء مثل Tech Sense ، مرة أخرى ، مكثف ، خفيف. سيكون لديك تلك العادية ، العادية ، العادية ، الجريئة ، الضيقة ، إلخ ، كل ذلك سيكون متاحًا في قائمة منسدلة تمامًا مثل تثبيت جميع أفراد العائلة. ثم إذا كنت تستخدم Illustrator أو Photoshop أو الآن InDesign الذي تم شحنه الأسبوع الماضي أو Sketch الذي تم شحنه قبل أسبوعين ، فإنهم جميعًا يدعمون الخطوط المتغيرة الآن ، بحيث يمكنك بعد ذلك الوصول إلى جميع المحاور المختلفة واللعب بها محتوى القلب. ولكن في المتصفح ، كان لدينا الكثير لنعمل معه. أخذ إشارة من زوجتك ، لقد كنت نوعا ما أدق هذه الطبل لفترة من الوقت في محاولة لجعل الناس أكثر وعيا بها. ثم بفضل العمل الذي قام به فريق Firefox في إنشاء أدوات المطور. مع دفع Jen Simmons نحو ذلك ، لدينا أدوات لا تصدق للعمل معها على المتصفح والتي تساعدنا على فهم ما يمكن للخطوط القيام به.

درو: لقد ذكرت مصممي الكتابة وإمكانيات الخطوط. هناك الكثير من الخطوط المتوفرة؟

جايسون: حسنًا ، الكثير من الناس يفعلون ذلك الآن. ربما يكون أفضل وأشمل مكان للبحث عنه هو موقع Nick Sherman ، v-fonts.com ، v-fonts.com. هذا مجرد موقع كتالوج. سرعان ما أصبح كبيرًا حقًا حقًا. هناك المزيد من الخطوط المتغيرة التي تظهر طوال الوقت الآن. لا يوجد عدد كبير من البرامج مفتوحة المصدر ، ولكن إذا بحثت على GitHub عن خطوط متغيرة ، فستجد في الواقع مجموعة كاملة من المشاريع هناك. لكن Google أطلقت إصدارًا تجريبيًا من واجهة برمجة التطبيقات الجديدة الخاصة بها مع توفر حوالي عشرة خطوط متغيرة هناك. هناك المزيد قادم منهم. لقد أطلقوا للتو Recursive في recursive.design ، وهو محرف جديد رائع من ستيفن نيكسون. متغير Plex ، واحد متاح ، مفتوح المصدر. ثم هناك الكثير من المنتجات التجارية.

جايسون: الشيء الرائع في ذلك هو أن Monotype قد أصدرت بعضًا منها كبيرة جدًا. لكن الكثير من المسابك الصغيرة والمصممين الفرديين هم من يقودون الطريق في تجربة هذا الشكل. أعتقد أن هذا أمر رائع حقًا للتصميم ورائع للويب أننا نرى كل هذه التصميمات الجديدة من مصممين جدد أو مصممين أصغر نوعًا ما يفتحون هذه الأرضية الجديدة. لأنني أحب أن أراهم ينجحون في هذا لأنهم أخذوا زمام المبادرة لوضع بعض الأشياء الرائعة هناك.

درو: هل نشهد أي تحديث للخطوط الموجودة لتكون خطوطًا متغيرة لاستبدال العائلات بخط متغير واحد؟ هل هذا يحدث على الإطلاق؟

جايسون: إنه كذلك. تلك التي أصدرها Monotype هي تحديثات لبعض المحارف الكلاسيكية حقًا. كانت FF Meta واحدة ساعدتهم في إطلاقها من خلال تصميم العرض التوضيحي لذلك العام الماضي. لقد حصلوا على ذلك. Univers ، و Frutiger ، و Avenir ، أعتقد أن هؤلاء هم الذين أطلقوا سراحهم حتى الآن ، هؤلاء الأربعة. هذه هي بالفعل نوع من محارف العلامات التجارية الكلاسيكية الأساسية. إنهم يعملون على المزيد. أعلم أن لديهم ما لا يقل عن نصف دزينة أخرى أو ما شابه ذلك في مراحل مختلفة من الإنتاج. أعلم أن Dalton Maag الذي يقوم بالكثير من أعمال الخطوط المخصصة للشركات الكبيرة لديه العديد من الخطوط المتغيرة الرائعة حقًا. لقد كنت أقوم ببعض الأعمال مع TypeTogether. لديهم أيضًا العديد من المحارف الرائعة حقًا. أعرف ذلك ...

جايسون: لقد عرضت في بعض المؤتمرات التي تحدثت فيها عن هذه الأشياء التي تمتلكها Adidas بنفسها أيضًا والتي كانت تستخدمها في جميع أعمال علامتها التجارية المطبوعة منذ ما يقرب من عامين حتى الآن. وهي حقًا أشياء رائعة حقًا. ولكن أيضًا يعمل مارك سيمونسون على إصدار متغير من Proxima Nova. هذا نوع من الصفقة الكبيرة. كان هذا أحد أفضل خطوط الويب مبيعًا على الإطلاق. انه يحدث. إنه يحدث على شكل أجزاء وأجزاء من كل شيء صعودًا ونزولًا على المقياس. ولكن حتى شيء بسيط مثل الاشتراك في David Jonathan Ross ، Font of the Month Club ، سيوفر لك خطًا متغيرًا كل شهر تقريبًا. أعني ، لقد كان مذهلاً حقًا فيما يتعلق بالأشياء التي كان يطرحها. إنه مثل 72 دولارًا للسنة أو شيء من هذا القبيل. لقد كان يضع كل أنواع الأشياء الجميلة حقًا.

درو: إنه أمر مثير للاهتمام ، لأنه من الواضح ، مع إمكانيات الخطوط المتغيرة ، يمكنك إنشاء تصميمات جديدة تستفيد منها. ولكن من المحتمل أن تكون هناك مواقع قيد الإنتاج حيث تتوفر الآن إصدارات متغيرة من الخطوط حيث يمكن لشخص ما العودة وإعادة النظر في ذلك واستبدال ملفات الخطوط المتعددة بتطبيق جديد يعتمد على إصدار خط متغير جديد.

جايسون: نعم ، بالتأكيد. هذه بعض الأسئلة التي أحصل عليها بانتظام. مؤخرًا ، كنت أبحث في موقع ويب كبير جدًا للبث الرياضي سألني فريق التطوير عن نفس السؤال. لقد بحثت ، وبالتأكيد بما فيه الكفاية ، بالنسبة لاثنين من المحارف التي يستخدمونها ، هناك خطوط متغيرة متاحة. أظهر لنا القليل من البحث أنه يمكننا استبدال أربع مثيلات من محرف واحد وثلاثة من الآخر بملفي خط متغيرين والاستيلاء على أكثر من 70٪ من حجم الملف في خمسة طلبات. أعني ، سيكون سؤال الفوز من وجهة نظر الأداء. بالنسبة إلى الموقع واسع النطاق حقًا ، عندما تنظر إلى إزالة ما يقرب من 300 ألف من تنزيل البيانات عبر ملايين المستخدمين ، فإن ذلك يضيف في الواقع ما يصل إلى المدخرات الحقيقية بالدولار وتكلفة النطاق الترددي. حتى من وجهة النظر العملية البحتة دون إعادة كتابة أي من CSS الخاصة بهم ، فقط استبدال تلك الخطوط ، سيكون بالفعل فوزًا كبيرًا لهم في الأداء ، في وقت عرض الصفحة ثم في تكاليف النطاق الترددي الفعلية لهم.

درو: من الناحية العملية ، هل الأمر بسيط كما يبدو ، فقط قم بتبديل أحدهما بآخر؟

جايسون: يمكن أن يكون. أعتقد أن المثال المثالي على ذلك هو الشيء الذي تركته Google نوعًا ما عرضًا في ATypI في سبتمبر حيث بدأوا في فعل ذلك مع Oswald حتى 150 مليون مرة في اليوم. لقد صنعوا نسخة خط متغيرة منه ، وبدأوا للتو في تصفحها على مواقع الويب التي كانت تستخدم حالات كافية حيث ستحقق فائدة كبيرة. لم يخبروا أحدا. لم يخبروا أصحاب الموقع. لا أحد يجب أن يفعل أي شيء. لأنه يحتوي على التعيين الصحيح لمحور الوزن ، لذا ستعمل الإعدادات الافتراضية فقط. 150 مليون مرة في اليوم هو عدد كبير من الخطوط. لقد بدأ هذا في منحهم بعض الأفكار الأفضل حول الشكل الذي سيبدو عليه هذا المشهد بالنسبة لهم إذا كان بإمكانهم البدء في التبديل بين أفضل خمسة خطوط ويب يقدمونها؟ أفترض أن Open Sans ربما يكون أحد هؤلاء. أعلم أن لاتو ربما يكون هناك ، روبوتو.

جايسون: إذا نظرت إلى هؤلاء ونظرت إلى الشكل الذي قد تبدو عليه الإصدارات المحسّنة منها ، يمكنك أن ترى أن هناك بعض الأسباب الواضحة جدًا التي تجعل Google مهتمًا بذلك. ثم إذا نظرت إلى الجانب الآخر ، فقط مساحة التصميم ومدى دقة صوت العلامة التجارية التي يمكن أن تكون عليها الشركة إذا كانت تعمل مع النطاق الكامل لمحرف علامتها التجارية بدلاً من الاضطرار إلى التبديل في أنواع مختلفة أو أن تكون أكثر محدودة في لوحهم. هناك أشياء مثيرة للاهتمام حقًا يجب تعلمها واستكشافها على طرفي هذا الطيف.

درو: يبدو وكأنه عالم جديد شجاع للطباعة وفرص للقيام بالكتابة بطريقة أكثر حساسية وربما أكثر إبداعًا على الويب مما كنا قادرين على القيام به من قبل.

جايسون: حسنًا ، هذا بالتأكيد ما أتمناه. أعتقد أن أحد أكبر العوائق التي تحول دون اعتماد الخطوط على الويب في جميع المراحل كان الأداء. إذن ماذا يحدث؟ كم من الوقت يستغرق التحميل؟ ماذا يعني ذلك بالنسبة لوقت العرض على الصفحة؟ لدينا تلك المشكلات من هذا النوع من وميض النص غير المرئي أو النص غير المصمم. تصارع كل هذه الأشياء ، حقًا ، يعود إلى كم من الوقت يستغرق كل شيء للوصول إلى هناك؟ كيف يتفاعل المتصفح مع ذلك؟ هناك الكثير من الأشياء التي يمكننا القيام بها للتخفيف من بعض هذه المشكلات. لكن الأمر يتعلق حقًا إذا كان لدينا خط أفضل وطريقة أفضل لتقديمه ، فستصبح كل هذه المشكلات أقل أهمية بكثير. وبوجود ذلك في مكانه ، سنكون أكثر تعبيرًا. يمكننا حقًا أن نحاول دفع نهاية التصميم لهذا ونحاول أن نكون أكثر إبداعًا.

درو: لأنك كتبت مؤخرًا نوعًا من التعبير عن الشعور بأن الويب ربما انجرفت إلى حد ما في فخ تصميم قالب مقال لكل موقع ، ربما مع بعض الاختلافات لبضعة أنواع مختلفة من المحتوى. لكن كل شخص ينجرف نحو نمط medium.com لعمود واحد من النص يمكن قراءته بشدة لعيني. تنضيد لطيف. هل هذا شيء سيء؟

جايسون: لا أعتقد أنه سيء. أنا فقط أعتقد أنها ستصبح مملة. أعني ، عندما خرج ميديوم ، كان ذلك جديدًا جدًا. أعني ، أعتقد أن عمودًا واحدًا من… كما تقول ، كان نسخة مطبوعة بشكل رائع. انها منطقة لطيفة. لم تكن مزدحمة. لم تكن ضيقة وأشرطة جانبية وكل هذه الأشياء الأخرى. ستكون هناك دائمًا أسئلة حول نموذج العمل وما الذي سيدعم ذلك. هذا هو السبب في إعادة تصميم جميلة حقًا ، على ما أعتقد ، كانت سياتل تايمز التي قام بها مايك مونتيرو من Mule Design قبل بضع سنوات. رائع للغاية حتى إطلاقه. ثم وضعوا هذه اللافتات الضخمة أسفل جانبي العمود وأزالوا نوعًا ما كل تلك المسافات البيضاء. لقد كان عارًا حقيقيًا.

جايسون: أفهم أن على الشركات جني الأموال. هناك تداعيات لذلك. لذلك سيكون من الرائع أن يكون هذا أحد الخيارات. للحصول على هذا التصميم النظيف الجميل. لكن لا ينبغي أن يكون الوحيد. لدينا كل هذه القدرات في CSS التي تتيح لنا القيام بأشياء مثيرة للاهتمام بهوامش وتصميم. أعني ، ليس الأمر مجرد حقيقة أن لدينا شبكة الآن. لكن حقيقة أنه يمكننا إجراء حسابات في المتصفح في CSS تتيح لنا القيام بالكثير من الأشياء المثيرة للاهتمام. أنت تندمج مع ذلك ، القدرة على أن تكون أكثر تعبيرًا مع الكتابة ، ثم يمكننا البدء في النظر إلى ما يفعلونه في المجلات. لا يحتوي فانيتي فير على قالب مقالة واحد. لديهم ستة أو سبعة أو ثمانية. إذا نظرت حقًا في كيفية وضع هذه الأشياء ، فهناك قدر هائل من التباين ولكنه يلعب داخل نظام.

جايسون: لذلك عندما نقوم بإنشاء نظام تصميم لموقعنا على الويب ، بدلاً من التوقف عند تخطيط واحد فقط ، لدينا طريقة سهلة نسبيًا لإنشاء بعض المفاتيح في أنظمة إدارة المحتوى الخاصة بنا. يدعم معظمهم قدرًا لا بأس به من المرونة. لا يوجد سبب يمنعنا من منح الناس خيارًا. أريد استخدام التصميم الأول ، اثنان ، ثلاثة ، أربعة ، خمسة ، ستة. سيقدم هذا هوامش مختلفة وتعويضات مختلفة. ربما نقدم لكم القدرة على إنشاء بعض الأعمدة. هناك الكثير من الأشياء المختلفة التي يمكننا القيام بها والتي من شأنها أن تجعل شبكة الويب أكثر تشويقًا. أعتقد أن هذا النوع يمكن أن يلعب دورًا كبيرًا حقًا في ذلك.

درو: هل اكتب منقذنا عندما يتعلق الأمر بإضافة المزيد من الشخصية مرة أخرى إلى الويب؟

جايسون: حسنًا ، أعتقد أنه يمكن أن يكون كذلك. أعتقد أننا شهدنا هذا التطور الطويل على الويب نحو قابلية استخدام أفضل. لكني أعتقد أن أحد الضحايا هناك عندما يكون كل ما يثير قلقنا هو ذلك النفعي ، فهل هذا نهج قابل للاستخدام؟ هذا يميل إلى التغلب على الشخصية. ثم عندما يكون كل موقع ... مرة أخرى ، ظهرت لدينا خطوط ويب وهذا خلق مستوى جديدًا من التعبير لم يكن لدينا من قبل. ثم فجأة ، استطعنا ... تحسنت الشاشات. لذا عادت الرقيق إلى المزيج. يمكننا استخدامها مرة أخرى على الويب. أضافت هذه الأشياء بعض الحياة. ثم قمنا بتحسين نوع ما إلى الجميع باستخدام واحد أو اثنين من San-serifs. إنه Open Sans أو Roboto أو Oswald أو أيا كان. نعود إلى نفس الشيء حيث يوجد الكثير من المحارف الجيدة حقًا والتي يمكن قراءتها حقًا. لم نعلم حقًا هذا الجيل الحالي من مصممي UX الذين غالبًا ما يكونون هم من يقودون الكثير من هذا أي شيء عن الطباعة. أي شيء يتعلق بمدى تعبيرها ، ومدى قدرتها على تغيير الحالة المزاجية والنبرة.

جايسون: لدينا عدد كبير من الأشخاص الذين يمليون اتجاه تصميم الأشياء على الويب والذين لديهم أفكار حول الكتابة ربما لا تكون على دراية جيدة بالشخص الذي درس التصميم الجرافيكي ومفاهيم قابلية القراءة. نحن بحاجة إلى جمع هذه الأشياء معًا. إنه ليس هذا أو ذاك. إنه و. يحتاج ان يكون.

درو: خاصة عندما نتحدث عن الشخصية وعن النغمة والمزاج. من وجهة نظر العمل أو ما نتحدث عنه هو جوانب العلامة التجارية. إذن ، في جعل كل شيء يبدو كما هو ، هل نفقد القدرة على توصيل علامة تجارية للعملاء؟

جايسون: بالتأكيد. عدم الغوص في السياسة ، لكنني أعتقد أن الكل ... إحدى القضايا الرئيسية التي عشناها بالتأكيد في الولايات المتحدة ، وأنا متأكد من أنها لا تختلف كثيرًا عما حدث في المملكة المتحدة خلال السنوات القليلة الماضية. عندما يتم استهلاك جميع الأخبار من خلال منصة واحدة ، ويبدو كل شيء كما هو ، فلا يوجد تمييز في الصوت. لذلك يقول 75٪ من البالغين في الولايات المتحدة أنهم يحصلون على جزء كبير من أخبارهم من Facebook. أعني ، دعنا نضع جانبًا مدى رعب ذلك عمومًا. ولكن بالنظر إلى أن كل شيء يتم تقديمه بشكل موحد ، فلا فرق بين مقال من الجارديان ، إلى نيويورك تايمز ، وول ستريت جورنال ، وواشنطن بوست ، وأخبار جو اليمينية. يتم تقديم كل شيء بالضبط نفس الشيء.

جايسون: عندما نرى هذا الشعار ، هذا النمط من الكتابة ، فإن الجارديان مميزة للغاية. صحيفة وول ستريت جورنال مميزة للغاية. نتعرف على الفور عندما نراه ، حتى لو كان مجرد عنوان. نحن نعلم من أين جاء ذلك. ثم هناك هذا الارتباط التلقائي مع تلك العلامة التجارية وتلك الأصالة. عندما تزيل كل ذلك بعيدًا ، يتبقى لك ، "حسنًا ، سأقوم بتقييم هذا في عنوان رئيسي. ثم بدأ ، من كتب عنوانًا أفضل؟ هذا ليس بالكثير للاستمرار. لذلك أعتقد أننا فقدنا مبلغًا هائلاً. إذا نظرت إلى ما تحاول Apple News Plus القيام به ، فهناك بعض الجهود من جانب عدد قليل من الشركات لمحاولة إعادة تقديم ذلك. قام Blundell بعمل مثير للاهتمام حقًا في أوروبا. تم إطلاقهما في الولايات المتحدة ، لكنني لست متأكدًا حقًا من أنهما ناجحان حقًا. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. انها حقيقة. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. هذا صحيح. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. شكرا لك. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.