Knowledge Builders

what is letter spacing in typography

by Helena Jacobson Sr. Published 3 years ago Updated 2 years ago
image

It will be a good starting point for you, but you can always apply additional adjustments:

  • H1 — 96px — -1.5%
  • H2 — 60px — -0.5%
  • H3 — 48px — 0%
  • H4 — 34px — 0.25%
  • H5 — 24px — 0%
  • H6 — 20px — 0.15%
  • Subtitle — 16px — 0.15%

Letterspacing (also known as character spacing or tracking ) is the adjustment of the horizontal white space between the letters in a block of text. Unlike kerning, which affects only designated pairs of letters, letterspacing affects every pair.

Full Answer

What is letter spacing?

Letter spacing, or tracking, is a part of typography. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Besides letter-spacing (tracking), type arrangement involves selecting typefaces, point sizes, line lengths, line-spacing, and kerning.

How do you use spacing effectively in typography?

Use spacing effectively in typography. Paying attention to the detail in typography is extremely important for the professional designer. It is the job of the designer to ensure that adjustments are made to the spacing of letters, words and lines of type to create good typography.

What is letter-spacing?

Letter-spacing is about adding and removing space between letters. Some people confuse it with kerning, but these two are different; letter-spacing affects the whole line of text, whereas kerning adjusts the space between two individual letters at the time.

How do you write a letter with two spaces?

Font and spacing of letters Leave a space between each paragraph and single-space your letter. Leave two spaces before and after your written signature when submitting typed letters. Your contact information, the date, the letter, and your signature should all be aligned to the left in your letter.

image

What is another word for letter-spacing in typography?

trackingIn typography, letter-spacing, also called tracking, refers to the amount of space between a group of letters to affect density in a line or block of text.

What is space in typography?

Space in general is a blank unprinted area, a counterform that separates letters, words, lines etc. In typography, there are several types of spaces: sinkage (space on a page above a textblock), indent (space before the paragraph), leading (vertical space), word spacing, and letter spacing.

What's the difference between kerning and letter-spacing?

Kerning is the process of adjusting the spacing between characters in a proportional font. It's main purpose is to achieve a visually pleasing result. Kerning adjusts the space between individual letterforms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters.

What is letter spacing measured in?

Letterspacing in Word is measured in points. Use 0.6–1.4 points of letterspacing for every 12 points of point size (this corresponds to 5–12%).

What are the different types of spacing and how are they different?

Generally, you can choose between four types of line spacing in Word: single spacing; 1.5 times spacing; double spacing or a custom amount, in which the numbers refer to the size of the space, relative to the size of a line.

What is the best letter spacing?

Line height, or line spacing, is commonly measured as a percentage of font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability, but even up to 200% is acceptable. The perfect line height depends on the design and size of the font itself. There is no magic number that works for all text.

What are the two techniques of spacing letters?

Automatic and manual kerning There are two types of automatic kerning: metric and optical.

How do you space a font?

Change the spacing between charactersSelect the text that you want to change.On the Home tab, click the Font Dialog Box Launcher, and then click the Advanced tab. ... In the Spacing box, click Expanded or Condensed, and then specify how much space you want in the By box.

What describes the space between lines of text?

The amount of vertical space between lines of type is referred to as line spacing or leading. The latter term dates back to the days of metal type, when lead strips of varying thicknesses were inserted between lines of type to create space.

How do you make a space font?

0:5453:21How to Space a Font. FontLab Studio 5 tutorial with Thomas Phinney.YouTubeStart of suggested clipEnd of suggested clipEven looking spacing is dependent on the design a font that has smaller counters that are smallerMoreEven looking spacing is dependent on the design a font that has smaller counters that are smaller internal whitespace needs less space between the letters.

What is the space between specific characters?

Kerning is the process of adjusting the space between two specific characters to promote a visually pleasing and rhythmic flow between letters. Kerning is generally used in logos, posters, headlines, and other places where the irregular spacing between the letters is evident.

Why do we need letter spacing?

Some publishers and typesetters avoided letter spacing because it was costly in materials and labor. Letter spacing required hand insertion of copper (a half-point), brass (one point), and printer's "lead" (two points) spaces between individual pieces of type or between matrices. Despite the cost, letter spacing was used in print advertising and book publishing. It was also used for very short phrases set in capital letters or small caps to prevent the phrases from appearing too black compared to the rest of the page.

How does letter spacing affect reading?

The amount of letter-spacing in text affects legibility. Tight letter-spacing, especially in small text sizes, can diminish legibility. The addition of minimal letter-spacing can often increase the legibility and readability. Adding whitespace around the characters allows the individual characters to emerge and be recognized more quickly. Adding too much space, however, may isolate individual letters and make it harder for the reader to perceive whole words and phrases, which reduces readability.

What is the letter spacing property in CSS1?

With CSS1, a standard of 1996, the letter-spacing property (illustrated) offers some control for "kerning perception", as kerning can be simulated with non-uniform spacing between letters. The CSS3 standard includes the font-kerning property. In the meantime, web designers used the workaround of letter-spacing, mainly to enhance spaced texts of titles and banners .

What programs use zero letter spacing?

Word processing and desktop publishing programs for personal computers , such as Microsoft Word, Microsoft Publisher, WordPerfect, QuarkXPress, Adobe InDesign, Adobe FrameMaker, Adobe Illustrator, and Adobe Photoshop, use differing methods of adjusting letter spacing. Most systems have the default letter spacing at zero and instead use the character widths and kerning information built into the font itself.

What is the difference between en and em space?

Fixed spaces vary by size and include hair spaces, thin spaces, wordspaces, en-spaces, and em-spaces. An en-space is equal to half the current point size, and an em-space is the same width as the current point size.

Does kerning adjust space?

While tracking adjusts the space between characters evenly, regardless of the characters, kerning adjusts the space based on character pairs. There is strong kerning between the "V" and the "A" and no kerning between the "S" and the "T".

What is letter spacing?

Letter spacing, or tracking, is a part of typography. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Besides letter-spacing (tracking), type arrangement involves selecting typefaces, point sizes, line lengths, line-spacing, and kerning.

What is a use case for letter spacing?

For example, news editors have no time to rewrite paragraphs that end in split words or create widows or orphans. Hence, they adjust letter- spacing instead.

What is tracking in text?

Adjusting the space between letters in an optically consistent way changes the visual density of a line or block of text . Tracking is different from kerning, which involves adjusting the spacing between specific adjacent characters that would otherwise look poorly spaced.

How does white space affect reading?

Adding white space around characters enables individual characters to be recognized more quickly by the eye. Too much space, however, can detach letters making it harder for readers to recognize whole words and phrases, thus also diminishing readability.

Is there a single value that can ensure that all font families automatically maintain their legibility?

The bottom line is that legible letter-spacing must be decided on a case-by-case basis, as different font families have different character widths. There is no single value that can ensure that all font families automatically maintain their legibility.

What is letter spacing in CSS?

Letter-spacing is about adding and removing space between letters. Some people confuse it with kerning, but these two are different; letter-spacing affects the whole line of text, whereas kerning adjusts the space between two individual letters at the time. Kerning is best left to type designers, besides which, unlike letter-spacing there is currently no way to control kerning in CSS.

Why do we need letter spacing?

The main purpose of letter-spacing is to improve the legibility and readability of the text. Words act differently depending on their size, color, and the background they are on. By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently.

What do typographers think about when designing a typeface?

Bear in mind that typographers think about letter-spacing and kerning when designing a typeface. It means you don’t have to apply it to all your text, but in order to have an understanding when it’s necessary, you should know some basic principles, and use good typefaces.

What helped me improve my typography skills?

One of the things that helped me improve my skills in typography was looking at other designers and especially type foundries . By decoding their work you might notice some nuances of how they treat typography and it will help you in future projects.

Why do we use capital letters?

When capital letters are next to each other, the space between them is too tight. So in order to achieve better readability, space needs to be increased. This applies to both large and small font sizes.

Why is increasing letter spacing by 1.5% important?

At a small size, the letters are too close to each other, which leads to poor legibility. By increasing letter-spacing by 1.5% you will see that the text is now easier to read.

What happens if you have a line height of 120%?

If you have a line-height greater than 120%, most likely negative letter-spa cing will lead to an unbalanced look to the paragraph. To refine it you would need to either keep it at 0% or only slightly increase it.

When to letter-space text

I said earlier that typeface designers generally put a lot of effort into letter-spacing their type for body text so that it works great by default. However, some typefaces tend to naturally gain or lose letter spacing at different font sizes or styles (italic, bold, caps, etc.) to an undesirable point.

Stylistic letter-spacing

Letter-spacing can also be a stylistic choice, which is perfectly fine. You can get away with adding a lot of extra letter-spacing for one-off titles, and sometimes it works great. For example the intro titles for the movie Alien (1979):

Letter-spacing with CSS

Some use cases call for adjustments, that’s why we have the option to increase or decrease letter spacing in CSS, with the letter-spacing property.

Key takeaways

Trust the default settings of your typeface of choice, and only adjust letter-spacing when something visibly looks off.

How to use letterspacing in Word?

Word Right-click in the text and se­lect Font from the menu. Click the Advanced tab. On the line that says Spacing, in the box on the right, en­ter the amount of let­terspac­ing. Let­terspac­ing in Word is mea­sured in points. Use 0.6–1.4 points of let­terspac­ing for every 12 points of point size (this cor­re­sponds to 5–12%).

What is the font size for body text?

Fonts in­tended for body text have spac­ing op­ti­mized for body-text point sizes (ap­prox­i­mately 9–13 point). But ty­pog­ra­phers will of­ten add let­terspac­ing to low­er­case text smaller than 9 point in or­der to keep the spaces be­tween let­ters dis­tinct.

Who said anyone who would letter space low case would steal sheep?

Ty­pog­ra­pher Fred­eric Goudy is fa­mously cred­ited with opin­ing that “Any­one who would let­ter­space low­er­case would steal sheep”. But a few sources claim that his orig­i­nal com­ment con­cerned black­let­ter fonts, not low­er­case, and that he used a more col­or­ful verb than “steal”.

Do letters need letterspacing?

Un­like kern­ing, which af­fects only des­ig­nated pairs of let­ters, let­terspac­ing af­fects every pair. Low­er­case let­ters don’t or­di­nar­ily need letterspacing. Cap­i­tal let­ters usu­ally ap­pear at the be­gin­ning of a word or sen­tence, so they’re de­signed to fit cor­rectly next to low­er­case let­ters.

How does Letter Spacing work?

However, when capital letters are placed close to small letters, it improves the readability and the white space looks more legit.

What is the significance of letter spacing?

The significance of Letter Spacing is one of the vital aspects when it comes to web designing. As a web designer, if you get the hand over typography, you are bound to develop revolutionary web designs.

What is tracking in typography?

When a typographer, during the typography process, manages the letter spacing is called tracking. Tracking brings uniformity to the spacing between the letter in the web design. Tracking is a process that impacts the word density, life spacing, white space as well as combination of fonts .

Why is tracking important in writing?

The practicality: In principle, if the tracking (space between the letters) is increased, it provides readability as well as legibility elements to the text. Letters, characters, and symbols are more visually visible, which allows eyes to recognize and distinguish them in a much better way.

Why do typographers need to increase spacing?

Increasing and decreasing letter spacing is a power that typographers hold to manage the widows and orphans in the text to ensure there is no hyphenation in the text to improve the readability.

What is web typography?

Web typography is the technique of arranging and ordering type (fonts) in an artistic manner in web design. Well, the typography in web design is not just limited to punching the letters and characters on web design.

Why do web designers use space between capital letters?

Therefore, in order to develop web design with enough readability, web designers often manipulate the space between capital letters. The space application usually applies to both capital letters as well as small letters.

Why is space called leading?

Between lines, however, space is called leading, because manual typesetters used to use blocks of lead to separate lines. A leading size is measured from the baseline, the bottom of the capital letters, on one line, to the baseline of the next.

What is tracking in Word?

Tracking refers to the spacing between groups of characters, which we usually encounter as words. In most cases, we don't have to adjust this too often because the preprogrammed spacing separates the words nicely. However, we sometimes need to adjust the tracking. We never want to end a paragraph with a single word, on the last line, called an orphan and we don't want the last line of a paragraph to carry over to a new page all alone, called a window. Tracking helps ensure words are spaced just enough to add a few more words to an orphan or a few lines to a window.

Why do we have tracking in a paragraph?

Finally, we have tracking, which is the space between groups of characters, usually encountered as words. Adjusting that space helps avoid an orphan, a single word at the end of a paragraph. It also helps us avoid windows, where the last line of a paragraph is pushed to the next page.

What is a typesetter used for?

Typesetters used to align blocks like these for a printing press.

Can you incorporate a word in a design?

It's not enough to incorporate a word or two in every design. Sometimes, a client will hire you to create an informative design with large passages of text. By understanding the basics of typesetting, especially regarding letter size and spacing, you can includes those text passages in a way that serves your overall message. You don't want sloppy text to ruin the rest of the effect you so carefully constructed.

What is the term for the spacing of letters in a block of text?

Letter spacing in a block of text can be adjusted to have an overall looser or tighter spacing, and this is known as tracking . Particular typefaces benefit from a tighter setting, others a looser approach. The amount of tracking used is to an extent down to personal preference – most settings will require slight adjustments and can be quite subtle.

How much space between paragraphs?

Some designers prefer a full line space while others will opt for a half line space. If you are setting 8pt type size on a 10pt line feed, a full line space will measure 20pt from the baseline of the last line of a paragraph to the baseline of the first line of the next paragraph. A half line space will result in a 15pt measurement.

What is kerning in phototypesetting?

Kerning is the adjustment of space between two specific characters.

Why is it important to pay attention to typography?

It is the job of the designer to ensure that adjustments are made to the spacing of letters, words and lines of type to create good typography.

Why do we use capital letters in words?

Words set in capital letters benefit from a looser setting . This helps both with the fit of the letters and the overall readability. Some words will have awkward combinations of letterforms. Consider the word RAILWAY. The R and the A slope away from each other creating space, whilst the I and the L as two verticals side by side have less space. The capital letter L followed by a capital letter A such as in LAND or LABOUR creates a large space, which is difficult to equalise amongst the following letters. This creates unevenness in the spacing of the letters in a word. The role of the designer is to make optical adjustments to create that evenness of spacing. Care also needs to be exercised when setting in capitals as words are recognised by their shape, and words in capitals are more uniform with a less distinctive shape.

What is the advantage of line space?

The visual advantage of a line space is that in a multi-column setting, the baselines will always line across. Also, where there is some show through in the paper, the text will be aligned on both sides of the paper. With half line spacing in a multi-column setting, the baselines within paragraphs will come in and out of alignment in every other paragraph.

Which typeface requires more leading?

Typefaces with larger x-heights can require more leading than those with small x-heights, as is also the case with faces that have long ascenders and descenders. In display setting, the frequency of ascenders, descenders and capitals can have an influence.

image

Overview

In typography, letter spacing, character spacing or tracking is an optically consistent adjustment to the space between letters to change the visual density of a line or block of text. Letter spacing is distinct from kerning, which adjusts the spacing of particular pairs of adjacent characters such as "7." which would appear to be badly spaced if left unadjusted.

History

Historically, with metal type, a kern meant having a letter stick out beyond the metal slug to which it was attached, or having part of the body of the slug cut off to allow letters to overlap. A kern could therefore only bring letters closer together (negative spacing). Digital kerning could go in either direction. Tracking can similarly go in either direction, but with metal type, one could make groups of letters only farther apart (positive spacing).

Digital systems

Word processing and desktop publishing programs for personal computers, such as Microsoft Word, Microsoft Publisher, WordPerfect, QuarkXPress, Adobe InDesign, Adobe FrameMaker, Adobe Illustrator, and Adobe Photoshop, use differing methods of adjusting letter spacing. Most systems have the default letter spacing at zero and instead use the character widths and kerning information built into the font itself.

Legibility

The amount of letter spacing in text affects legibility. Tight letter spacing, especially in small text sizes, can diminish legibility. Adding whitespace around the characters allows the individual characters to emerge and to be recognized more quickly. Adding too much space, however, may isolate individual letters and make it harder for the reader to perceive whole words and phrases, reducing readability.

Fixed spaces

Letter spacing may also refer to the insertion of fixed spaces, as was commonly done in hand-set metal type to achieve letter spacing. Fixed spaces vary by size and include hair spaces, thin spaces, word spaces, en-spaces, and em-spaces. An en-space is equal to half the current point size, and an em-space is the same width as the current point size.

See also

• Emphasis in typography
• Kashida
• Microtypography
• Sentence spacing
• Typographic ligature

External links

The dictionary definition of letterspacing at Wiktionary

Why Use Letter spacing?

  • Adjusting the space between letters in an optically consistent way changes the visual density of a line or block of text. Tracking is different from kerning, which involves adjusting the spacing between specific adjacent characters that would otherwise look poorly spaced.
See more on elementor.com

Legibility & Fixed Spaces

  • Firstly, the effect on text legibility. Tight letter-spacing, especially in small-sized text, can reduce readability. Adding white space around characters enables individual characters to be recognized more quickly by the eye. Too much space, however, can detach letters making it harder for readers to recognize whole words and phrases, thus also diminishing readability. A use case wo…
See more on elementor.com

Considerations For Foreign Languages

  • While basing the letter-spacing design on legibility, appeal, uniformity, and the like, it ignores that applying letter spacing to some written international languages would make the text look broken. For example, languages using Arabic script are expected to have visually connected letters.
See more on elementor.com

Line Spacing and CSS

  • CSS (Cascading Style Sheets) is not a programming language or a markup language but a style sheet language used to selectively style HTML elements. The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive letter-spac...
See more on elementor.com

The Purpose of letter-spacing

Image
The main purpose of letter-spacing is to improve the legibility and readability of the text. Words act differently depending on their size, color, and the background they are on. By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. The f…
See more on webdesignerdepot.com

How letter-spacing Affects Legibility and Readability

  • The legibility and readability of your text depend on things like line-height, paragraph length, font size, typeface choice, letter-spacing, and much more. Regarding letter-spacing, if you are just getting into typography, the best thing you can do is not overuse it. What I mean by that is simply don’t make the distance between letters too big or too small; even if you think it looks good, peo…
See more on webdesignerdepot.com

letter-spacing Capital Letters

  • Capital letters are designed with the intention that they will appear at the beginning of a sentence or proper noun, in combination with lowercase letters. When capital letters are next to each other, the space between them is too tight. So in order to achieve better readability, space needs to be increased. This applies to both large and small font sizes.
See more on webdesignerdepot.com

letter-spacing Headlines

  • If you are using well designed fonts, you can be sure that they are calibrated well, and you won’t need to make any major adjustments to them. However, the problem with headlines is that at larger scales the space between letters looks unbalanced. It can be fixed by increasing or decreasing the letter-spacing value. There are no strict rules for letter-spacing — there are a lot o…
See more on webdesignerdepot.com

letter-spacing Body Text

  • If you ever read anything about letter-spacing, you’ve probably have seen this popular wisdom from typographer Frederic Goudy: “Anyone who would letter-space lowercase would steal sheep”. (There’s an argumentthat he was only referring to blackletter fonts.) Some designers took it as a hard rule and now never adjust the letter-spacing of lowercase text. Based on my practice and b…
See more on webdesignerdepot.com

letter-spacing Captions

  • Unlike headlines and body text, smaller font sizes don’t have many variations in letter-spacing. It’s a common practice when a font size is lower than 13px to increase the space between letters to make it legible. But there are always exceptions (“SF Pro Text” guidelines suggest using positive letter-spacing only when a font size is 11px or below). Make sure you experiment with settings. …
See more on webdesignerdepot.com

Final Tip

  • One of the things that helped me improve my skills in typography was looking at other designers and especially type foundries. By decoding their work you might notice some nuances of how they treat typography and it will help you in future projects.
See more on webdesignerdepot.com

1.A Quick Guide to Tracking (Letter-spacing) in Typography …

Url:https://www.indesignskills.com/tutorials/letter-spacing-tracking-typography/

26 hours ago The local aspect of letter spacing suggests that small space adjustments between letters in body text add massive performance enhancement and transform the look of the web page. Often it is seen that just by sticking to the standard formatting, legibility is often compromised by designers.

2.Letter spacing - Wikipedia

Url:https://en.wikipedia.org/wiki/Letter_spacing

26 hours ago Font and spacing of letters Leave a space between each paragraph and single-space your letter. Leave two spaces before and after your written signature when submitting typed letters. Your contact information, the date, the letter, and your signature should all …

3.What Is Letter Spacing? | Elementor

Url:https://elementor.com/resources/glossary/what-is-letter-spacing/

11 hours ago

4.The Designer’s Guide to Letter-Spacing | Webdesigner …

Url:https://www.webdesignerdepot.com/2020/07/the-designers-guide-to-letter-spacing/

18 hours ago

5.How Letter-spacing Affects Text Legibility in Typography

Url:https://techstacker.com/letter-spacing-text-legibility/

23 hours ago

6.Letterspacing | Butterick’s Practical Typography

Url:https://practicaltypography.com/letterspacing.html

21 hours ago

7.Designers’ Guide to Letter Spacing - Web Design Blog …

Url:https://line25.com/articles/designers-guide-to-letter-spacing/

6 hours ago

8.Spacing & Type Size in Typography | Study.com

Url:https://study.com/academy/lesson/spacing-type-size-in-typography.html

36 hours ago

9.Use spacing effectively in typography | Creative Bloq

Url:https://www.creativebloq.com/advice/use-spacing-effectively-in-typography

30 hours ago

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9