Kerning: vad är det och hur man ställer in mellanrum mellan bokstäver

Vad är kerning inom typografi

Kerning — är processen för manuell eller automatisk justering av avståndet mellan specifika teckenpar för att eliminera optiska artefakter. Problemet uppstår eftersom varje bokstav har en unik geometri: A har en spets, V — en höger lutning, T — en bred tvärslå. När sådana bokstäver står bredvid varandra verkar avståndet mellan deras konturer ojämnt, även om teckenavståndet (set width) är detsamma.

Teckensnittets kerningtabeller innehåller teckenpar med förinställda justeringsvärden. I ett bra teckensnitt kan det finnas 300 till 2000 kerningpar. Professionella teckensnitt — som SF Pro från Apple eller Roboto från Google — innehåller noggrant utarbetade kerningtabeller som täcker alla möjliga kombinationer av latinska och kyrilliska bokstäver. Enligt Fontshop Guide to Kerning är kvaliteten på kerningtabellerna ett av de främsta tecknen på ett professionellt teckensnitt.

Visuell effekt av kerning är särskilt märkbar i rubriker, logotyper och text i stora storlekar (från 24 pt). I liten text (12-14 pt) är avstånden mellan bokstäver små och kerning är mindre märkbar, även om den fortsätter att fungera. Webbläsare och mobila operativsystem använder inbyggd kerning som standard, men utvecklaren kan inaktivera den eller justera den för en specifik design.

Kerning och tracking: viktigaste skillnaderna

Nybörjarutvecklare blandar ofta ihop kerning och tracking, men dessa är fundamentalt olika typografiska parametrar. Kerning arbetar på teckenparsnivå och justerar avståndet endast mellan specifika kombinationer där bokstävernas geometri skapar en optisk obalans. Tracking (letter-spacing) ändrar avståndet mellan alla tecken i det valda fragmentet lika — ökar eller minskar det jämnt.

När används tracking: för att förbättra läsbarheten av liten text (positiv tracking), för att skapa accentrubriker (negativ tracking), för att styla text i gränssnittsdesign. Tracking anges med ett numeriskt värde och tillämpas på varje tecken, inklusive redan kernade par — kerningkorrigeringar bevaras, men en allmän förskjutning läggs till ovanpå dem.

Viktig regel: vid negativ tracking (komprimering) övervaka kerningparen — de kan skapa oönskade överlappningar av bokstäver. I CSS tillämpas egenskapen letter-spacing ovanpå teckensnittets kerningtabell, och vid stark komprimering (letter-spacing: -1px) kan kerningkorrigeringar leda till sammansmältning av tecken.

Implementering av kerning på iOS via NSAttributedString

På iOS hanteras kerning via attributet .kern i NSAttributedString. Attributets värde är Float, där ett positivt tal ökar avståndet, negativt minskar och 0 inaktiverar kerning. Standardvärdet är nil, vilket innebär användning av teckensnittets kerningtabell. Det huvudsakliga API:t för att arbeta med kerning är NSMutableAttributedString med tillägg av attributet till ett textintervall.

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

// Aktivera kerning (använder teckensnittstabell)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Applicera på UILabel
label.attributedText = attributedText

Standardvärde .kern = nil aktiverar kerning från teckensnittstabellen. Om du behöver inaktivera kerning helt — ställ in .kern = 0. Värdena 0.0 och nil är olika tillstånd: nil använder tabellen, 0 tvingar nollställning av alla kerningpar. Enligt Apple Text Programming Guide är explicit angivelse av 0 användbart för monospace-text eller fall där kerning stör — till exempel i knappar med fast bredd.

SwiftUI tillhandahåller modifieraren .kerning() för Text. Till skillnad från UIKit ställs kerning i SwiftUI in på visningsnivå, inte på en attribuerad sträng. Modifieraren accepterar CGFloat och tillämpas på all text i Text-blocket. För partiell kerning i SwiftUI används en kombination av +-operatorn för Text och separata modifierare.

struct KerningView: View {
    var body: some View {
        Text("Rubrik med kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Prestanda: NSAttributedString med kerningattribut beräknar om teckenpositioner vid rendering. För statisk text sker detta en gång. För dynamisk text (föränderlig text i UICollectionView) — varje gång vid ändring. Användning av ett stort intervall med kerning i långa strängar (mer än 500 tecken) kan minska FPS vid scrollning.

Inställning av kerning på Android via letterSpacing

På Android hanteras kerning via egenskapen letterSpacing i TextView och XML-layout. Attributet är av typen Float och fungerar som en multiplikator av teckenstorleken i em. Värdet 0 motsvarar standardkerning, positivt — ökar avståndet, negativt — minskar. letterSpacing är tillgängligt från API Level 21 (Android 5.0 Lollipop).

Implementering via SpannableString gör det möjligt att tillämpa kerning på en del av strängen, inte på hela texten. Klassen ScaleXSpan eller en anpassad ReplacementSpan används för precis kontroll. Enligt Android Developer Guide skalar ScaleXSpan tecken på bredden, simulerar ändring av teckenavståndet, men ger inte direkt kontroll över kerningpar.

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

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

Begränsning: Android stöder inte kerningtabeller direkt — letterSpacing fungerar som tracking för alla tecken. För parkerning på Android används teckensnitt med inbyggda kerningtabeller (OpenType GPOS feature kern). Stödet beror på operativsystemsversionen och renderingsmotorn: på Android 10+ används Minikin med fullt stöd för OpenType-funktioner, på äldre versioner — HarfBuzz med begränsningar. Rekommendation: kontrollera visningen av kerning på enheter med Android lägre än 8.0.

Kerning inom webbutveckling via CSS

På webben hanteras kerning via CSS-egenskapen font-kerning, som aktiverar eller inaktiverar teckensnittets inbyggda kerningtabeller. Värden: auto (webbläsaren bestämmer), normal (kerning aktiverad), none (kerning inaktiverad). Egenskapen stöds av alla moderna webbläsare sedan 2016. Enligt MDN Web Docs är font-kerning endast tillämplig på OpenType-teckensnitt med kerningtabell.

CSS-egenskapen letter-spacing — är motsvarigheten till tracking, men används också för kerneliknande effekter. Till skillnad från font-kerning ändrar letter-spacing avståndet mellan alla tecken jämnt, utan hänsyn till kerningpar. Vid användning av båda egenskaperna tillämpas font-kerning först, sedan lägger letter-spacing till en jämn förskjutning ovanpå.

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

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

TypeScript-verktyg för att beräkna optimal letter-spacing med hänsyn till kerning kan analysera teckensnittets kerningtabell via Canvas API. Men i praktiken förlitar sig webbutvecklare på font-kerning: normal — i de flesta fall ger det optimalt resultat. Ytterligare justering av letter-spacing krävs endast för designaccenter — till exempel på landningssidor med stor typografi.

Praktiska rekommendationer för inställning av kerning

Kerning är ett finjusteringsverktyg och felaktig användning försämrar läsbarheten. Första regeln: ändra inte kerning för brödtext (body text). Professionella teckensnitts kerningtabeller innehåller redan optimala värden för storlekarna 12-16pt. Ingrepp i brödtextens kerning leder till ojämnhet och visuellt brus.

Andra regeln: för rubriker från 24pt använd positiv kerning (0.5-1.5 pt beroende på teckensnitt). Stor text kräver mer utrymme mellan bokstäver för läsbarhet. Teckensnitt med låg x-height (t.ex. Didot) kräver mer kerning än teckensnitt med hög x-height (t.ex. Helvetica). Testdata: i iOS-appen Apple Music använder rubriker kerning på 0.8 pt.

Tredje regeln: kontrollera alltid kerning på verkliga strängar, inte på test Lorem Ipsum. Olika teckenkombinationer ger olika visuella effekter. Ägna särskild uppmärksamhet åt par med vokaler och konsonanter med utskjutande element: AV, Te, To, Wa, LT. Vid negativ kerning övervaka paren fi, fl, fj — i vissa teckensnitt kan de smälta samman utan ligatur.

Tillgänglighetsaspekt: användare med dyslexi läser text med liten positiv kerning (0.3-0.5 pt) bättre. iOS och Android stöder tillgänglighetsinställningar som kan åsidosätta appens kerning. Använd UIFontDescriptor med Dynamic Type och ta hänsyn till kerning i tillgänglighetsinställningar via UIAccessibility. Viktigt: blockera inte systeminställningarna för kerning — detta bryter mot WCAG 2.2 Guideline 1.4.12 om textanpassning.