Kerning: mi ez és hogyan állítható be a betűk közötti távolság

Mi a kerning a tipográfiában

Kerning — a meghatározott karakterpárok közötti távolság kézi vagy automatikus korrigálásának folyamata az optikai műtermékek kiküszöbölése érdekében. A probléma azért merül fel, mert minden betű egyedi geometriával rendelkezik: az A-nak csúcsa, a V-nek jobb dőlése, a T-nek széles keresztrúdja van. Amikor az ilyen betűk egymás mellett állnak, a kontúrjaik közötti távolság egyenetlennek tűnik, bár a karakterközi távolság (set width) azonos.

A betűtípus kerning táblái előre beállított korrekciós értékekkel rendelkező karakterpárokat tartalmaznak. Egy jó betűtípusban 300 és 2000 közötti kerningpár lehet. Professzionális betűtípusok — például az Apple SF Pro vagy a Google Roboto — gondosan kidolgozott kerning táblákat tartalmaznak, amelyek a latin és cirill betűk összes lehetséges kombinációját lefedik. A Fontshop Guide to Kerning szerint a kerning táblák minősége a professzionális betűtípus egyik fő jele.

Vizuális hatás a kerning különösen észrevehető a címekben, logókban és nagy méretű szövegekben (24 pt-tól). Kis szövegnél (12-14 pt) a betűk közötti távolságok kicsik, és a kerning kevésbé észrevehető, bár továbbra is működik. A webböngészők és mobil operációs rendszerek alapértelmezetten beépített kerninget alkalmaznak, de a fejlesztő kikapcsolhatja vagy egy adott dizájnhoz igazíthatja.

Kerning és tracking: fő különbségek

A kezdő fejlesztők gyakran összekeverik a kerninget és a trackinget, de ezek tipográfiailag alapvetően különböző paraméterek. A kerning karakterpárok szintjén működik, és csak azoknál a kombinációknál korrigálja a távolságot, ahol a betűk geometriája optikai egyensúlyhiányt okoz. A tracking (letter-spacing) a kijelölt szövegrész összes karaktere közötti távolságot egyenlően változtatja — növeli vagy csökkenti azt egyenletesen.

Mikor alkalmazzák a trackinget: a kis szöveg olvashatóságának javítására (pozitív tracking), hangsúlyos címek létrehozására (negatív tracking), a szöveg stílusának kialakítására a felülettervezésben. A tracking numerikus értékkel van megadva, és minden karakterre alkalmazzák, beleértve a már kerningelt párokat is — a kerning korrekciók megmaradnak, de rájuk egy általános eltolás kerül.

Fontos szabály: negatív tracking (összenyomás) esetén figyelje a kerning párokat — nemkívánatos betűátfedéseket okozhatnak. A CSS-ben a letter-spacing tulajdonság a betűtípus kerning táblája fölé kerül alkalmazásra, és erős összenyomásnál (letter-spacing: -1px) a kerning korrekciók a karakterek összeolvadásához vezethetnek.

Kerning megvalósítása iOS-en NSAttributedString segítségével

iOS-en a kerning a .kern attribútumon keresztül kezelhető az NSAttributedString-ben. Az attribútum értéke Float, ahol a pozitív szám növeli a távolságot, a negatív csökkenti, a 0 pedig kikapcsolja a kerninget. Az alapértelmezett érték nil, ami a betűtípus kerning táblájának használatát jelenti. A kerninggel való munkához szükséges fő API az NSMutableAttributedString az attribútum szövegtartományhoz való hozzáadásával.

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

// Kerning engedélyezése (betűtípus táblát használ)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Alkalmazás UILabel-re
label.attributedText = attributedText

Alapértelmezett érték .kern = nil bekapcsolja a kerninget a betűtípus táblájából. Ha teljesen ki kell kapcsolni a kerninget — állítsa be a .kern = 0 értéket. A 0.0 és nil értékek különböző állapotok: a nil a táblát használja, a 0 kényszeríti az összes kerningpár nullázását. Az Apple Text Programming Guide szerint a 0 explicit megadása hasznos a monospace szöveghez vagy olyan esetekben, amikor a kerning zavar — például rögzített szélességű gomboknál.

SwiftUI a .kerning() módosítót biztosítja a Text számára. Az UIKit-től eltérően a SwiftUI-ben a kerning a nézet szintjén van beállítva, nem egy attribútumos sztringen. A módosító CGFloat értéket fogad el, és a Text blokkon belüli teljes szövegre alkalmazza. Részleges kerninghez a SwiftUI-ben a + operátor kombinációját használják a Text-hez és külön módosítókat.

struct KerningView: View {
    var body: some View {
        Text("Cím kerninggel")
            .kerning(1.0)
            .font(.title)
    }
}

Teljesítmény: a kerning attribútumot tartalmazó NSAttributedString a megjelenítéskor újraszámolja a karakterpozíciókat. Statikus szöveg esetén ez egyszer történik meg. Dinamikus szöveg esetén (változó szöveg az UICollectionView-ben) — minden alkalommal a változáskor. Nagy tartomány használata kerninggel hosszú sztringekben (több mint 500 karakter) csökkentheti az FPS-t görgetéskor.

Kerning beállítása Androidon letterSpacing segítségével

Androidon a kerning a letterSpacing tulajdonságon keresztül kezelhető a TextView-ban és XML elrendezésben. Az attribútum Float típusú, és a betűméret em-ben kifejezett szorzójaként működik. A 0 érték az alapértelmezett kerningnek felel meg, a pozitív növeli a távolságot, a negatív csökkenti. A letterSpacing az API Level 21-től (Android 5.0 Lollipop) érhető el.

Megvalósítás SpannableString segítségével lehetővé teszi a kerning alkalmazását a sztring egy részére, nem a teljes szövegre. A ScaleXSpan osztály vagy egyedi ReplacementSpan használatos a pontos vezérléshez. Az Android Developer Guide szerint a ScaleXSpan a karaktereket szélességben skálázza, szimulálva a karakterközi távolság változását, de nem ad közvetlen vezérlést a kerning párok felett.

// XML elrendezésben
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programozottan Kotlinban
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Korlátozás: az Android nem támogatja közvetlenül a kerning táblákat — a letterSpacing trackingként működik minden karakterre. Páronkénti kerninghez Androidon beépített kerning táblákkal rendelkező betűtípusokat (OpenType GPOS feature kern) használnak. A támogatás az operációs rendszer verziójától és a renderelő motortól függ: Android 10+ esetén a Minikin használatos az OpenType funkciók teljes támogatásával, régebbi verziók esetén — a HarfBuzz korlátozásokkal. Ajánlás: ellenőrizze a kerning megjelenítését Android 8.0 alatti eszközökön.

Kerning a webfejlesztésben CSS segítségével

Az interneten a kerning a CSS font-kerning tulajdonságon keresztül kezelhető, amely be- vagy kikapcsolja a betűtípus beépített kerning tábláit. Értékek: auto (a böngésző dönt), normal (kerning bekapcsolva), none (kerning kikapcsolva). A tulajdonságot minden modern böngésző támogatja 2016 óta. Az MDN Web Docs szerint a font-kerning csak az OpenType betűtípusokra alkalmazható, amelyek rendelkeznek kerning táblával.

CSS letter-spacing tulajdonság — a tracking megfelelője, de kerning-szerű hatásokhoz is használják. A font-kerningtől eltérően a letter-spacing az összes karakter közötti távolságot egyenletesen változtatja, a kerning párok figyelembevétele nélkül. Mindkét tulajdonság használatakor a font-kerning alkalmazódik először, majd a letter-spacing egyenletes eltolást ad hozzá.

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

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

TypeScript segédprogram az optimális letter-spacing kiszámításához a kerning figyelembevételével elemezheti a betűtípus kerning tábláját a Canvas API-n keresztül. De a gyakorlatban a webes fejlesztők a font-kerning: normal-ra hagyatkoznak — a legtöbb esetben optimális eredményt ad. További letter-spacing beállítás csak dizájn akcentusokhoz szükséges — például nagy tipográfiájú landing oldalakon.

Gyakorlati ajánlások a kerning beállításához

A kerning finomhangoló eszköz, és helytelen alkalmazása rontja az olvashatóságot. Első szabály: ne változtassa meg a kerninget a fő szöveghez (body text). A professzionális betűtípusok kerning táblái már tartalmazzák az optimális értékeket a 12-16pt méretekhez. A fő szöveg kerningjébe való beavatkozás egyenetlenséghez és vizuális zajhoz vezet.

Második szabály: a 24pt-tól kezdődő címekhez használjon pozitív kerninget (0.5-1.5 pt a betűtípustól függően). A nagy szöveg több betűközt igényel az olvashatósághoz. Az alacsony x-heightű betűtípusok (pl. Didot) több kerninget igényelnek, mint a magas x-heightűek (pl. Helvetica). Tesztadatok: az iOS Apple Music alkalmazásban a címek 0.8 pt kerninget használnak.

Harmadik szabály: mindig ellenőrizze a kerninget valós sztringeken, ne teszt Lorem Ipsum-on. A különböző karakterkombinációk eltérő vizuális hatást adnak. Különös figyelmet fordítson a magánhangzókból és kiugró elemekkel rendelkező mássalhangzókból álló párokra: AV, Te, To, Wa, LT. Negatív kerning esetén figyelje az fi, fl, fj párokat — egyes betűtípusokban ligatúra nélkül összeolvadhatnak.

Akadálymentesítési szempont: a diszlexiás felhasználók jobban olvassák a kis pozitív kerninggel (0.3-0.5 pt) rendelkező szöveget. Az iOS és Android támogatja az akadálymentesítési beállításokat, amelyek felülírhatják az alkalmazás kerningjét. Használja az UIFontDescriptort Dynamic Type-val, és vegye figyelembe a kerninget az akadálymentesítési beállításokban az UIAccessibility-n keresztül. Fontos: ne blokkolja a rendszer kerning beállításait — ez sérti a WCAG 2.2 Guideline 1.4.12 szövegadaptációs irányelvet.