يعد تغيير حجم الخط أحد المهام الرئيسية لتصميم الويب. يمكن أن يؤدي اختيار حجم الخط المناسب إلى جعل موقعك أكثر قابلية للقراءة وجاذبية وسهولة في الاستخدام. ولكن كيف يمكنني تغيير حجم الخط بشكل صحيح وكيف يمكنني اختيار الحجم المناسب للمحتوى الخاص بك?
ستجد في هذا الدليل إجابات على هذه الأسئلة. سننظر في طرق مختلفة لتغيير حجم الخط باستخدام كس. سوف تتعلم كيفية استخدام قيم البكسل والنسب المئوية والوحدات النسبية مثل م و ريم. سننظر أيضا في استخدام الخطوط النسبية واستعلامات الوسائط لإنشاء تصميم سريع الاستجابة. في النهاية ، ستكون قادرا على تطبيق كل المعرفة التي اكتسبتها وإنشاء تصميم جذاب ويمكن الوصول إليه لموقع الويب الخاص بك.
لا تنس أن اختيار حجم الخط يجب أن يعتمد على جمهورك المستهدف ونوع المحتوى. إذا كان تطبيق الويب الخاص بك مخصصا للمستخدمين الأكبر سنا ، فربما يجب عليك استخدام حجم خط أكبر لقراءة أفضل. إذا كنت تقوم بإنشاء مدونة تحتوي على الكثير من النصوص ، فاختر حجم خط لا يتعب عيون القراء. اجمع بين أحجام الخطوط المختلفة لإنشاء تباين مرئي ولفت الانتباه إلى أجزاء مهمة من المحتوى الخاص بك.
يعد الاستخدام السليم لحجم الخط عاملا رئيسيا في إنشاء واجهة مستخدم سهلة الاستخدام وتصميم ويب ناجح. البدء في استخدام هذه التقنيات اليوم وتحسين المشروع الخاص بك مع حجم الخط الصحيح!
- التعريف والغرض
- تأثير حجم الخط على الإدراك
- أحجام الخطوط في أتش تي أم أل
- أحجام الخطوط النسبية
- أحجام الخطوط المطلقة
- تغيير حجم الخط في كس
- استخدام خاصية حجم الخط
التعريف والغرض
تغيير حجم الخط في هتمل يسمح لك للسيطرة على حجم النص على صفحة ويب. تتضمن هذه العملية تغيير حجم الخط بالبكسل أو النسب المئوية أو وحدات القياس الأخرى ، اعتمادا على احتياجات التصميم.
الغرض من تغيير حجم الخط هو إنشاء نص جذاب بصريا وقابل للقراءة على صفحة ويب. يساعد حجم الخط الصحيح على تحسين قابلية القراءة وفهم المحتوى من قبل المستخدم. يمكن استخدامه أيضا لتمييز المعلومات الأساسية وإنشاء عناوين أو عناوين فرعية وإنشاء أنماط مذهلة.
يتم التأكيد على أنه يجب استخدام تغييرات حجم الخط مع الإشراف. يمكن أن يخيف الخط الكبير جدا أو الصغير جدا القراء ويؤدي إلى تجربة مستخدم أسوأ.
تأثير حجم الخط على الإدراك
يمكن أن يجذب حجم الخط الكبير انتباه القارئ ويخلق تركيزا على معلومات معينة. يمكن استخدام هذا الخط للعناوين أو العناوين الفرعية لإبراز الأفكار أو المعلومات الرئيسية.
حجم الخط صغير يسمح لك لتناسب المزيد من النص على صفحة أو في وثيقة ، والتي يمكن أن تكون مفيدة في الحالات التي تحتاج إلى تقديم كمية كبيرة من المعلومات. ومع ذلك ، يمكن أن يؤدي حجم الخط الصغير جدا إلى صعوبة القراءة وتقليل مستوى الراحة عند قراءة النص.
يجب أن يعتمد اختيار حجم الخط الصحيح على السياق والغرض من الاستخدام. من الضروري مراعاة خصائص الجمهور المستهدف وميزات التصميم ومستوى سهولة القراءة.
- سهولة القراءة: يجب أن يكون حجم الخط كافيا لقراءة النص بشكل مريح. يوصى باستخدام حجم خط 14 بكسل أو أعلى للنص الرئيسي.
- العناوين والعناوين الفرعية: يمكنك استخدام حجم خط أكبر لإنشاء التركيز وإبراز المعلومات الأساسية. يوصى باستخدام حجم خط 18 بكسل أو أعلى للعناوين.
- ميزات التصميم: يجب أن يتطابق حجم الخط مع النمط العام وجماليات التصميم. على سبيل المثال ، قد يكون حجم الخط الأصغر خيارا مناسبا لتصميم أضيق الحدود ، وحجم أكبر لتصميم مشرق ومعبر.
- الجمهور المستهدف: من الضروري مراعاة عمر وخصائص الجمهور عند اختيار حجم الخط. على سبيل المثال ، بالنسبة لكبار السن ، يوصى باستخدام حجم خط أكبر لسهولة القراءة.
لذا ، فإن اختيار حجم الخط الصحيح هو عنصر تصميم مهم له تأثير على سهولة القراءة وإدراك المعلومات وتجربة المستخدم. من الضروري مراعاة السياق والغرض من الاستخدام ومتطلبات الجمهور المستهدف من أجل تحقيق أفضل النتائج.
أحجام الخطوط في أتش تي أم أل
هناك عدة طرق لتحديد حجم الخط في هتمل. يمكنك تغيير حجم الخط باستخدام وحدات القياس المطلقة والنسبية.
وحدات القياس المطلقة:
- .
- نقطة — النقاط) - يتم تحديد حجم الخط في النقاط.
- مم (ملليمتر) - يتم تحديد حجم الخط بالمليمترات.
وحدات القياس النسبية:
- .
- ريم (نسبي إم) - يتم توريث حجم الخط من العنصر الجذر (عادة هتمل أو الجسم) ولا يعتمد على حجم الخط للعنصر الأصل.
- واحد.
يعتمد اختيار كيفية تحديد حجم الخط على احتياجاتك وتفضيلاتك. توفر وحدات القياس المطلقة تحكما دقيقا في حجم الخط ، ولكن يمكن أن تؤدي إلى مشاكل عند تغيير حجم الصفحة أو تغيير إعدادات المستخدم. تسمح لك وحدات القياس النسبية بإنشاء تخطيطات أكثر تكيفا ومرونة يتم قياسها تلقائيا وفقا لإعدادات المستخدم.
أحجام الخطوط النسبية
تسمح لك أحجام الخطوط النسبية بتغيير حجم الخط بالنسبة إلى الحجم الحالي داخل العنصر. هذا يجعل من الممكن إنشاء تصميم أكثر مرونة واستجابة.
هناك ثلاثة أحجام الخطوط النسبية في هتمل:
| الوسم | الوصف |
|---|---|
| يقلل من حجم الخط بمقدار مستوى واحد بالنسبة إلى الحجم الحالي. |
| يزيد من حجم الخط بمقدار مستوى واحد بالنسبة إلى الحجم الحالي. |
| يقلل من حجم الخط ويخفض عليه بحيث تناسبها في الجزء العلوي من الحرف السابق. |
| يقلل من حجم الخط ويرفع عنه بحيث تناسبها في الجزء السفلي من الحرف السابق. |
مثال على استخدام أحجام الخطوط النسبية:
مرحبا ، هذا نص سطر بسطر.
نتيجة لذلك ، نحصل على:
مرحبا ، هذا هو حجم الخط النسبي.
مرحبا ، هذا هو حجم الخط النسبي.
مرحبا ، هذا نص سطر بسطر.
مرحبا ، هذا نص سطر بسطر.
أحجام الخطوط المطلقة
في هتمل ، من الممكن تعيين أحجام الخطوط المطلقة التي لا تعتمد على إعدادات المستخدم أو موروثة من العنصر الأصل. يتم تحديد قيم حجم الخط في وحدات قياس مختلفة.
وحدات القياس المطلقة الأكثر شيوعا هي وحدات البكسل (بكسل) والنقاط (نقطة) والبوصة (بوصة).
وحدة البكسل هي وحدة القياس الأساسية لصفحات الويب ، والتي تعبر عادة عن حجم الخط بالبكسل. بكسل واحد حوالي 1/96 من البوصة ، لكن حجمه الفعلي يعتمد على إعدادات شاشة المستخدم.
نقطة (بت) وحدة القياس هي وحدة القياس المستخدمة في الطباعة. نقطة واحدة هي 1/72 من البوصة وتستخدم لتعيين أحجام الخطوط في المواد المطبوعة. في تطوير الويب ، ظل استخدام الفقرات في الغالب لضمان التوافق مع العناصر المطبوعة أو في الحالات التي يكون فيها من الضروري تحديد حجم الخط بالضبط.
وحدة البوصة (بوصة) هي وحدة الطول الأمريكية القياسية ، والتي تبلغ 25.4 ملم أو 96 بكسل. نادرا ما يتم استخدام البوصات في تطوير الويب ، نظرا لأن أحجام الخطوط بالبوصة يمكن أن تختلف اختلافا كبيرا على الأجهزة المختلفة بكثافة بكسل مختلفة.
مثال على استخدام أحجام الخطوط المطلقة:
رأس المستوى الأول هو 24 بكسل أو 18 نقطة
فقرة من النص هي 16 بكسل أو 12 نقطة
العنوان الفرعي هو 20 بكسل أو 15 نقطة
- في كس ، هناك عدة طرق لتعيين حجم الخط للعناصر على صفحة ويب.
- بكسل
- حزب العمال
- سم
- مم
- في
- بوصة;
على سبيل المثال ، لتعيين حجم الخط إلى 14 بكسل ، يمكننا استخدام رمز كس التالي:
- ص {
- 2. استخدام وحدات القياس النسبية:
م
- نسبة إلى حجم الخط من عنصر الجذر (عادة ما
هو );
- - النسب المئوية نسبة إلى حجم الخط من العنصر الأصل;
- ص {
- }
- س س-صغير
- س-صغير
- أصغر من الحجم الافتراضي;
متوسطة
- حجم الخط الافتراضي;
كبير
- حجم الخط كبير;
كبير
استخدام خاصية حجم الخط
حجم الخط: 14 بكسل;
يحدد حجم الخط إلى 14 بكسل.
| تحدد وحدات القياس النسبية ، مثل النسب المئوية ( ٪ ) أو م أو حركة العين السريعة ، حجم الخط بالنسبة لعوامل أخرى ، مثل حجم العنصر الأصلي أو حجم الخط الأساسي للمتصفح. على سبيل المثال, | حجم الخط: 120%; |
|---|---|
يزيد حجم الخط بنسبة 20 ٪ بالنسبة إلى الحجم الأساسي. | يمكنك أيضا استخدام وحدات قياس نسبية أخرى ، مثل حركة العين السريعة ، والتي تستند إلى حجم الخط الأساسي للمتصفح. هذا يجعل من السهل تغيير حجم خط موقع الويب بأكمله عن طريق تغيير قيمة واحدة فقط. |
بالإضافة إلى ذلك ، يمكن أن تأخذ خاصية حجم الخط قيما أساسية مثل | صغير |
, | متوسطة |
، أو | كبير |
التي تتوافق مع أحجام الخطوط المحددة مسبقا. | اختياريا ، يمكنك تعيين القيم المتتالية لخاصية حجم الخط باستخدام خصائص كس الأخرى ، مثل |
@وسائل الإعلام | ، مما يسمح لك بتغيير حجم الخط اعتمادا على ظروف الوسائط المختلفة ، على سبيل المثال ، حجم الشاشة أو الجهاز. |
يوضح جدول الإخراج طرقا مختلفة لاستخدام خاصية حجم الخط ووحدة القياس: | المعنى |
الوصف