فهم الكتابة الطباعة للويب

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

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

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

قياس فقراتك

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

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

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

وأوضح الرائدة

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

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

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

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

استخدام أحجام الخط الطبيعي

لا يزال هناك عدد قليل من مواقع الويب التي تختار التمسك بأحجام خطوط أصغر من المتوسط. 11px - 12px يمكن أن يبدو أن أكثر من ذلك بكثير من “المهنية القياسية” لتخطيطات الأعمال. لكن هذه الأحجام لا تساعد غالبية الزوار الذين يبحثون عن معلومات محددة.

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

الرد على بيئة المستخدم

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

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

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

النمط القائم على السياق

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

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

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

اللعب مع تباعد الحروف

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

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

غالبًا ما أستخدم عددًا قليلًا من البيكسل / نقاط تباعد الحروف في الرؤوس مع كل الحروف الكبيرة يؤدي هذا إلى تقسيم الأحرف الفردية مع بعض المساحة الإضافية ويظهر أيضًا على أنه معرف للغاية “عنوان” نظرة. تباعد الحروف السلبية يعمل أيضًا بشكل رائع في السياق الصحيح. أنا عمومًا متمسك بوحدات أصغر ، ربما -0.03 م أو -0.1 م على الأكثر.

الجمع بين ومطابقة المحارف

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

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

بالإضافة إلى ذلك ، تعد خطوط sans-serif أكثر نظافة وأسهل في التنقيب معًا في الجمل. هذا لا يعني أن الخطوط الرقيقة لن تعمل في الفقرات. في الواقع هناك الكثير من الأمثلة الرائعة! لكن المفهوم غير المعروف المسمى x-height له أهمية حاسمة في التمييز بين تعقيد المحرف. من النظر إلى خط الأساس لكلمتين ، سوف تلتقط كيف ستكون هذه الخطوط “يناسب” مع بعض.

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

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

استنتاج

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

الاسبوع القادم: لا تنزعج ونحن سننظر في بعض أدوات وموارد مفيدة لتحسين الطباعة على شبكة الإنترنت.

أكثر من…

إليك المزيد من النشرات المتعلقة بالطباعة:

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