تطور الطباعة مع الخطوط المتغيرة: مقدمة

نحيف ، سميك ، وكل شيء بينهما: FF Meta Variable من Monotype

الكلمات لها قوة ، والطباعة هي صوتها

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

من كثير ، واحد (نموذج: تحول)

الخط المتغير عبارة عن خط واحد يعمل ككثير
- جون هدسون

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

تصميم الويب ، اختراع

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

يقطع من 100 إلى 900 أوزان

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

لكن بينما تسمح لنا هذه الحريات بأن نكون أكثر تعبيراً ، فإن بعض القدرات المثيرة للاهتمام حقًا ستساعد في تحويل تجربة القراءة نفسها. تم تعيين هذه الصفحة (حسناً ، الصفحة التجريبية الفعلية نفسها) بإصدار خط متغير جديد من FF Meta ، وهو التصميم الكلاسيكي بلا رقيق لـ Erik Spiekermann الذي تم إصداره لأول مرة في عام 1991. حتى مع وجود محور واحد فقط من الاختلاف (الوزن) لكليهما المتغيرات الرومانية والإيطالية ، يمكن تحقيق مجموعة رائعة من الأصوات من خلال تحقيق مكاسب هائلة في الأداء: 18 ملفًا وأكثر من 288 كيلو تم استبدالها بملف واحد من 84 كيلو فقط.

اختراع القراءة على الشاشة

[Meta] يجب أن تفعل أكثر من مجرد أن تبدو جميلة: يجب أن تعمل بجد
إريك سبيكرمان

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

جاهز للقرب

قطع القرن 18 من Garamond في الأحجام البصرية. الصورة الأولى بحجم 6pt ، والثانية هي 72. لاحظ الفرق في تباين الحد. إنه أكثر دقة في الحجم الأكبر.

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

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

البولندية واتزان

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

ربما لا نزال في مطلع هذا العصر الجديد ، لكن مستقبله مشرق بالتأكيد

اعتبارًا من مايو 2018 ، هناك 3 من أصل 4 متصفحات ويب رئيسية تدعم الخطوط المتغيرة بالفعل ، بالإضافة إلى كل من المنصات المحمولة السائدة (تحقق من الدعم على caniuse.com). مع وضع ذلك في الاعتبار ، نحن مستعدون لبدء إضاءة الويب اليوم.

إليك الصفحة الكاملة على CodePen. ألقِ نظرة على كل شيء معًا ، وألق نظرة سريعة على CSS التي تقودها. يتضمن ذلك نظامًا مطبعيًا للتحجيم أنشأته استنادًا إلى بعض الأفكار التي تعلمتها من Jen Simmons و Tim Brown ، باستخدام وحدات viewport ، وخصائص CSS المخصصة (ويعرف أيضًا باسم المتغيرات) ، والكثير من العمليات الحسابية. يمكنك مشاهدته مباشرة على CodePen أو في الواقع التحقق من ذلك جزءا لا يتجزأ من أدناه.

بعض الأفكار حول محرف والمشروع

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

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

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

كانت اللمسة الأخيرة لأعلى علامة الضلع مستوحاة بالفعل من صفحة نماذج العينات الموجودة على موقع FontFont: هناك عينة glyph التي تُظهر جميع أوزان علامة الضم والطبقة أعلى بعضها البعض. لقد قمت في البداية بتجميعها جميعًا بالطريقة نفسها ، مع تشغيل الرسوم المتحركة في حلقة - لكن هذا كان كثيرًا بالنسبة لبعض المتصفحات التي لا تزال تنفذ الخطوط المتغيرة ورسوم متحركة للإطار الرئيسي. عندما قمت بالضغط على التصميم المتداخل مع خيار تشغيل / إيقاف مؤقت ، أعجبتني الطريقة التي بدوا بها منتشرة (خاصة على الأجهزة المحمولة). لذلك قمت بقلبها وبدأت ثابتة ، ثم ألعب الرسوم المتحركة مرة واحدة وأعود إلى تخطيط الانتشار / الطبقات.

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

[Monotype شغّلتني مؤخرًا لكتابة وتصميم صفحة إيضاحية لعرض إصدار خط متغير جديد من تصميم Erik Spiekermann الكلاسيكي FF Meta. هذا هو نص تلك الصفحة وبعض الصور المرئية. يتم استضافة الصفحة المباشرة الكاملة على CodePen ويتم تضمينها أعلاه. إنه مفتوح للجميع ، لذا لا تتردد في عمل نسخة واللعب بها بنفسك. يمكنك رؤية مقدمة هذه التكنولوجيا أيضًا.]

المحتوى الأصلي المنشور على مدونتي