SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Kerning, Leading, Tracking, and Everything You Need to Know About Text Spacing

May 9, 2019 by Alex Fox

The space between letters is just as important for legibility as the text itself. If your website is hard to read, don’t just consider the typeface: consider the white space as well. With kerning, leading, tracking, and other spacing tools, you can make your text more readable without a major design overhaul using these text spacing CSS properties.

Text Size/Font Size

text spacing glossary

Text size or font size is a measure of how much space the text takes up. It’s nominally a measure of the height of the character. Not every font manages height the same way. Nominally, the font size parameter sets the em height, or the distance between the lowest descender and the hightest ascender. It doesn’t have to measure that, of course, which is what leads to disagreements between different typefaces on what a specific font size means. You’ve surely noticed that some typefaces seem “smaller” at identical measurements: variance on what’s constitutes the em height is often to blame.

Kerning & Tracking

Kerning is the distance between letters in a word. In professionally-set display type, the spacing of individual letters is typically custom-tuned. This ensures a perfect display in large sizes, with pixel-perfect balance and organization. But not all text is so important. By percentage, in fact, very little text online is custom tuned. Instead, it’s handled with CSS properties like letter-spacing, which adjusts based on percentages.

text spacing kerning tracking
Krauss [CC BY-SA 3.0], via Wikimedia Commons

It’s also managed by the typeface itself, which includes hinting and rules for displaying text. For example, take letter joining, performed by the text as needed. With double letters like tt and ff, crossbars are drawn as a single line, with no space in the horizontal point between them. Other letter pairs also get custom spacing rules. A g might have less space on the right than an h or n, for example, and an l will be thinner than an x. This allows text to flow in a balanced way, without a requirement for custom management. The computer, through the font, takes care of it all.

For an example of a font with poor kerning by design, look at monospace fonts like Courier New. These fonts are purposefully designed so that each letter occupies exactly the same space as the next. Therefore, thin letters like l take up comparatively too much space in the text, making it hard to read fluidly, especially in longer text blocks.

Setting Kerning and Tracking in CSS

In general, you don’t need to modify the default font spacing provided by the typeface itself. At least, not for body text. If the font is well-designed, it will naturally create space as needed.

Kerning between individual letters can’t be easily adjusted in CSS, at least not without creating a class for every pair of letters. Instead, we adjust tracking, which controls the space between letters as a whole. Because the adjustment happens across the entire element, not just individual letters, this is technically called tracking, not kerning. However, the two words are used interchangeably, even by designers that might know better.

Built-in font kerning can be disabled with font-kerning: none There’s no specific way to adjust tracking between individual letters in CSS. However, we can make wholesale spacing adjustments with letter-spacing. Positive values expand the spacing, while negative values decrease it.

For display text, which makes up headlines, titles, and section headings, you may need finer control. The letter-spacing CSS property allows for adjustment of the space between letters on a wholesale basis. A positive value adds that to whatever the default letter spacing is. A negative value subtracts from the default letter spacing. So, if you set letter-spacing: 0.2em, you’re adding 0.2em to the existing spacing between letters.

Leading

Leading is the distance between individual lines. This is typically measured in the same units as the text size is denominated. Whether in pixels, ems, rems, percentages, or points, leading measures the distance from baseline to baseline. The baseline is the imaginary line upon which the bottoms of most letters (and the bowls of letters with descenders, like g, p, and q,) rest. The distance between the baselines must be as large as or larger than the type in order to prevent overlapping lines.

text spacing leading

The name for leading comes from the bars of lead that would be placed between typeset lines. The lead would create more or less space between lines of text, decreasing the words per inch. All text needs a little bit of leading for readability, though an untrained eye might not notice its absence until descenders and ascenders start to overlap.

Leading is set via the line-height CSS property, or more commonly applied in the font property shorthand like font: 1em/1.2em Helvetica, Arial, sans-serif. The spacing can be denominated in different unit from the font size, but it typically makes sense to match them.

Letter Width

text spacing letter width
Garethlwalt [CC BY 3.0], via Wikimedia Commons

Letter width is a measurement of how wide the individual letters are, based on a percentage. With all proportional fonts (that’s virtually all fonts, these days), the width of individual characters vary, with narrow character glyphs taking up less space that wider glyphs. Letter width adjusts those widths by a fixed proportion, enlarging them by whatever value you set. This can be adjusted bluntly with font-stretch, though it’s not very appealing visually.

CSS Properties for Spacing

These CSS properties can be used to set letter and word spacing.

/* LEADING/LINE HEIGHT */
font: 1em/1.2em Helvetica /* sets leading to 1.2 em */
line-height: 14px /* sets leading to 14 pixels */

/* KERNING/TRACKING */
font-kerning: none; /* disables automatic kerning */
letter-spacing: 0.2em; /* increase letter spacing */
letter-spacing: -0.1em; /* reduce letter spacing */
word-spacing: 3px; /* increase whitespace between words, not letters */
word-spacing: -5px; /* reduce whitespace between words, not letters /*

font-stretch: expanded; /* increases the letter width by stretching the font */

Finding the Correct Text Spacing

Text needs enough room to breath. Without a minimum of sufficient space between words, lines, and letters, text becomes impossible to read. Text written on top of text is the most extreme consequence of improperly set leading and kerning, but most text display engines must be explicitly told to make that mistake.

In general, you’ll find that improperly spaced text feels dense and impenetrable or airy and hard to scan, depending on whether the spacing is too narrow or too broad. Display text should have liberal spacing, while body text should be closer and easier to follow from one word to the next.

When you’re testing spacing, be sure to try out multiple options. Use a trial section of the website to compare various spacings, not just at the letter scale, but across the whole page. Pick sometimes that makes reading comfortable, with enough space between letters and words to breath, but not so much space as to confuse the user as they read

You might also be interested in the following posts:

Modern Handwritten Fonts for Fresh Design Trends

The Art Of Mixing Typefaces – Google Fonts Edition [INFOGRAPHIC]

Adding Customization Options to Your User Interface

Filed Under: CSS, Design, Typography Tagged With: css, fonts, line spacing, typography

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022