كيفية تعيين معلمات الخط: دليل لإعداد النص على موقع الويب

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

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

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

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

1. إعداد معلمات النص على الموقع
2. اختيار الخط المناسب
3. تغيير حجم الخط
4. تعديل تباعد الأسطر
5. العرض الأمثل لكتلة النص
6. اختيار اللون والتباين في النص
7. تعيين مخطط الخط

إعداد معلمات النص على الموقع

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

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

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

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

اختيار الخط المناسب

عند اختيار الخط ، يجب مراعاة عدة عوامل:

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

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

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

تغيير حجم الخط

يمكن تكوين حجم الخط لصفحة ويب باستخدام الخاصية المغلق حجم الخط. لتغيير حجم الخط ، يمكنك تعيين القيمة المطلقة باستخدام وحدات بكسل (بكسل) ، بت (نقاط) ، إم أو ريم.

مثال الاستخدام:

يحتوي هذا النص على حجم خط 24 بكسل.

وهذا النص له حجم خط 12 نقطة.

هنا ، الخط هو 1.5 أضعاف حجم الخط الافتراضي.

يحتوي هذا النص على حجم خط 2 أضعاف حجم خط عنصر الجذر.

يمكنك أيضا استخدام وحدات القياس النسبية ، مثل ٪ أو فولكس فاجن (النسب المئوية لحجم العنصر الأصل أو عرض نافذة المتصفح ، على التوالي).

مثال الاستخدام:

يحتوي هذا النص على زيادة حجم الخط بنسبة 150٪ من حجم خط العنصر الأصل.

وهذا النص له حجم خط يساوي 5 ٪ من عرض نافذة المتصفح.

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

تعديل تباعد الأسطر

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

يمكن تعيين قيمة خاصية ارتفاع الخط بتنسيقات مختلفة ، مثل:

• سيتم ضرب قيمة الرقم في حجم الخط للحصول على عدد محدد من وحدات البكسل. على سبيل المثال ، ارتفاع الخط: 1.5 يعني أن تباعد الأسطر سيكون أكبر بمقدار 1.5 مرة من حجم الخط.
• وحدة قياس مثل وحدات البكسل (بكسل) أو النسب المئوية ( ٪ ) أو الوحدات النسبية (إم ، ريم) — سيتم تفسير القيمة على أنها عدد محدد من وحدات البكسل أو النسب المئوية لحجم الخط الحالي.

على سبيل المثال ، لتعيين تباعد أسطر 20 بكسل ، يمكنك استخدام التعليمات البرمجية التالية:

إذا كنت تريد تحديد تباعد الأسطر كنسبة مئوية من حجم الخط ، فأنت بحاجة إلى تعيين القيمة كنسبة مئوية:

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

جرب قيم تباعد الأسطر المختلفة للعثور على أفضل خيار لموقعك. ضع في اعتبارك أن تباعد الأسطر الصغير جدا أو الكبير جدا يمكن أن يجعل من الصعب القراءة ويقلل من قابلية استخدام موقعك.

العرض الأمثل لكتلة النص

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

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

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

1. 4. الطباعة: يرتبط اختيار عرض كتلة النص أيضا بطباعة الموقع. يمكن أن يؤثر عرض النص على توزيع المسافات وفواصل الأسطر ، مما قد يؤثر على مظهر النص وإدراكه.
2. الممارسة القياسية لعرض كتلة النص الأمثل حوالي 45 إلى 75 حرفا في كل سطر. ومع ذلك ، في النهاية ، سيعتمد العرض الأمثل على التصميم والمحتوى المحددين لموقع الويب الخاص بك.
3. لتحديد العرض الأمثل لكتلة نصية ، يمكنك استخدام الأسلوب التالي:

حدد الحد الأقصى لعرض الصفحة التي تريد استخدامها (على سبيل المثال ، 1200 بكسل).

اطرح الهوامش والهوامش من الحد الأقصى للعرض (على سبيل المثال ، 40 بكسل).

اقسم القيمة الناتجة على عدد الأحرف في كل سطر التي تعتبرها مثالية (على سبيل المثال ، 65 حرفا).

وبالتالي ، في المثال أعلاه ، سيكون العرض الأمثل لكتلة النص حوالي 1085 بكسل (1200 - 40 = 1160; 1160/65 ≈ 18).

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

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

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

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

• من المهم أن تتذكر أن اختيار لون النص والتباين يجب أن يركز على تلبية احتياجات جميع المستخدمين ، بما في ذلك الأشخاص ذوي الإعاقات البصرية. لذلك ، يوصى باستخدام الألوان التي تتوافق مع إرشادات إمكانية الوصول إلى محتوى الويب ، مثل وكج 2.1 (إرشادات الوصول إلى محتوى الويب).
• تعيين مخطط الخط
• تسمح لك معلمة وزن الخط بتعيين محتوى الدهون في الخط. يتم استخدام القيم التالية لهذا:
• عادي-الخط العادي (افتراضي);
• غامق-خط غامق;
• أكثر جرأة-خط أكثر جرأة;
• أخف وزنا-مخطط أكثر دقة;
• 100 هو مخطط رفيع جدا;
• 200-طباعة دقيقة;
• 300-خط نصف نغمة;
• 400 خط عادي (يعادل القيمة "عادي");
• 500 غامق (أي ما يعادل القيمة "غامق");
• 600-خط غامق;

700-خط غامق;

مثال:

• ص {

وزن الخط: غامق;

• تسمح لك معلمة نمط الخط بتعيين نمط الخط. يتم استخدام القيم التالية لهذا:
• عادي-الخط القياسي (افتراضي);
• الخط المائل-الخط المائل;
• المائل هو خط مائل (أكثر ندرة).
• مثال:

ص {