Kerning: ano ito at paano i-configure ang espasyo sa pagitan ng mga titik

Ano ang kerning sa tipograpiya

Kerning — ay ang proseso ng manu-mano o awtomatikong pagsasaayos ng distansya sa pagitan ng mga partikular na pares ng karakter upang alisin ang mga optical artifact. Ang problema ay lumitaw dahil ang bawat titik ay may natatanging heometrya: ang A ay may tuktok, ang V — kanang hilig, ang T — malawak na pahalang na bar. Kapag ang mga naturang titik ay magkatabi, ang distansya sa pagitan ng kanilang mga contour ay mukhang hindi pantay, kahit na ang pagitan ng karakter (set width) ay pareho.

Ang mga talahanayan ng kerning ng font ay naglalaman ng mga pares ng karakter na may paunang itinakdang halaga ng pagsasaayos. Sa isang mahusay na font ay maaaring mayroong 300 hanggang 2000 na pares ng kerning. Mga propesyonal na font — tulad ng SF Pro mula sa Apple o Roboto mula sa Google — ay may kasamang maingat na binuong mga talahanayan ng kerning na sumasaklaw sa lahat ng posibleng kombinasyon ng mga titik ng Latin at Cyrillic. Ayon sa Fontshop Guide to Kerning, ang kalidad ng mga talahanayan ng kerning ay isa sa mga pangunahing palatandaan ng isang propesyonal na font.

Biswal na epekto ng kerning ay lalong nakikita sa mga heading, logo at teksto ng malalaking sukat (mula sa 24 pt). Sa maliit na teksto (12-14 pt) ang mga distansya sa pagitan ng mga titik ay maliit at ang kerning ay hindi gaanong nakikita, bagaman patuloy itong gumagana. Ang mga web browser at mobile OS ay naglalapat ng built-in na kerning bilang default, ngunit maaaring i-disable o ayusin ito ng developer para sa isang partikular na disenyo.

Kerning at tracking: mga pangunahing pagkakaiba

Ang mga baguhang developer ay madalas na napagkakamalan ang kerning at tracking, ngunit ang mga ito ay pangunahing magkaibang mga parameter ng tipograpiya. Ang kerning ay gumagana sa antas ng mga pares ng karakter at inaayos ang distansya lamang sa pagitan ng mga partikular na kombinasyon kung saan ang heometrya ng mga titik ay lumilikha ng optical imbalance. Ang tracking (letter-spacing) ay nagbabago ng pagitan sa pagitan ng lahat ng karakter ng napiling fragment nang pantay — pinapataas o pinapababa ito nang pare-pareho.

Kailan inilalapat ang tracking: para sa pagpapabuti ng pagiging madaling mabasa ng maliit na teksto (positibong tracking), para sa paglikha ng mga accent heading (negatibong tracking), para sa pag-istilo ng teksto sa disenyo ng interface. Ang tracking ay itinakda gamit ang isang numerikal na halaga at inilalapat sa bawat karakter, kabilang ang mga na-kerning nang pares — ang mga pagwawasto ng kerning ay pinapanatili, ngunit isang pangkalahatang paglipat ay idinadagdag sa ibabaw ng mga ito.

Mahalagang tuntunin: sa negatibong tracking (pagpipiga) bantayan ang mga pares ng kerning — maaari silang lumikha ng hindi kanais-nais na pag-overlap ng mga titik. Sa CSS, ang property na letter-spacing ay inilalapat sa ibabaw ng talahanayan ng kerning ng font, at sa malakas na pagpipiga (letter-spacing: -1px) ang mga pagwawasto ng kerning ay maaaring humantong sa pagsasanib ng mga karakter.

Pagpapatupad ng kerning sa iOS sa pamamagitan ng NSAttributedString

Sa iOS, ang kerning ay pinamamahalaan sa pamamagitan ng attribute na .kern sa NSAttributedString. Ang halaga ng attribute ay Float, kung saan ang positibong numero ay nagpapataas ng pagitan, negatibo ay nagpapababa, at 0 ay nagdi-disable ng kerning. Ang default na halaga ay nil, na nangangahulugang paggamit ng talahanayan ng kerning ng font. Ang pangunahing API para sa pagtatrabaho sa kerning ay NSMutableAttributedString na may pagdaragdag ng attribute sa isang saklaw ng teksto.

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

// Paganahin ang kerning (gumagamit ng font table)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Ilapat sa UILabel
label.attributedText = attributedText

Default na halaga .kern = nil ay nagpapagana ng kerning mula sa talahanayan ng font. Kung kailangan mong ganap na i-disable ang kerning — itakda ang .kern = 0. Ang mga halaga 0.0 at nil ay magkaibang estado: ang nil ay gumagamit ng talahanayan, ang 0 ay pinipilit na i-zero ang lahat ng pares ng kerning. Ayon sa Apple Text Programming Guide, ang tahasang pagtatakda ng 0 ay kapaki-pakinabang para sa monospace na teksto o mga kaso kung saan ang kerning ay nakakaabala — halimbawa, sa mga button na may nakapirming lapad.

SwiftUI ay nagbibigay ng modifier na .kerning() para sa Text. Hindi tulad ng UIKit, sa SwiftUI ang kerning ay itinakda sa antas ng view, hindi isang attributed string. Ang modifier ay tumatanggap ng CGFloat at inilalapat sa lahat ng teksto sa loob ng Text block. Para sa bahagyang kerning sa SwiftUI, ginagamit ang kombinasyon ng + operator para sa Text at mga hiwalay na modifier.

struct KerningView: View {
    var body: some View {
        Text("Heading na may kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Pagganap: Ang NSAttributedString na may attribute ng kerning ay nagre-recalculate ng mga posisyon ng karakter sa pag-render. Para sa static na teksto ito ay nangyayari nang isang beses. Para sa dinamikong teksto (nagbabagong teksto sa UICollectionView) — sa bawat pagbabago. Ang paggamit ng malaking saklaw na may kerning sa mahabang string (higit sa 500 karakter) ay maaaring magpababa ng FPS sa pag-scroll.

Pag-configure ng kerning sa Android sa pamamagitan ng letterSpacing

Sa Android, ang kerning ay pinamamahalaan sa pamamagitan ng property na letterSpacing sa TextView at XML layout. Ang attribute ay may uri na Float at gumagana bilang multiplier ng laki ng font sa em. Ang halaga 0 ay tumutugma sa default na kerning, positibo — nagpapataas ng pagitan, negatibo — nagpapababa. Ang letterSpacing ay magagamit simula sa API Level 21 (Android 5.0 Lollipop).

Pagpapatupad sa pamamagitan ng SpannableString ay nagpapahintulot sa paglalapat ng kerning sa isang bahagi ng string, hindi sa buong teksto. Ginagamit ang klase na ScaleXSpan o custom na ReplacementSpan para sa tumpak na kontrol. Ayon sa Android Developer Guide, ang ScaleXSpan ay nag-scale ng mga karakter sa lapad, ginagaya ang pagbabago ng pagitan ng karakter, ngunit hindi nagbibigay ng direktang kontrol sa mga pares ng kerning.

// Sa XML layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programmatically sa Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Limitasyon: Hindi direktang sinusuportahan ng Android ang mga talahanayan ng kerning — ang letterSpacing ay gumagana tulad ng tracking para sa lahat ng karakter. Para sa pares na kerning sa Android, ginagamit ang mga font na may built-in na talahanayan ng kerning (OpenType GPOS feature kern). Ang suporta ay depende sa bersyon ng OS at render engine: sa Android 10+ ginagamit ang Minikin na may buong suporta para sa mga feature ng OpenType, sa mas lumang bersyon — HarfBuzz na may mga limitasyon. Rekomendasyon: suriin ang display ng kerning sa mga device na may Android na mas mababa sa 8.0.

Kerning sa pag-develop ng web sa pamamagitan ng CSS

Sa web, ang kerning ay pinamamahalaan sa pamamagitan ng CSS property na font-kerning, na nagpapagana o nagdi-disable ng built-in na mga talahanayan ng kerning ng font. Mga halaga: auto (nagpapasya ang browser), normal (naka-enable ang kerning), none (naka-disable ang kerning). Ang property ay sinusuportahan ng lahat ng modernong browser mula noong 2016. Ayon sa MDN Web Docs, ang font-kerning ay nalalapat lamang sa mga OpenType font na may talahanayan ng kerning.

CSS property na letter-spacing — ay ang analog ng tracking, ngunit ginagamit din para sa mga epektong katulad ng kerning. Hindi tulad ng font-kerning, binabago ng letter-spacing ang pagitan sa pagitan ng lahat ng karakter nang pantay, nang hindi isinasaalang-alang ang mga pares ng kerning. Kapag ginagamit ang parehong property, ang font-kerning ay inilalapat muna, pagkatapos ang letter-spacing ay nagdaragdag ng pare-parehong paglipat sa ibabaw nito.

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

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

TypeScript utility para sa pagkalkula ng optimal na letter-spacing na isinasaalang-alang ang kerning ay maaaring suriin ang talahanayan ng kerning ng font sa pamamagitan ng Canvas API. Ngunit sa pagsasagawa, ang mga web developer ay umaasa sa font-kerning: normal — sa karamihan ng mga kaso ay nagbibigay ito ng optimal na resulta. Ang karagdagang pagsasaayos ng letter-spacing ay kinakailangan lamang para sa mga accent ng disenyo — halimbawa, sa mga landing page na may malaking tipograpiya.

Mga praktikal na rekomendasyon para sa pag-configure ng kerning

Ang kerning ay isang tool para sa fine-tuning at ang maling paggamit nito ay nagpapahina sa pagiging madaling mabasa. Unang tuntunin: huwag baguhin ang kerning para sa pangunahing teksto (body text). Ang mga talahanayan ng kerning ng mga propesyonal na font ay naglalaman na ng optimal na mga halaga para sa mga sukat na 12-16pt. Ang interbensyon sa kerning ng pangunahing teksto ay humahantong sa hindi pagkakapantay-pantay at biswal na ingay.

Pangalawang tuntunin: para sa mga heading mula 24pt gumamit ng positibong kerning (0.5-1.5 pt depende sa font). Ang malaking teksto ay nangangailangan ng mas maraming espasyo sa pagitan ng mga titik para sa pagiging madaling mabasa. Ang mga font na may mababang x-height (hal. Didot) ay nangangailangan ng mas maraming kerning kaysa sa mga font na may mataas na x-height (hal. Helvetica). Data ng pagsubok: sa iOS app na Apple Music, ang mga heading ay gumagamit ng kerning na 0.8 pt.

Pangatlong tuntunin: palaging suriin ang kerning sa mga tunay na string, hindi sa test Lorem Ipsum. Ang iba't ibang kombinasyon ng karakter ay nagbibigay ng iba't ibang biswal na epekto. Bigyang-pansin ang mga pares na may patinig at katinig na may nakausling elemento: AV, Te, To, Wa, LT. Sa negatibong kerning bantayan ang mga pares na fi, fl, fj — sa ilang mga font maaari silang magsanib nang walang ligature.

Aspekto ng aksesibilidad: ang mga gumagamit na may dyslexia ay mas mahusay na nagbabasa ng teksto na may maliit na positibong kerning (0.3-0.5 pt). Ang iOS at Android ay sumusuporta sa mga setting ng aksesibilidad na maaaring mag-override sa kerning ng app. Gamitin ang UIFontDescriptor na may Dynamic Type at isaalang-alang ang kerning sa mga setting ng aksesibilidad sa pamamagitan ng UIAccessibility. Mahalaga: huwag harangan ang mga system setting ng kerning — ito ay lumalabag sa WCAG 2.2 Guideline 1.4.12 tungkol sa adaptasyon ng teksto.