کرنینگ: چیست و چگونه فاصله بین حروف تنظیم می‌شود

کرنینگ در تایپوگرافی چیست

کرنینگ — فرآیند تنظیم دستی یا خودکار فاصله بین جفت‌های خاصی از کاراکترها برای حذف مصنوعات بصری است. مشکل به این دلیل ایجاد می‌شود که هر حرف هندسه منحصربه‌فردی دارد: A رأس دارد، V — شیب راست، T — میله عرضی پهن. وقتی چنین حروفی در کنار هم قرار می‌گیرند، فاصله بین خطوط آنها ناهمسان به نظر می‌رسد، اگرچه فاصله بین کاراکتری (set width) یکسان است.

جدول‌های کرنینگ فونت شامل جفت‌های کاراکتری با مقادیر تنظیم از پیش تعیین‌شده هستند. در یک فونت خوب ممکن است از 300 تا 2000 جفت کرنینگ وجود داشته باشد. فونت‌های حرفه‌ای — مانند SF Pro از اپل یا Roboto از گوگل — شامل جدول‌های کرنینگ دقیقاً طراحی‌شده‌ای هستند که همه ترکیبات ممکن حروف لاتین و سیریلیک را پوشش می‌دهند. بر اساس Fontshop Guide to Kerning، کیفیت جدول‌های کرنینگ یکی از نشانه‌های اصلی یک فونت حرفه‌ای است.

اثر بصری کرنینگ به‌ویژه در عنوان‌ها، لوگوها و متن با اندازه بزرگ (از 24 pt) قابل توجه است. در متن کوچک (12-14 pt) فواصل بین حروف کم است و کرنینگ کمتر محسوس است، اگرچه همچنان کار می‌کند. مرورگرهای وب و سیستم‌عامل‌های موبایل به‌طور پیش‌فرض از کرنینگ داخلی استفاده می‌کنند، اما توسعه‌دهنده می‌تواند آن را غیرفعال یا برای طراحی خاص تنظیم کند.

کرنینگ و ترَکینگ: تفاوت‌های کلیدی

توسعه‌دهندگان مبتدی اغلب کرنینگ و ترَکینگ را اشتباه می‌گیرند، اما اینها پارامترهای اساساً متفاوت تایپوگرافی هستند. کرنینگ در سطح جفت‌های کاراکتری کار می‌کند و فاصله را فقط بین ترکیبات خاصی که هندسه حروف عدم تعادل نوری ایجاد می‌کند، تنظیم می‌کند. ترَکینگ (letter-spacing) فاصله بین همه کاراکترهای بخش انتخاب‌شده را به‌طور یکسان تغییر می‌دهد — آن را به‌طور یکنواخت افزایش یا کاهش می‌دهد.

چه زمانی ترَکینگ استفاده می‌شود: برای بهبود خوانایی متن کوچک (ترَکینگ مثبت)، برای ایجاد عنوان‌های تأکیدی (ترَکینگ منفی)، برای استایل‌دهی متن در طراحی رابط‌ها. ترَکینگ با یک مقدار عددی تعیین می‌شود و به هر کاراکتر اعمال می‌شود، از جمله جفت‌های کرنینگ‌شده — تصحیحات کرنینگ حفظ می‌شوند، اما یک جابجایی کلی روی آنها اضافه می‌شود.

قاعده مهم: در ترَکینگ منفی (فشرده‌سازی) مراقب جفت‌های کرنینگ باشید — آنها می‌توانند همپوشانی نامطلوب حروف ایجاد کنند. در CSS ویژگی letter-spacing روی جدول کرنینگ فونت اعمال می‌شود و در فشرده‌سازی شدید (letter-spacing: -1px) تصحیحات کرنینگ ممکن است منجر به ادغام کاراکترها شود.

پیاده‌سازی کرنینگ در iOS از طریق NSAttributedString

در iOS کرنینگ از طریق ویژگی .kern در NSAttributedString مدیریت می‌شود. مقدار ویژگی 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 برای متن monospace یا مواردی که کرنینگ مزاحمت ایجاد می‌کند مفید است — مثلاً در دکمه‌هایی با عرض ثابت.

SwiftUI اصلاح‌کننده .kerning() را برای Text فراهم می‌کند. برخلاف UIKit، در SwiftUI کرنینگ در سطح نمای (view) تنظیم می‌شود، نه رشته ویژگی‌دار. اصلاح‌کننده CGFloat می‌گیرد و به کل متن داخل بلوک Text اعمال می‌شود. برای کرنینگ جزئی در SwiftUI از ترکیب عملگر + برای Text و اصلاح‌کننده‌های جداگانه استفاده می‌شود.

struct KerningView: View {
    var body: some View {
        Text("عنوان با کرنینگ")
            .kerning(1.0)
            .font(.title)
    }
}

عملکرد: NSAttributedString با ویژگی کرنینگ موقعیت کاراکترها را هنگام رندر مجدداً محاسبه می‌کند. برای متن ایستا این یک بار اتفاق می‌افتد. برای متن پویا (تغییر متن در UICollectionView) — هر بار هنگام تغییر. استفاده از محدوده بزرگ با کرنینگ در رشته‌های طولانی (بیش از 500 کاراکتر) می‌تواند FPS را هنگام اسکرول کاهش دهد.

تنظیم کرنینگ در Android از طریق letterSpacing

در Android کرنینگ از طریق ویژگی letterSpacing در TextView و طرح XML مدیریت می‌شود. ویژگی از نوع 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" />

// برنامه‌نویسی در کاتلین
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

محدودیت: Android از جدول‌های کرنینگ به‌طور مستقیم پشتیبانی نمی‌کند — letterSpacing مانند ترَکینگ برای همه کاراکترها کار می‌کند. برای کرنینگ جفتی در Android از فونت‌هایی با جدول‌های کرنینگ داخلی (OpenType GPOS feature kern) استفاده می‌شود. پشتیبانی به نسخه سیستم‌عامل و موتور رندر بستگی دارد: در 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 فقط برای تأکیدهای طراحی مورد نیاز است — مثلاً در صفحات فرود با تایپوگرافی بزرگ.

توصیه‌های عملی برای تنظیم کرنینگ

کرنینگ ابزاری برای تنظیم دقیق است و استفاده نادرست از آن خوانایی را کاهش می‌دهد. قاعده اول: کرنینگ را برای متن اصلی (body text) تغییر ندهید. جدول‌های کرنینگ فونت‌های حرفه‌ای در حال حاضر مقادیر بهینه برای اندازه‌های 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 از تنظیمات دسترس‌پذیری پشتیبانی می‌کنند که ممکن است کرنینگ برنامه را بازنویسی کند. از UIFontDescriptor با Dynamic Type استفاده کنید و کرنینگ را در تنظیمات دسترس‌پذیری از طریق UIAccessibility در نظر بگیرید. مهم: تنظیمات سیستمی کرنینگ را مسدود نکنید — این کار WCAG 2.2 Guideline 1.4.12 در مورد تطبیق متن را نقض می‌کند.