What is Tracking in Typography: Essential Insights

A single slider can make text feel polished or completely unreadable. That’s the power of tracking in typography, the uniform adjustment of space between all characters in a block of text.

Most designers adjust it without fully understanding how it works across different tools, screen sizes, and typefaces. Get it wrong and your carefully chosen font loses its intended rhythm.

This article breaks down what tracking is, how it differs from kerning and leading, when to increase or decrease it, and how to set it correctly in tools like Adobe InDesign, Figma, and CSS. You’ll also learn how tracking behaves differently in print and digital contexts, and where variable fonts change the equation.

What Is Tracking in Typography

Tracking is the uniform adjustment of space between all characters in a word, line, or block of text. It applies the same spacing value across every letter pair equally, which separates it from kerning, a tool that adjusts spacing between two specific characters.

You’ll also hear it called “letter-spacing,” especially in CSS. And in design tools like Adobe InDesign, it shows up in the Character panel measured in thousandths of an em. Figma uses percentages by default (which, honestly, trips people up more than it should).

The term dates back to the phototypesetting era, when adjusting the physical space between characters on a strip of film was a manual, mechanical process. Metal type before that had fixed spacing built into each block. Phototypesetting gave designers their first real control over character spacing at scale.

Today, tracking decisions happen in seconds. But the underlying principle hasn’t changed: you’re controlling how tightly or loosely characters sit relative to each other across an entire text selection.

Positive tracking adds space between all characters, creating an open, airy feel. Negative tracking tightens the gaps, pulling characters closer together. Both affect how text looks and, more critically, how it reads.

The HTTP Archive’s 2024 Web Almanac found that 87% of websites now use web fonts, meaning tracking decisions affect the reading experience on the vast majority of pages online. That’s not a small number. Every font you load carries default spacing values, and knowing when to override them is where tracking becomes a real skill.

Tracking vs. Kerning

This is the most common mix-up in typography. People use the terms interchangeably, but they’re doing completely different things.

How Kerning Works Inside a Font

Most professional typefaces ship with built-in kerning tables. These are baked into the OpenType or TrueType file and tell the rendering engine how much space to put between specific letter pairs like “AV” or “To.”

Adobe InDesign gives you two options: Metric kerning (reads the font’s built-in tables) and Optical kerning (calculates spacing based on character shapes). Took me longer than I’d like to admit to realize that Optical kerning isn’t always better. It depends on how well the type designer did their homework.

Tracking is a blunter tool. You’re adding or removing space everywhere, regardless of which character pairs sit next to each other. Think of it this way: kerning is a scalpel, tracking is a slider.

When Each One Matters

Use kerning for logo work and large display type where individual letter pairs are visible and awkward gaps stand out.

Use tracking for body text blocks, headlines at scale, and situations where you need consistent spacing across entire paragraphs. If you’re setting uppercase text for a subheading, tracking is your move, not kerning.

They work together, too. You might increase tracking on a headline by +25, then manually kern the “Ty” pair because it still looks a bit loose.

Tracking vs. Leading

Leading controls the vertical distance between baselines of text. Tracking controls the horizontal distance between characters. Two different axes, same goal: making text readable.

Where tracking handles the horizontal rhythm of characters, leading handles how your eye moves from one line to the next. The U.S. Web Design System recommends a readable line length of 45 to 90 characters per line, with 66 being the sweet spot for longer texts. But those numbers assume the leading is set properly too.

How They Interact

Increase tracking without adjusting leading and things start to fall apart. Widely spaced characters in a tight vertical space create a claustrophobic block. Your mileage may vary, but in my experience, a tracking bump of +50 on body text usually needs at least a corresponding 1.6 line-height to breathe.

The reverse is tricky too. Generous leading with tight tracking makes text feel like it’s drifting apart horizontally while floating vertically. Neither dimension works in isolation.

A Common Mistake

Designers frequently adjust one without checking the other. I’ve seen a full paragraph that looked fine on a widescreen monitor completely break on mobile because the font spacing was tuned for one viewport and the line-height wasn’t responsive.

The fix is straightforward: whenever you change tracking on body copy, preview the block as a whole. Check both the horizontal flow between characters and the vertical flow between lines. Those two things either work together or against each other. There’s no in-between.

How Tracking Affects Readability

Readability isn’t the same as legibility. Legibility is whether you can tell an “a” from an “o.” Readability is whether you can comfortably read an entire paragraph without strain. Tracking directly affects both.

Research published in the International Journal of Research and Innovation in Social Science found that optimizing inter-letter spacing can make smaller characters up to 20% easier to read compared to default settings (Arditi, 2004). That’s a big improvement from a single adjustment.

Tight tracking at small font sizes creates a crowded mess. Characters start to blur together, especially on low-resolution screens where subpixel rendering is already working hard. On the flip side, too much space between letters in body text breaks word shapes. Your brain has to process individual characters instead of recognizing whole words, which slows everything down.

Tracking for Headlines vs. Body Text

Headlines and display type usually benefit from tighter tracking. At large sizes, the natural letter spacing in most fonts looks exaggerated. You’ll see gaps between characters that feel too generous. Pulling them in (negative tracking values like -10 to -25 in InDesign) gives headlines a more cohesive, confident look.

Body text sits at default or very slightly adjusted tracking. Most well-made typefaces already have spacing optimized for paragraph reading at 14-18px. Messing with that too much is asking for trouble.

An analysis of 1,000 websites by Toner Buzz found that 85% use sans-serif fonts for body text on the web. Sans-serif typography elements tend to have more even character widths, which makes tracking adjustments more predictable than with serif fonts.

Uppercase text and small caps are the exception. They almost always need increased tracking. All-caps text at default spacing looks cramped because uppercase letters have more uniform heights, so there are fewer visual cues to separate them. A bump of +50 to +100 in tracking typically does the job.

Accessibility and Letter Spacing

A landmark 2012 study by Zorzi et al., published in PNAS, showed that extra-large letter spacing substantially improved reading performance in dyslexic children without any training. The improvement came from reducing “crowding,” a perceptual effect where letters become harder to identify when they’re packed close together.

WCAG guidelines recommend that users should be able to override spacing to at least 0.12em for letter-spacing. If your CSS doesn’t allow for that override, you’re locking out readers who need it.

At least in my experience, web design projects rarely get tracking right on the first pass. It takes testing across screen sizes and, ideally, with real readers who have different reading needs.

How to Adjust Tracking in Design Tools

Every major design application handles tracking a little differently. The values don’t translate 1:1 between tools, which catches people off guard when moving from design to development.

In InDesign, a tracking value of 50 means 50/1000 of an em. So at 10pt text, that’s 0.5pt of extra space added between every character. The keyboard shortcut (Alt + Right Arrow on Windows, Option + Right Arrow on Mac) nudges tracking by 20 units at a time. I always reset it first and work from zero to keep things consistent.

Figma’s percentage system means 1% equals 0.01em in CSS terms. A forum thread on Figma’s site has been running since 2021 with designers frustrated about not being able to switch to pixel values natively. The workaround is math: if your font size is 16px, then 1% letter-spacing equals 0.16px.

Tracking with CSS Letter-Spacing

In CSS, the letter-spacing property maps directly to typographic tracking. It accepts any CSS length unit.

em units are the most reliable for responsive design because they scale with font size. A value of letter-spacing: 0.05em adds 5% of the current font size between every character. If the font size increases on a larger breakpoint, the spacing scales up automatically.

Pixel values (px) give you fixed spacing regardless of font size. This works fine for single-size elements but breaks down in responsive layouts. If you set letter-spacing: 2px and the font size doubles on desktop, the spacing suddenly looks too tight.

rem ties to the root font size, which makes it a middle ground. But honestly, em is the better pick for tracking because spacing should relate to the text it’s applied to, not the page root.

The HTTP Archive’s 2025 Web Almanac reported that web fonts now appear on roughly 88% of websites. With variable fonts on 34% of mobile pages as of 2024 (up from 29% in 2023), CSS letter-spacing is working alongside increasingly sophisticated font technology.

One thing to watch: letter-spacing adds space after the last character too. This can throw off centering in buttons and navigation items. The common fix is margin-right: -0.05em (matching your letter-spacing value) on the element, but it’s not perfect.

When to Increase or Decrease Tracking

There’s no universal tracking value that works everywhere. But there are reliable patterns.

Increase Tracking When

• All-caps text: uppercase letters lack ascenders and descenders, so the uniform height makes tight spacing feel compressed. +50 to +200 depending on font weight and size
• Small caps: same logic as all-caps, smaller x-height range means character distinction drops fast
• Light font weights: thin strokes create less visual “fill” between characters, so spacing needs to compensate
• Very small text on screen: captions, footnotes, legal text. Wider spacing reduces crowding at small sizes

Decrease Tracking When

Large display headings at 48px and above almost always look better tightened. The natural spacing in most display fonts was designed for a range of sizes, and at the extreme upper end, things get loose.

Heavy or bold weights at large sizes fill more horizontal space per character. Default tracking creates gaps that feel inconsistent with the visual density of the letterforms. Pulling in by -10 to -30 usually fixes it.

When to Leave It Alone

Sometimes the right move is doing nothing. Well-designed text faces from professional foundries (think Robert Bringhurst’s recommendations in The Elements of Typographic Style) already ship with carefully considered spacing at body sizes.

Roboto, the most popular Google Font with over 28 trillion all-time views according to Google Fonts data, was designed with specific spacing values for UI contexts. Overriding those defaults at body sizes often makes things worse, not better.

A good rule: the further text is from its intended use case, the more tracking adjustment it needs. A body sans-serif font used at 72px for a hero headline? That needs work. The same font at 16px for a paragraph? Leave it.

Tracking in Variable Fonts

Variable fonts change the way tracking decisions work. Instead of loading separate files for each weight and style, a single variable font file contains an entire range of weights, widths, and sometimes optical sizes.

The HTTP Archive’s 2024 Web Almanac found that 33% of desktop pages and 34% of mobile pages now use variable fonts, up from 29% and 30% in 2023.

The Optical Size Axis

Some variable fonts include an optical size (opsz) axis that automatically adjusts spacing, stroke contrast, and proportions based on the rendered size of text. This is the axis that matters most for tracking.

When a font has opsz support, it can tighten spacing at large display sizes and open it up at small caption sizes without you touching the tracking controls at all. The browser handles this automatically through CSS font-optical-sizing: auto.

HTTP Archive data shows only about 2% of variable fonts on the web currently use the optical size axis. The weight axis dominates at over 99%. So the technology exists, but adoption is still early.

When Manual Tracking Still Makes Sense

Missing axes: Most variable fonts only include a weight axis. If opsz isn’t present, you still need to adjust tracking manually at extreme sizes.

Brand-specific requirements: Brand guidelines often specify exact tracking values that don’t match what the font’s built-in axes produce. Apple, for instance, has detailed typographic specs for San Francisco that include tracking tables by point size.

Mixed-weight compositions: When you pair a light variable weight with a bold one in the same layout, their spacing needs diverge. A single opsz axis can’t account for both contexts simultaneously.

Variable Fonts That Handle Spacing Well

Inter’s rise has been fast. The HTTP Archive expects it to break into the top 10 most-used web fonts within a few years, largely because of its adoption in frameworks and design systems. Its optical size axis adjusts glyph proportions automatically as size changes, which reduces the need to set tracking manually.

A 2024 case study cited by Congruence Market Insights found that a global e-commerce platform saw an 18% improvement in page load speed after switching to variable fonts. Faster load times and fewer font files mean more control with less overhead.

Common Tracking Mistakes

Most tracking problems come from applying the same value everywhere. Your eyes get used to a setting, and then you stop seeing what it actually does to different text blocks.

Over-Tracking Body Text

Adding +50 or +100 tracking to paragraph text because it “looks more open” is one of the fastest ways to kill readability. Body copy at 14-18px already has optimized spacing in any well-made typeface.

Monotype’s 2024 Font Use Survey found that 76% of designers prioritize readability and accessibility as their top concern with type. Overriding default spacing on body text works against both.

Ignoring Weight Changes

Switching from regular to bold without adjusting tracking is a blind spot. Bold characters take up more horizontal space, so the gaps between them appear proportionally smaller.

Your paragraph text at 400 weight might look fine at default tracking. The same text at 700 weight suddenly feels tight and cramped. A small increase (even just +10 to +15) on bold body text compensates for that visual compression.

Same Value Across All Sizes

A tracking value of -20 that looks perfect on a 72px headline will be invisible at 14px body text. And the +75 that works for a 10px caption will make a 48px subhead look disjointed.

The fix: set tracking values relative to the text’s role, not as a blanket setting. Treat headlines, body copy, captions, and navigation labels as separate typographic contexts that each need their own spacing decisions.

Applying Tracking to Non-Latin Scripts

Arabic, Devanagari, and many other scripts use connected or semi-connected letterforms. Adding uniform spacing between characters in these writing systems can literally break the visual structure of words.

The HTTP Archive noted that CJK (Chinese, Japanese, Korean) fonts from the Noto superfamily account for about 42% of all variable fonts on desktop pages. With multilingual sites growing, tracking adjustments need to be scoped to specific language blocks in CSS, not applied globally.

Tracking Across Print and Digital

A tracking value that looks right in a PDF proof won’t necessarily translate to a browser. The two mediums render text differently at a fundamental level.

Why Print Tracking Is More Predictable

Print design gives you a fixed output. The DPI is set, the paper stock is known, and the text rendering won’t change after the file goes to press. Tracking at 300 DPI on coated stock will look the same on every printed copy.

That’s why print typographers have historically been more precise with spacing values. Robert Bringhurst’s guidelines in The Elements of Typographic Style assume a static medium where every fraction of an em matters.

What Changes on Screen

Subpixel rendering: browsers use antialiasing algorithms that smooth character edges differently across operating systems. Windows ClearType and macOS Core Text produce visibly different spacing even with identical CSS.

Screen density: a 1x display renders the same tracking value noticeably differently than a 2x Retina screen. On standard displays, tight tracking can cause characters to blur together. On high-DPI screens, the same value looks crisp.

Print resolution averages 300 DPI while screens typically run at 72-100 PPI (or up to 220+ PPI on Retina devices). That gap alone explains why a lot of poster design tracking feels wrong when recreated for web.

Responsive Tracking Considerations

Digital tracking often needs to shift at different breakpoints. A headline that looks tight and confident at 1440px viewport width might feel suffocated at 375px on a phone screen.

Using em units for CSS letter-spacing handles a lot of this automatically, since the value scales with font size. But it doesn’t solve everything. Sometimes you need explicit media queries to override tracking at specific breakpoints.

The New York Times is a strong example of cross-medium typographic control. Their 2016 rebrand updated typographic hierarchy and spacing for both print and digital while keeping the visual identity consistent across platforms.

Adoc Studio’s 2026 typography guide reports that proper spacing can reduce eye strain by 30% and improve reading accuracy by up to 20%. Those numbers hold true whether the text appears on newsprint or a phone screen, so long as the tracking is tuned for the specific medium.

FAQ on What Is Tracking In Typography

What does tracking mean in typography?

Tracking is the uniform adjustment of letter spacing across an entire word, line, or text block. It affects all characters equally, increasing or decreasing the horizontal distance between them. It’s different from kerning, which targets individual character pairs.

What is the difference between tracking and kerning?

Tracking adjusts spacing across all characters in a selection uniformly. Kerning fine-tunes the space between two specific characters. Use tracking for paragraphs and headlines. Use kerning for logos and display type where individual letter pairs need attention.

How do you adjust tracking in Adobe InDesign?

Open the Character panel, select your text, and change the tracking value in the field marked “VA.” Values are measured in thousandths of an em. You can also use Alt + Arrow keys to nudge tracking in small increments.

How does tracking work in CSS?

CSS uses the letter-spacing property to control tracking. Values in em units scale with font size, making them ideal for responsive layouts. Pixel values work but don’t adapt when text size changes across breakpoints.

When should you increase tracking?

Increase tracking on uppercase text, small caps, light font weights, and very small text like captions. All-caps text at default spacing looks cramped because the uniform character heights reduce visual separation between letters.

When should you decrease tracking?

Decrease tracking on large display headlines (48px and above) and bold weights at big sizes. Default spacing looks exaggerated at large scales. Pulling characters tighter gives headlines a more cohesive, confident appearance.

Does tracking affect readability?

Yes. Tight tracking at small sizes causes crowding, making characters hard to distinguish. Too-loose tracking in body text breaks word shapes and slows reading. Research shows optimized spacing can improve legibility by up to 20%.

How is tracking measured in Figma?

Figma uses percentages for letter spacing by default, where 1% equals 0.01em in CSS. You can also enter pixel values. This difference from InDesign’s thousandths-of-an-em system catches many designers off guard when switching tools.

Do variable fonts handle tracking automatically?

Some do. Variable fonts with an optical size (opsz) axis adjust spacing, stroke contrast, and proportions based on rendered size. But most variable fonts only include a weight axis, so manual tracking adjustments are still needed.

Should you use the same tracking value for print and screen?

No. Print output is fixed at high resolution (300 DPI), while screens vary widely. A tracking value that looks right in a print proof often feels different on screen due to subpixel rendering and varying display densities.

Conclusion

Understanding what is tracking in typography gives you direct control over how text feels on a page or screen. It’s one adjustment that touches everything from headline impact to body text comfort.

The difference between tight and loose character spacing might seem small. But across an entire paragraph, a full webpage, or a printed brochure, those fractions of an em add up fast.

Match your tracking decisions to the context. Tighten display type at large sizes. Open up uppercase and small caps. Leave well-designed body typefaces alone at their default spacing.

Test across devices. What works at 1440px on a desktop monitor won’t always hold up on a 375px phone screen. And what looks right in an InDesign proof may need adjustment once it hits a browser.

Tracking is a small control with outsized impact on readability, legibility, and the overall typographic quality of your work. Learn it once, and you’ll use it on every project.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu is a seasoned designer who has been designing websites since 2008.

Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.

His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.

He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.

Latest posts by Bogdan Sandu (see all)

• Baseball Team Color Codes - 28 July 2026
• How Creators Can Use AI Image Tools to Make Better Visual Content - 28 July 2026
• Canva vs Adobe Express: Which Is Better? - 27 July 2026