هوية العلامة
خطوط الكاروسيل وحجم النص والتباين
يُقرأ الكاروسيل على الهاتف، بنحو ثلث الحجم الذي تصممه به، وغالبًا في الخارج وعلى عجل. إليك الحجم الذي يجب أن يكون عليه النص، والخطوط التي تصمد، والتباين الذي تحتاجه، وما يجب أن تبعده عن الشريحة، على كل منصة.
ما حجم الخط المناسب لنص الكاروسيل؟
صمّم للهاتف، لا لشاشة الكمبيوتر. يعرض الهاتف الشريحة التي عرضها 1080 بكسل بعرض 360 نقطة تقريبًا، أي ثلث عرضها بالبكسل (والهواتف الكبيرة تعرضها أعرض قليلًا). لذا فكل حجم تضبطه على الشريحة يصبح أصغر بنحو ثلاث مرات على الشاشة التي يقرؤه الناس عليها.
تحدد إرشادات التصميم من Apple أصغر نص على iPhone بـ 11 نقطة، وحجم القراءة الافتراضي بـ 17 نقطة. اضربهما في ثلاثة تحصل على أرقام الشريحة التي عرضها 1080 بكسل: نحو 33 بكسل كحد أدنى لكل ما ينبغي أن يقرأه الناس، ونحو 51 بكسل لنص متن مريح. وتنبّه أداة فحص PDF لـ LinkedIn المجانية من aiCarousels إلى النص الأصغر من 24 بكسل تقريبًا لأنه صعب القراءة على الهاتف: اعتبره الحد الأدنى للتسميات الصغيرة مثل رقم الصفحة أو اسم حسابك، لا حجمًا للجمل.
أحجام النص على شريحة عرضها 1080 بكسل، وما تصبح عليه على الهاتف
| على الشريحة | على الهاتف (نقاط الشاشة) | استخدمه لـ | مرسوم بحجم الهاتف |
|---|---|---|---|
| 24 بكسل | 8 نقاط | الحد الأدنى: أرقام الصفحات، واسم حسابك، وسطر المصدر | اسحب لترى الإصلاحات الخمسة |
| 33 بكسل | 11 نقطة | أصغر نص ينبغي أن يقرأه الناس (الحد الأدنى لدى Apple) | اسحب لترى الإصلاحات الخمسة |
| 51 بكسل نص المتن | 17 نقطة | نص المتن (حجم القراءة الافتراضي لدى Apple) | اسحب لترى الإصلاحات الخمسة |
| 72 بكسل فأكثر | 24 نقطة فأكثر | العناوين؛ و«النص الكبير» في WCAG من حيث التباين (أدناه) | اسحب لترى الإصلاحات الخمسة |
أحجام الشريحة مقسومة على ثلاثة: هاتف يعرض الشريحة بعرض 360 نقطة. ونقاط الشاشة وحدة Apple، وكل منها يساوي بكسل CSS واحدًا تقريبًا؛ أما WCAG فيقيس النص الكبير بنقاط الطباعة، و18 نقطة منها تساوي نحو 24 نقطة شاشة. والعمود الأخير مرسوم بهذا الحجم على الشاشة. مصادر أحجام Apple: Human Interface Guidelines (Typography)، وUI Design Dos and Don’ts.
تعمل على لوحة أكبر؟ اتّبع النسبة نفسها: بعرض 2160 بكسل، ضاعف كل رقم. والخط الرفيع أو المضغوط يحتاج إلى أحجام أكبر من هذه، لا أصغر؛ إذ تنصح إرشادات Apple باختيار أحجام أكبر حين يكون للخط المخصص وزن رفيع.
مقاسات الكاروسيل الشائعة كلها بعرض 1080 بكسل (1080 × 1350 لـ LinkedIn وInstagram بنسبة 4:5، و1080 × 1440 لـ Instagram بنسبة 3:4، و1080 × 1920 لـ TikTok)، لذا تصلح هذه الأحجام على كل منصة. والمقاسات الدقيقة لكل تطبيق في مقاسات الكاروسيل على كل منصة.
ما أفضل الخطوط للكاروسيل؟
أفضل خط للكاروسيل هو الخط الذي لا يلاحظه الناس وهم يقرؤون. إليك بعض القواعد التي تصح على كل منصة:
- خطان يكفيان. واحد للعناوين، وآخر لكل ما عداها. استخدم الحجم والوزن لبقية التسلسل الهرمي، لا خطًا ثالثًا.
- اترك الشخصية لخط العناوين. الخط ذو الزوائد (serif)، أو الخط الغروتسك الثقيل، أو خط العرض المضغوط، كلها تناسب بضع كلمات كبيرة.
- اجعل خط المتن بسيطًا. أشكال حروف مفتوحة، وارتفاع سخي للحروف الصغيرة (x-height)، ووزن عادي متين. ومعظم الخطوط النظيفة بلا زوائد (sans serif) تفي بالغرض.
- تجنب الأوزان الرفيعة والخفيفة في الأحجام الصغيرة. تحذّر إرشادات Apple من أن أوزان Ultralight وThin وLight صعبة الرؤية، خاصة حين يكون النص صغيرًا.
- احصر الخطوط اليدوية والأحرف الكبيرة في كلمات قليلة. الخط المكتوب باليد، أو السطر المكتوب كله بأحرف لاتينية كبيرة، أبطأ في القراءة من الأحرف الصغيرة. يناسب عنوانًا قصيرًا، ويُتعب في فقرة كاملة.
- حافظ عليها نفسها في كل شريحة، وفي كل كاروسيل. يتعلم الناس مظهرك، وتحفظ هوية العلامة الخطوط والألوان لكل كاروسيل جديد.
أزواج خطوط تصمد على الهاتف
| المظهر | عناوين | نص المتن |
|---|---|---|
| نظيفة وعصرية | Space Grotesk | Inter |
| تحريرية | Fraunces | Inter |
| أنيقة | Playfair Display | Manrope |
| ودود | Lora | Plus Jakarta Sans |
| جريئة | Archivo Black | Inter |
أزواج من أداة مولّد تنسيق الخطوط المجانية. وكلها من Google Fonts، ومجانية للاستخدام التجاري.
ما مقدار التباين الذي يحتاجه نص الكاروسيل؟
التباين هو الفرق في درجة السطوع بين النص وما خلفه، ويُكتب كنسبة من 1:1 (لا تباين) إلى 21:1 (أسود على أبيض). ويشترط معيار إمكانية الوصول على الويب، WCAG 2.2، تباينًا لا يقل عن 4.5:1 للنص، و 3:1 للنص الكبير: 18 نقطة، أو 14 نقطة بالخط العريض. ويقول WCAG إن الأمر نفسه ينطبق على صور النصوص، وكل شريحة في الكاروسيل صورة نص. ولا يُستثنى إلا الشعارات والنص العَرَضي: كلمات للزينة فقط، أو صادف أنها جزء من صورة فوتوغرافية. وعنوان الشريحة ونص متنها ليسا من هذا ولا ذاك.
يجعل WCAG الـ 18 نقطة طباعة نحو 24 بكسل على الشاشة، أي نقاط الشاشة الـ 24 في الجدول أعلاه. وعلى شريحة يعرضها الهاتف بثلث حجمها، يعادل ذلك نحو 72 بكسل (أو نحو 56 بكسل بالخط العريض). لذا يمكن للعناوين بهذا الحجم أن تكتفي بـ 3:1. وكل ما هو أصغر، ومنه نص المتن، يحتاج إلى 4.5:1.
أمثلة على التباين بألوان الكاروسيل
| النسبة | نص المتن (يحتاج إلى 4.5:1) | العناوين 72 بكسل فأكثر (تحتاج إلى 3:1) | |
|---|---|---|---|
| Aaنص داكن على أبيض (#1F1A2E على #FFFFFF) | 16.9:1 | نعم | نعم |
| Aaرمادي متوسط على أبيض (#6F6A7B على #FFFFFF) | 5.2:1 | نعم | نعم |
| Aaرمادي فاتح على أبيض (#9C97A7 على #FFFFFF) | 2.8:1 | لا | لا |
| Aaأبيض على بنفسجي (#FFFFFF على #7F56D9) | 5.0:1 | نعم | نعم |
| Aaأبيض على برتقالي (#FFFFFF على #E0663B) | 3.4:1 | لا | نعم |
| Aaنص داكن على البرتقالي نفسه (#1F1A2E على #E0663B) | 4.9:1 | نعم | نعم |
| Aaأصفر على أبيض (#F5C518 على #FFFFFF) | 1.6:1 | لا | لا |
| Aaالأصفر نفسه على داكن (#F5C518 على #1F1A2E) | 10.3:1 | نعم | نعم |
نسب محسوبة بمعادلة WCAG لهذه الألوان بالضبط. ويبيّن البرتقالي الحل المعتاد: احتفظ باللون، وغيّر النص الذي فوقه.
- النص فوق صورة يتغير تباينه من حرف إلى آخر. ضع الكلمات على لوحة بلون مصمت، أو اجعل الصورة خلفها أغمق، وافحص أفتح نقطة خلف النص.
- ألوان العلامة التجارية غالبًا ما تفشل كألوان للنص. استخدمها للخلفيات والأشكال وكلمة مميزة واحدة، واكتب النص بلونك المحايد الداكن أو الفاتح.
- اترك هامشًا. 4.5:1 هو الحد الأدنى على شاشة جيدة. والناس يقرؤون الكاروسيلات تحت الشمس، مع خفض السطوع. والنسبة الأعلى لا تكلّف شيئًا.
كم يجب أن يكون النص على شريحة الكاروسيل الواحدة؟
أقل مما تظن. إن لم تتسع الكلمات بالأحجام السابقة، فالشريحة تحمل أكثر من اللازم.
- فكرة واحدة لكل شريحة. عنوان يوصل الفكرة، وسطر أو سطران يدعمانها.
- غلاف قصير. 12 كلمة أو أقل هو الهدف الذي يعتمده فحص جاهز للنشر؟ في aiCarousels للشريحة الأولى.
- قسّم ولا تصغّر. حين تبدو الشريحة كفقرة، اجعلها شريحتين. فمعظم المنصات تمنحك المساحة: Instagram يقبل حتى 20 شريحة.
- قوائم قصيرة. بضعة عناصر في كل شريحة، كل منها في سطر واحد.
في aiCarousels يمكنك ضبط ذلك قبل كتابة أي شيء: في خيارات أخرى › الكلمات في كل شريحة تجد «تلقائي»، و«مختصر وقوي» (أقل عدد من الكلمات)، و«متوازن»، و«مفصّل». وأثناء التعديل، يحصل النص الذي لا يتسع بحجم مقروء على وسم أحمر طويل جدًا على هذا المربع بدلًا من أن يصغر، ويختصره زر اختصار ليتسع بأسلوبك. هذه هي الملاءمة الذكية للنص. أو بدّل تخطيط الشريحة إلى تخطيط بمساحة أكبر: تنتقل كلماتك معه.
هل الخط العريض بـ Unicode سيئ لقارئات الشاشة؟
يعتمد ذلك على مكان الخط العريض.
- على الشريحة: الخط العريض هو الوزن العريض للخط نفسه، مرسومًا داخل الصورة. ويبدو كما هو لكل من يراه. لا مشكلة.
- في الوصف: «الخط العريض» الذي تلصقه من أداة تنسيق نص ليس خطًا عريضًا أصلًا. إنه مجموعة أخرى من الرموز، هي Mathematical Alphanumeric Symbols (من U+1D400 إلى U+1D7FF)، صُممت للرياضيات. ويوصي Unicode بعدم استخدامها بدلًا من التنسيق الحقيقي. وقد تتجاوزها قارئات الشاشة أو تقرأ شيئًا مثل «mathematical sans-serif script t»، كما تشرح جمعية Scope الخيرية لذوي الإعاقة.
لذا احصر الحروف المنسّقة في كلمات قليلة، ولا تستخدمها أبدًا في اسم أو وسم أو الجملة التي يجب أن يفهمها الناس. وطريقة ذلك في كل تطبيق في الخط العريض على LinkedIn وفي أداة تنسيق وصف Instagram.
هل تختلف الخطوط وأحجام النص بين لينكد إن وانستقرام وتيك توك؟
تصح الأحجام السابقة في كل مكان، لأن الشرائح كلها بعرض 1080 بكسل. ما يتغير هو ما يظهر فوقها:
- TikTok والشرائح بنسبة 9:16: تغطي أزرار التطبيق والوصف أطراف الشريحة. أبعد الكلمات عنها. ويرسم aiCarousels هذه المناطق حين تفعّل إظهار المناطق الآمنة.
- Instagram: يظهر عدّاد الشرائح في أعلى الصورة، والنقاط تحتها. اترك هامشًا عند الأطراف، واكتب نصًا بديلًا لكل شريحة.
- LinkedIn: الكاروسيل مستند PDF. وتجد مقاس الصفحة والغلاف وملف PDF نفسه في نصائح ومواصفات تصميم كاروسيل LinkedIn.
مثال: كاروسيل مبني على هذه القواعد
ست شرائح بنسبة 4:5. عناوين كبيرة، وسطر واحد من نص المتن في كل منها، وداكن على فاتح، وزوج خطوط واحد من الغلاف حتى الشريحة الأخيرة.
1 / 6
طريقة ضبط الخطوط وحجم النص والتباين في aiCarousels
- 01
اختر سمة
تحدد السمة ألوان الكاروسيل كله وخطوطه وأسلوبه، وتعمل مع كل التخطيطات. افتح السمة، وصفِّ حسب فاتح أو داكن أو حسب أسلوب مثل «بسيطة» أو «مهنية»، وانقر على إحداها لتجربتها فورًا. شاهدها كلها في السمات.
- 02
اضبط الخطوط وحجم النص
في تخصيص السمة › الخطوط، اختر زوج الخطوط، أو اختر خط العناوين وخط النص كلًّا على حدة. ويغيّر حجم النص حجم النص في كل الشرائح، ويحدد حالة أحرف العناوين الأحرف الكبيرة أو الصغيرة.
- 03
اختر ألوانًا بتباين كافٍ
في تخصيص السمة › الألوان، اضبط هذه الألوان: الخلفية، العناوين، نص المتن، مميز. وافحص لون النص مقابل الخلفية بالجدول أعلاه: 4.5:1 لنص المتن.
- 04
أصلح النص الذي لا يتسع
إن ظهر على الشريحة طويل جدًا على هذا المربع، فاضغط اختصار ليتسع، أو غيّر التخطيط. ولتكبير نص شريحة واحدة أو تصغيره، استخدم الشريحة › المظهر › حجم النص (من 50% إلى 160%).
- 05
افحصه على الهاتف، ثم احفظ المظهر
اضغط معاينة: تُعرض الشرائح داخل هاتف، بالوضع الفاتح أو الداكن. وتنبّهك قائمة جاهز للنشر؟ إلى النص الصغير على شاشة الهاتف، ومربعات النص الأصغر من كلماتها. وحين يعجبك المظهر، يحفظه استخدام في هوية علامتي لكل كاروسيل جديد.
الأسئلة الشائعة
ما حجم الخط الذي أستخدمه في الكاروسيل؟
على شريحة عرضها 1080 بكسل، يُقرأ نص المتن بحجم 50 بكسل تقريبًا بسهولة على الهاتف، ولا ينبغي أن يقل أي نص يُفترض أن يقرأه الناس عن 33 بكسل. العناوين 72 بكسل فأكثر. ويمكن أن تنزل التسميات الصغيرة، مثل رقم الصفحة، إلى نحو 24 بكسل.
ما أفضل خط للكاروسيل؟
زوج من الخطوط: خط له شخصية للعناوين، وخط بسيط ومتين بلا زوائد (sans serif) لنص المتن. وأزواج مثل Space Grotesk مع Inter، أو Fraunces مع Inter، تصمد جيدًا على الهاتف. وتجنب الأوزان الرفيعة والخفيفة للنص الصغير.
ما نسبة التباين التي يحتاجها النص على الشريحة؟
4.5:1 على الأقل بين النص والخلفية، و3:1 للعناوين الكبيرة، كما يشترط WCAG 2.2. وعلى شريحة عرضها 1080 بكسل، يعني «كبير» نحو 72 بكسل، أو 56 بكسل بالخط العريض.
كم خطًا يجب أن يستخدم الكاروسيل؟
خطان كحد أقصى: واحد للعناوين وآخر لكل ما عداها. استخدم الحجم والوزن للباقي. وحافظ على الزوج نفسه في كل شريحة.
هل تستطيع قارئات الشاشة قراءة النص على شرائح الكاروسيل؟
ليس حين تكون الشريحة صورة: لا يستطيع قارئ الشاشة إلا قراءة النص البديل الذي تضيفه. في Instagram، أضف لكل شريحة نصًا بديلًا يقول ما تقوله الشريحة. وفي LinkedIn، يحتاج ملف PDF إلى نص حقيقي، لا صور نصوص، ليجد قارئ الشاشة ما يقرؤه.
