يعد اختيار حجم الخط الصحيح مهمة مهمة لمصمم الويب. يجب أن يكون الخط قابلا للقراءة وسهل الاستخدام ، ولكن يجب أيضا دمجه مع تصميم الموقع وسياقه. تتمثل إحدى طرق اختيار حجم الخط الصحيح في تعيينه اعتمادا على عرض الكتلة. يسمى هذا الأسلوب تغيير حجم الخط الديناميكي ويسمح لك بضبط حجم النص تلقائيا على أجهزة وشاشات مختلفة.
يمكن تعيين حجم النص في كس بطرق مختلفة ، على سبيل المثال ، باستخدام وحدات البكسل أو النسب المئوية أو القيم النسبية (على سبيل المثال,
م
أو
ريم
). ومع ذلك ، لا تسمح لك أي من هذه الطرق بتغيير حجم الخط تلقائيا اعتمادا على عرض الكتلة.
لتغيير حجم الخط ديناميكيا ، تحتاج إلى استخدام القيم النسبية واستعلامات الوسائط. باستخدام استعلامات الوسائط ، يمكنك تعيين أحجام خطوط مختلفة لشاشات مختلفة أو حظر العروض. يمكنك أيضا استخدام وظائف كس ، مثل
كما احسب()
، لحساب حجم الخط بناء على عرض الكتلة. يتيح لك ذلك إنشاء تصميم متكيف وسريع الاستجابة يعمل على جميع الأجهزة والشاشات.
كيفية اختيار حجم الخط في كس
ستساعدك الطرق التالية في اختيار حجم الخط الأمثل:
- نعتقد في الاختبار! ابدأ بتحديد حجم الخط الأساسي. هذا هو عادة 16 بكسل (بكسل). ثم اختبر أحجام الخطوط المختلفة للمحتوى الخاص بك واختر الحجم الأكثر قابلية للقراءة والفهم.
- ضع في اعتبارك خيارات التغييرات النسبية لحجم الخط. كس لديها عدة وحدات القياس التي تسمح لك لتعيين أبعاد نسبة إلى عناصر أخرى ، مثل النسب المئوية ( ٪ ) أو م. على سبيل المثال ، سيتطابق 100 ٪ مع حجم خط العنصر الأصل ، وسيكون 1 م مساويا لحجم الخط المخصص. يمكن أن تكون هذه الوحدات النسبية مفيدة عندما تحتاج إلى إنشاء تصميم سريع الاستجابة يتناسب بسهولة مع أحجام الشاشة المختلفة.
- ضع في الاعتبار سياق استخدام الخط. إذا كان سيتم استخدام الخط لعناوين أكبر ، فيمكن زيادة حجمه لتحقيق تأثير مرئي. ومع ذلك ، بالنسبة للفقرات والنص الرئيسي الآخر ، يجب أن يكون حجم الخط أصغر قليلا لضمان قراءة مريحة.
- استخدم استعلامات الوسائط لضبط حجم الخط بشكل تكيفي. قد يكون من الضروري تغيير حجم الخط لبعض الأجهزة أو متغيرات الشاشة لضمان سهولة القراءة المثلى. تسمح لك استعلامات الوسائط بتعيين قواعد كس مختلفة لأحجام الشاشة المختلفة.
- فكر جيدا واضبط التسلسل الهرمي للخط. تحتوي صفحة الويب عادة على أنواع مختلفة من النصوص مثل العناوين والعناوين الفرعية والفقرات وما إلى ذلك. تعيين أحجام خطوط مختلفة لأنواع مختلفة من النص. على سبيل المثال ، قد تستخدم العناوين أحجام خطوط أكبر ، بينما قد تستخدم الفقرات والعناوين الفرعية أحجاما أصغر.
اختيار حجم الخط في كس هو عملية ذاتية تعتمد على تفضيلات المصمم وسياق الاستخدام. ولكن باستخدام هذه الطرق ، ستتمكن من اختيار حجم الخط الأنسب ، مما سيخلق انطباعا مرئيا لطيفا ويضمن سهولة قراءة المحتوى.
تحديد عرض الكتلة
قبل اختيار حجم الخط للنص في كس ، من المهم تحديد عرض الكتلة التي سيتم وضع هذا النص فيها. يمكن تحديد عرض الكتلة بطريقتين رئيسيتين: عن طريق تعيين قيمة محددة بالبكسل أو النسب المئوية ، أو باستخدام وحدات القياس النسبية مثل إم أو ريم.
يعد تعيين عرض الكتلة بالبكسل هو الطريقة الأكثر مباشرة. على سبيل المثال ، يمكنك تعيين عرض الكتلة إلى 500 بكسل باستخدام خاصية كس " العرض: 500 بكسل؛". يتيح لك هذا الأسلوب التحكم بدقة في حجم الكتلة ، ومع ذلك ، قد يكون غير مريح عند تطوير تصميم تكيفي ، لأن مثل هذه الكتلة سيكون لها عرض ثابت بغض النظر عن حجم الشاشة.
الطريقة الثانية لتحديد عرض الكتلة هي استخدام قيمة النسبة المئوية. على سبيل المثال ، يمكنك تعيين عرض الكتلة إلى 50 ٪ باستخدام خاصية كس "العرض: 50٪؛". تتيح لك هذه الطريقة إنشاء كتل تشغل نسبة مئوية معينة من عرض الحاوية الأصلية. باستخدام هذا النهج ، ستتكيف الكتلة مع حجم الشاشة ، والذي يمكن أن يكون مفيدا عند تطوير تصميم تكيفي.
يعد استخدام وحدات القياس النسبية ، مثل إم أو ريم ، أيضا طريقة شائعة لتحديد عرض الكتلة. يتم تعريف وحدة م كنسبة مئوية من حجم الخط المحدد في العنصر الأصل. على سبيل المثال ، إذا كان حجم خط العنصر الأصلي هو 16 بكسل ، فسيكون 1 إم مساويا لـ 16 بكسل. يمكن تعيين العنصر الأصل إما بالبكسل أو كنسبة مئوية. وحدة قياس حركة العين السريعة مماثلة ل م ، ولكن يتم تحديدها بالنسبة لحجم الخط المحدد في عنصر الجذر (عادة ما يكون). يتيح لك استخدام وحدات القياس النسبية إنشاء تصميم مرن يتسع بسهولة ويتكيف مع أحجام الشاشة المختلفة وأحجام الخطوط المختلفة.
وبالتالي ، يعد تحديد عرض الكتلة خطوة مهمة عند اختيار حجم الخط في كس. يتيح لك اختيار وحدة القياس المناسبة لتعيين عرض الكتلة إنشاء تصميم مرن وسريع الاستجابة يبدو جيدا على الأجهزة المختلفة وبأحجام خطوط مختلفة.