Кернинг: шта је то и како се подешава размак између слова

Шта је кернинг у типографији

Кернинг — је процес ручног или аутоматског прилагођавања растојања између одређених парова знакова ради уклањања оптичких артефаката. Проблем настаје зато што свако слово има јединствену геометрију: A има врх, V — десни нагиб, T — широку пречку. Када таква слова стоје једно поред другог, растојање између њихових контура изгледа неравномерно, иако је међузнаковни размак (set width) исти.

Кернинг табеле фонта садрже парове знакова са унапред подешеним вредностима прилагођавања. У добром фонту може бити од 300 до 2000 кернинг парова. Професионални фонтови — попут SF Pro од Apple-а или Roboto од Google-а — укључују пажљиво развијене кернинг табеле које покривају све могуће комбинације слова латинице и ћирилице. Према 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 је корисно за моноширични текст или случајеве када кернинг смета — на пример, у дугмадима фиксне ширине.

SwiftUI пружа модификатор .kerning() за Text. За разлику од UIKit-а, у SwiftUI-ју се кернинг поставља на нивоу приказа, а не атрибуисаног низа. Модификатор прима 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" />

// Програмски у Kotlin-у
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 о адаптацији текста.