محول تباعد الأحرف (Tracking → CSS)
حوّل قيمة Tracking في فوتوشوب/إليستريتور أو نسبة % في Figma لتباعد الأحرف إلى قيم CSS بوحدتي em وpx.
1,151 مشاهدة
معاينة
TYPOGRAPHY SPACING EXAMPLE
ثلاث أدوات، ثلاث وحدات
تقيس برامج أدوبي التتبع (Tracking) بوحدة جزء من ألف من الـ em: em في CSS = التتبع ÷ 1000، فتتبع بقيمة 50 → letter-spacing: 0.05em. نسبة Figma المئوية هي ببساطة em × 100: 5% = 0.05em. أما قيمة px فتعتمد إضافياً على حجم الخط: 0.05em عند 16 بكسل = 0.8 بكسل، بينما القيمة نفسها 0.05em عند 48 بكسل تساوي 2.4 بكسل. أدخل أي قيمة تظهر في ملف التصميم لديك، وستتحدّث باقي القيم فوراً، فلا تحتاج أبداً لحساب الأرقام يدوياً عند تسليم مواصفة من Figma إلى مطوّر. يتبع كل من Sketch وAdobe XD منطق em نفسه المستخدم في CSS، ولهذا يُعد حقل em عادةً الخيار الأكثر أماناً للتوحيد عليه عبر سلسلة أدوات تصميم مختلطة.
ما يجدر معرفته
مصطلح "Tracking" موروث من آلات الطباعة الضوئية (phototypesetting) في الستينيات والسبعينيات، مثل ملصقات النقل الجاف Letraset وأجهزة الطباعة الضوئية المبكرة، حيث كان ضبط تباعد الأحرف يعني تحريك الحروف فعلياً على شريط فيلم أو ورقة نقل. كثيراً ما يُخلط بينه وبين Kerning، لكنهما ليسا الشيء نفسه: يضيف Tracking تباعداً متساوياً عبر نص محدَّد بالكامل، بينما يضبط Kerning المسافة بين زوج واحد فقط من الحروف المتجاورة — مثل الأشكال المتداخلة في "AV" أو "To" — لتصحيح فجوة بصرية غير مريحة لا يستطيع التباعد الموحّد حلّها. وفي CSS ثمة تفصيلة عملية تستحق المعرفة: تضيف خاصية letter-spacing مسافة بعد كل حرف، بما في ذلك الحرف الأخير، فقد يبدو النص المُوسَّط أو المحاذى لليمين غير متزن قليلاً بسبب هذه الفجوة الخفية الزائدة التي لا يحسب لها أحد حساباً. قيم Tracking السالبة صحيحة تماماً كالقيم الموجبة وشائعة في العناوين الكبيرة جداً، حيث يبدأ التباعد الافتراضي يبدو فضفاضاً بمجرد تكبير الحروف إلى ما هو أبعد من حجمها المصمَّم له.
- العناوين الكبيرة الظاهرة: −10 إلى −30 تتبع (تُضيَّق لتحقيق تأثير بصري)
- التسميات الصغيرة بأحرف كبيرة: +50 إلى +200 تتبع (تُفتَح لتحسين القراءة)
- نص الجسم: يُترك عادةً عند 0 — التباعد الافتراضي مضبوط أصلاً من قِبل مصمم الخط
- الشعارات النصية وعلامات الكلمات: غالباً ما تُضبَط يدوياً لكل زوج حروف على حدة، تجاوزاً لما يمكن لقيمة تتبع واحدة تحقيقه
الأسئلة الشائعة
يعرض Figma تباعد الأحرف بوحدة px — ماذا أفعل؟
عندها تكون القيمة هي بالفعل قيمة CSS بوحدة px؛ أدخلها في حقل px بعد ضبط حجم الخط، واقرأ ما يعادلها بوحدة em للحصول على CSS يتحجّم بشكل صحيح عبر أحجام خط مختلفة. يدعم Figma فعلياً وحدتي النسبة المئوية وpx لتباعد الأحرف بحسب إعدادات الملف، لذا تحقق من الوحدة التي يستخدمها نظام التصميم لديك قبل تسليم القيم للتطوير.
لماذا يحتاج النص بأحرف كبيرة إلى تباعد موجب؟
الأحرف الكبيرة (Capitals) مصمَّمة لتُحاط بأحرف صغيرة ذات امتدادات علوية وسفلية توازنها؛ فإذا وُضعت وحدها متلاصقة، بلا أحرف صغيرة توازنها، بدت مزدحمة بصرياً. تُعد زيادة من +5% إلى +15% (تتبع 50-150) الحل التقليدي لتسميات الأحرف الكبيرة بالكامل وعناصر التنقل والنصوص التمهيدية، إذ تفتح أشكال الحروف بما يكفي لتُقرأ بارتياح بنظرة واحدة.
ما الفرق بين Tracking وKerning؟
يضيف Tracking تباعداً موحداً عبر امتداد كامل من النص — كلمة، أو سطر، أو تحديد كامل. أما Kerning فيضبط المسافة بين زوج واحد فقط من الحروف المتجاورة، مثل "AV" أو "To"، حيث كانت الأشكال ستتداخل أو تترك فجوة بصرية غريبة لولا ذلك. تعالجهما CSS بشكل منفصل أيضاً: letter-spacing يتحكم في Tracking، بينما font-kerning (يُترَك عادةً على "normal") يتحكم في التقارب بين كل زوج مأخوذاً من جدول التقارب المدمج في الخط نفسه.
لماذا يبدو النص المُوسَّط غير متزن قليلاً عند تطبيق letter-spacing؟
تضيف letter-spacing في CSS مسافة بعد كل حرف، بما في ذلك الحرف الأخير — وهي خاصية غريبة في المواصفة تُفاجئ كثيراً من المطورين. في النص المُوسَّط أو المحاذى لليمين، تُزيح تلك المسافة الخفية الزائدة المركز البصري، فيبدو النص وكأنه انزاح قليلاً عن موضعه الصحيح. الحل الشائع هو إضافة margin-right سالب صغير للعنصر، يساوي تقريباً قيمة letter-spacing.
من أين جاء مصطلح "Tracking"؟
يعود أصله إلى معدات الطباعة الضوئية في الستينيات والسبعينيات — آلات مثل ملصقات النقل Letraset ووحدات الطباعة الضوئية، حيث كان ضبط المسافة بين الحروف يعني حرفياً تحريك مسارها (track) على شريط فيلم أو ورقة نقل. بقي المصطلح مستخدَماً خلال عصر الطباعة الرقمية، وأصبح في النهاية الكلمة المعيارية لتباعد الأحرف في أدوات مثل Photoshop وIllustrator، حتى بعد اختفاء الآلات الفعلية التي وصفها أصلاً بزمن طويل.
أدوات مشابهة
الإبلاغ عن مشكلة
محول تباعد الأحرف (Tracking → CSS)
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!