कर्निंग: यह क्या है और अक्षरों के बीच के अंतर को कैसे समायोजित करें

टाइपोग्राफी में कर्निंग क्या है

कर्निंग ऑप्टिकल आर्टिफैक्ट को खत्म करने के लिए विशिष्ट वर्ण जोड़ों के बीच की दूरी को मैन्युअल या स्वचालित रूप से समायोजित करने की प्रक्रिया है। समस्या इसलिए उत्पन्न होती है क्योंकि प्रत्येक अक्षर की एक अद्वितीय ज्यामिति होती है: A का एक शीर्ष होता है, V का दायाँ झुकाव होता है, T का एक चौड़ा क्रॉसबार होता है। जब ऐसे अक्षर एक दूसरे के बगल में होते हैं, तो उनकी रूपरेखा के बीच की दूरी असमान दिखाई देती है, भले ही set width समान हो।

फ़ॉन्ट कर्निंग तालिकाओं में पूर्व निर्धारित समायोजन मानों वाले वर्ण जोड़े होते हैं। एक अच्छे टाइपफेस में 300 से 2000 कर्निंग जोड़े हो सकते हैं। पेशेवर टाइपफेस — जैसे Apple का SF Pro या Google का Roboto — में सावधानीपूर्वक तैयार की गई कर्निंग तालिकाएँ शामिल होती हैं जो लैटिन और सिरिलिक अक्षरों के सभी संभावित संयोजनों को कवर करती हैं। Fontshop Guide to Kerning के अनुसार, कर्निंग तालिकाओं की गुणवत्ता एक पेशेवर फ़ॉन्ट के मुख्य संकेतकों में से एक है।

कर्निंग का दृश्य प्रभाव विशेष रूप से शीर्षकों, लोगो और बड़े फ़ॉन्ट आकारों (24 pt और ऊपर) में ध्यान देने योग्य होता है। छोटे टेक्स्ट (12–14 pt) में अक्षरों के बीच का स्थान कम होता है और कर्निंग कम ध्यान देने योग्य होता है, हालाँकि यह अभी भी काम करता है। वेब ब्राउज़र और मोबाइल OS डिफ़ॉल्ट रूप से अंतर्निहित कर्निंग लागू करते हैं, लेकिन डेवलपर इसे विशिष्ट डिज़ाइन के लिए अक्षम या समायोजित कर सकता है।

कर्निंग और ट्रैकिंग: मुख्य अंतर

शुरुआती डेवलपर अक्सर कर्निंग और ट्रैकिंग को भ्रमित करते हैं, लेकिन ये मौलिक रूप से भिन्न टाइपोग्राफिक पैरामीटर हैं। कर्निंग वर्ण-जोड़ी स्तर पर काम करता है और केवल विशिष्ट संयोजनों के बीच स्थान को समायोजित करता है जहाँ अक्षर ज्यामिति ऑप्टिकल असंतुलन पैदा करती है। ट्रैकिंग (letter-spacing) चयनित भाग में सभी वर्णों के बीच के अंतराल को समान रूप से बदलता है — इसे समान रूप से बढ़ाता या घटाता है।

ट्रैकिंग कब लागू की जाती है: छोटे टेक्स्ट की पठनीयता में सुधार के लिए (सकारात्मक ट्रैकिंग), एक्सेंट शीर्षक बनाने के लिए (नकारात्मक ट्रैकिंग), इंटरफ़ेस डिज़ाइन में टेक्स्ट को स्टाइल करने के लिए। ट्रैकिंग को एक संख्यात्मक मान के रूप में सेट किया जाता है और प्रत्येक वर्ण पर लागू किया जाता है, जिसमें पहले से कर्न किए गए जोड़े शामिल हैं — कर्निंग सुधार संरक्षित रहते हैं लेकिन उनके ऊपर एक वैश्विक बदलाव जोड़ा जाता है।

महत्वपूर्ण नियम: नकारात्मक ट्रैकिंग (संपीड़न) के साथ, कर्निंग जोड़ों पर ध्यान दें — वे अवांछित अक्षर ओवरलैप बना सकते हैं। CSS में, letter-spacing गुण फ़ॉन्ट की कर्निंग तालिका के ऊपर लागू होता है, और मजबूत संपीड़न (letter-spacing: -1px) के साथ कर्निंग सुधार वर्णों के विलय का कारण बन सकते हैं।

NSAttributedString के माध्यम से iOS में कर्निंग का कार्यान्वयन

iOS पर, कर्निंग NSAttributedString में .kern विशेषता के माध्यम से प्रबंधित किया जाता है। विशेषता का मान Float है, जहाँ सकारात्मक संख्या स्थान बढ़ाती है, नकारात्मक संख्या घटाती है, और 0 कर्निंग को अक्षम करता है। डिफ़ॉल्ट मान nil है, जिसका अर्थ है फ़ॉन्ट की कर्निंग तालिका का उपयोग करना। कर्निंग के साथ काम करने के लिए प्राथमिक API NSMutableAttributedString है जिसमें टेक्स्ट रेंज में विशेषता जोड़ी जाती है।

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// कर्निंग सक्षम करें (फ़ॉन्ट तालिका का उपयोग करता है)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel पर लागू करें
label.attributedText = attributedText

डिफ़ॉल्ट मान .kern = nil फ़ॉन्ट तालिका से कर्निंग को सक्षम करता है। यदि आपको कर्निंग को पूरी तरह से अक्षम करने की आवश्यकता है, तो .kern = 0 सेट करें। मान 0.0 और nil अलग-अलग स्थितियाँ हैं: nil तालिका का उपयोग करता है, 0 सभी कर्निंग जोड़ों को बलपूर्वक शून्य करता है। Apple Text Programming Guide के अनुसार, स्पष्ट रूप से 0 सेट करना मोनोस्पेस्ड टेक्स्ट या उन मामलों के लिए उपयोगी है जहाँ कर्निंग हस्तक्षेप करता है — उदाहरण के लिए, निश्चित-चौड़ाई वाले बटनों में।

SwiftUI Text के लिए .kerning() मॉडिफायर प्रदान करता है। UIKit के विपरीत, SwiftUI में कर्निंग व्यू स्तर पर सेट किया जाता है, न कि एट्रिब्यूटेड स्ट्रिंग पर। मॉडिफायर एक CGFloat स्वीकार करता है और Text ब्लॉक के अंदर सभी टेक्स्ट पर लागू होता है। SwiftUI में आंशिक कर्निंग के लिए, Text पर + ऑपरेटर और अलग-अलग मॉडिफायर के संयोजन का उपयोग किया जाता है।

struct KerningView: View {
    var body: some View {
        Text("कर्निंग के साथ शीर्षक")
            .kerning(1.0)
            .font(.title)
    }
}

प्रदर्शन: कर्निंग विशेषता वाला NSAttributedString रेंडरिंग के दौरान वर्ण स्थितियों की पुनर्गणना करता है। स्थिर टेक्स्ट के लिए यह एक बार होता है। गतिशील टेक्स्ट (UICollectionView में बदलते टेक्स्ट) के लिए — हर बार जब यह बदलता है। लंबी स्ट्रिंग्स (500 वर्णों से अधिक) पर कर्निंग के साथ बड़ी रेंज का उपयोग स्क्रॉलिंग के दौरान FPS को कम कर सकता है।

letterSpacing के माध्यम से Android पर कर्निंग कॉन्फ़िगर करना

Android पर, कर्निंग TextView और XML लेआउट में letterSpacing गुण के माध्यम से प्रबंधित किया जाता है। विशेषता Float प्रकार की है और फ़ॉन्ट के em आकार के गुणक के रूप में काम करती है। मान 0 डिफ़ॉल्ट कर्निंग से मेल खाता है, सकारात्मक स्थान बढ़ाता है, नकारात्मक घटाता है। letterSpacing API Level 21 (Android 5.0 Lollipop) से उपलब्ध है।

SpannableString के माध्यम से कार्यान्वयन पूरे टेक्स्ट के बजाय स्ट्रिंग के एक भाग पर कर्निंग लागू करने की अनुमति देता है। सटीक नियंत्रण के लिए ScaleXSpan क्लास या कस्टम ReplacementSpan का उपयोग किया जाता है। Android Developer Guide के अनुसार, ScaleXSpan वर्णों को क्षैतिज रूप से स्केल करता है, अंतर-वर्ण स्थान परिवर्तन का अनुकरण करता है, लेकिन सीधे कर्निंग-जोड़ी नियंत्रण प्रदान नहीं करता है।

// XML लेआउट में
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Kotlin में प्रोग्रामेटिक रूप से
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

सीमा: Android सीधे कर्निंग तालिकाओं का समर्थन नहीं करता है — letterSpacing सभी वर्णों के लिए ट्रैकिंग के रूप में काम करता है। Android पर जोड़ी कर्निंग के लिए, अंतर्निहित कर्निंग तालिकाओं (OpenType GPOS feature kern) वाले फ़ॉन्ट का उपयोग किया जाता है। समर्थन OS संस्करण और रेंडरिंग इंजन पर निर्भर करता है: Android 10+ पर Minikin का उपयोग पूर्ण OpenType सुविधा समर्थन के साथ किया जाता है, पुराने संस्करणों पर HarfBuzz सीमाओं के साथ। अनुशंसा: Android 8.0 से नीचे के उपकरणों पर कर्निंग प्रदर्शन का परीक्षण करें।

CSS के माध्यम से वेब डेवलपमेंट में कर्निंग

वेब पर, कर्निंग को CSS गुण font-kerning के माध्यम से नियंत्रित किया जाता है, जो फ़ॉन्ट की अंतर्निहित कर्निंग तालिकाओं को सक्षम या अक्षम करता है। मान: auto (ब्राउज़र तय करता है), normal (कर्निंग सक्षम), none (कर्निंग अक्षम)। यह गुण 2016 से सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। MDN Web Docs के अनुसार, font-kerning केवल कर्निंग तालिका वाले OpenType फ़ॉन्ट पर लागू होता है।

CSS गुण letter-spacing ट्रैकिंग का एनालॉग है, लेकिन इसका उपयोग कर्निंग-जैसे प्रभावों के लिए भी किया जाता है। font-kerning के विपरीत, letter-spacing कर्निंग जोड़ों की परवाह किए बिना, सभी वर्णों के बीच के अंतराल को समान रूप से बदलता है। जब दोनों गुणों का उपयोग किया जाता है, तो font-kerning पहले लागू होता है, फिर letter-spacing उसके ऊपर एक समान बदलाव जोड़ता है।

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

TypeScript उपयोगिता कर्निंग को ध्यान में रखते हुए इष्टतम letter-spacing की गणना करने के लिए Canvas API के माध्यम से फ़ॉन्ट की कर्निंग तालिका का विश्लेषण कर सकती है। हालाँकि, व्यवहार में वेब डेवलपर font-kerning: normal पर भरोसा करते हैं जो अधिकांश मामलों में इष्टतम परिणाम देता है। अतिरिक्त letter-spacing समायोजन केवल डिज़ाइन एक्सेंट के लिए आवश्यक है — उदाहरण के लिए, बड़ी टाइपोग्राफी वाली लैंडिंग पेजों में।

कर्निंग कॉन्फ़िगरेशन के लिए व्यावहारिक सुझाव

कर्निंग एक सूक्ष्म-समायोजन उपकरण है, और इसका गलत अनुप्रयोग पठनीयता को खराब करता है। पहला नियम: बॉडी टेक्स्ट के लिए कर्निंग न बदलें। पेशेवर फ़ॉन्ट कर्निंग तालिकाओं में पहले से ही 12–16pt आकारों के लिए इष्टतम मान होते हैं। बॉडी टेक्स्ट कर्निंग में हस्तक्षेप असमानता और दृश्य शोर की ओर ले जाता है।

दूसरा नियम: 24pt और उससे ऊपर के शीर्षकों के लिए, सकारात्मक कर्निंग (टाइपफेस के आधार पर 0.5–1.5 pt) का उपयोग करें। बड़े टेक्स्ट को पठनीयता के लिए अधिक अक्षर स्थान की आवश्यकता होती है। कम x-height वाले फ़ॉन्ट (जैसे Didot) को उच्च x-height वाले फ़ॉन्ट (जैसे Helvetica) की तुलना में अधिक कर्निंग की आवश्यकता होती है। संदर्भ डेटा: iOS Apple Music ऐप में, शीर्षक 0.8 pt कर्निंग का उपयोग करते हैं।

तीसरा नियम: हमेशा वास्तविक स्ट्रिंग्स पर कर्निंग का परीक्षण करें, Lorem Ipsum पर नहीं। विभिन्न वर्ण संयोजन अलग-अलग दृश्य प्रभाव उत्पन्न करते हैं। उभरे हुए तत्वों वाले स्वर और व्यंजन वाले जोड़ों पर विशेष ध्यान दें: AV, Te, To, Wa, LT। नकारात्मक कर्निंग के साथ, fi, fl, fj जोड़ों पर ध्यान दें — कुछ फ़ॉन्ट में वे लिगेचर के बिना विलय हो सकते हैं।

एक्सेसिबिलिटी पहलू: डिस्लेक्सिया वाले उपयोगकर्ता हल्के सकारात्मक कर्निंग (0.3–0.5 pt) वाले टेक्स्ट को बेहतर पढ़ते हैं। iOS और Android एक्सेसिबिलिटी सेटिंग्स का समर्थन करते हैं जो ऐप कर्निंग को ओवरराइड कर सकती हैं। Dynamic Type के साथ UIFontDescriptor का उपयोग करें और UIAccessibility के माध्यम से एक्सेसिबिलिटी सेटिंग्स में कर्निंग को ध्यान में रखें। महत्वपूर्ण: सिस्टम कर्निंग सेटिंग्स को ब्लॉक न करें — यह टेक्स्ट अनुकूलन पर WCAG 2.2 दिशानिर्देश 1.4.12 का उल्लंघन करता है।