Essential Kerning Tips for Mobile App Design

Kerning on mobile screens isn’t a vanity tweak—it’s the difference between a user trusting your app and abandoning it after three seconds. When letterforms collide or drift apart, the brain registers “broken” before the conscious mind can name the flaw.

Because mobile type is viewed at arm’s length through glare, motion, and one-hand grips, every micron of space is amplified. A pair that looks crisp on a 27-inch monitor can resemble a spilled bag of pixels on a 5-inch OLED.

Understand the Physics of Mobile Reading

Mobile readers scan in 0.7-second bursts while walking or riding transit. During those slivers, the fovea covers only 4–5 letters, so tight pairs that blur together stall word recognition.

Cap-height strokes at 14px can render as single-pixel thick on xxhdpi screens. If a capital T and a lowercase y touch, the vertical stem and diagonal tail form a dark wedge that the eye misreads as an “x”.

Test this yourself: set a dark #111 headline in SF Pro at 34px on a Pixel 7, then screenshot and zoom. You’ll notice the “Tr” pair bleeds unless you pull the glyphs apart by 4em units.

Start with Metrics, Then Break Them

System fonts ship with generous defaults to survive worst-case screens. Before custom kerning, export the font’s built-in table and inspect it in Glyphs or FontLab.

Look for pairs like “Te”, “Av”, “Wo” that carry +20 to +40 units. These values assume print; on mobile, reduce them by 15% to offset pixel rounding that visually expands space.

Create a spreadsheet: list the 50 most frequent English bigrams, their default kern values, and your proposed mobile offsets. Revisions become data-driven, not guesswork.

Design for the Extremes, Not the Average

Anchor your kerns on the smallest device you support, not the flagship. A 320×568 canvas at 2× still dominates global traffic and exaggerates every overlap.

On the low end, a 1px kern bump equals 0.5pt—enough to separate a “lt” ligature that would otherwise read as “it”. On a 6.7-inch 3× display, the same 1px is nearly invisible, but the separation still feels airy rather than sloppy.

Build two kerning masters: “compact” for ≤2× densities and “relaxed” for ≥3×. Swap them with a media query that checks device-pixel-ratio, not screen width.

Use Contextual Kerning to Save Time

Hand-kern 2,000 pairs per screen size and you’ll ship in 2030. Instead, enable contextual kerning in your variable font so groups like “To”, “Tr”, “Ta” share one adjusted spacing class.

In FEA code, write a lookup that subtracts 10 units whenever “T” precedes a round glyph (o, c, e). One rule covers 24 pairs instantly.

Contextual classes also prevent over-kerned rarities. A “Tz” pair that never appears in your locale keeps its metric spacing, avoiding the rabbit hole of edge-case tweaking.

Preview on Real Glass, Not Mirrors

Chrome DevTools’ device preview still renders through desktop sub-pixel anti-aliasing, which hides collision artifacts. Side-load your beta build onto an actual iPhone SE and a $90 Android Go phone.

Hold each phone at 45° under fluorescent light—glare thins strokes and tightens counters, revealing unwanted contact. Snap photos, then overlay them in Figma to measure exact pixel encroachment.

Repeat outdoors at noon. Sunlight boosts contrast, so a –2 unit kern that looked fine indoors may suddenly feel claustrophobic.

Let System Settings Override You

Users who toggle Bold Text or Larger Accessibility Sizes are begging for clarity. Respect their choice by increasing kerning 5% for every 10% rise in font scale.

In iOS, register for UIContentSizeCategoryDidChangeNotification and reload your style sheet with a multiplier. On Android, use TypedValue.applyDimension with a user’s SP preference.

Ignore this and your painstaking “Ta” pair becomes a blackletter blob at AX5 size, defeating the accessibility you claim to support.

Balance Kerning with Tracking

Kerning adjusts two glyphs; tracking loosens entire words. On mobile, a +5 tracking offset can erase the need for half your kern pairs, especially in condensed navigation bars.

Test a 16px all-caps tab label in Inter: set tracking to +20, then kern only the worst offenders like “WA” or “LT”. You’ll finish in minutes, not hours.

Too much tracking dilutes hierarchy, so cap it at 2% of font size for body copy and 4% for micro-UI such as chip labels.

Automate with Visual Regression

Manual screenshots across 18 devices every sprint is unsustainable. Integrate a visual-diff pipeline that screenshots each screen on real devices in AWS Device Farm.

Train an OpenCV script to flag pixels where glyph boxes overlap by >1px. Tie the output to your pull-request bot; kerns that introduce collisions never reach main.

Store baseline images at 1×, 2×, and 3× densities so the bot compares like with like, avoiding false positives from scaling artifacts.

Respect Language Expansion

Your Spanish build adds 30% more text; German compounds can double word length. These longer strings push kerned pairs into new collisions as line breaks shift.

Export a pseudo-localized build that inflates every string with “[!!!]” padding. Scan for new overlap hotspots—often “ü” followed by “f” or “ß” preceding “t”.

Keep language-specific kern overrides in plist or XML files. Swedish “ö” needs looser side-bearings than Turkish “ö” because of diacritic height differences.

Cache Kerning Data Aggressively

Variable fonts with 500 kern pairs bloat binary size by 12KB, negligible unless you’re fighting a 4MB OTA limit. Strip unused pairs at build time with pyftsubset.

Cache the remaining table in RAM after first render. On a low-end device, reloading a 40-screen stack without re-parsing the kern table saves 60ms of frame budget.

Measure with Android’s Macrobenchmark: cold-start latency drops 18ms when the kern buffer is pre-warmed before Activity.onCreate.

Document the Intent, Not Just the Numbers

Future designers will copy-paste your Figma file without the night you spent nudging “Ty” left by 3 units. Write a one-page spec that lists rationale: “Kerns tightened 15% on 2× screens to counteract pixel rounding; loosened 5% for accessibility sizes.”

Include a link to your spreadsheet and the contextual FEA snippet. When the brand font updates from version 2.1 to 2.3, the next maintainer can diff the new metrics against your baseline instead of starting from zero.

Store the doc beside the font license in the repo, not in Confluence oblivion. Git history will track when kerning last changed and why.

Measure Impact, Not Vanity

After shipping a kern pass, run a cohort test: 50% of users see the old build, 50% see the refined build. Track task-completion rate on the checkout flow, not “does it look nicer”.

In a grocery app, fixing “$0.99” collision lifted conversion 1.3% among 720×1280 devices. The gain came from faster price scanning, not aesthetic applause.

Log read-time telemetry: average time on confirmation screen dropped 200ms when button labels were re-kerned. Faster comprehension equals happier thumbs.