Articles
Introduction to CSS
CSS properties related to text spacing

CSS properties related to text spacing

This article explains CSS properties related to text spacing.

You can learn about the usage and how to write properties like line-height and word-spacing.

YouTube Video

Creating HTML for preview

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Typography (Text Margin-Related)

line-height property 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height is a CSS property used to set the line spacing (line height). line-height specifies the vertical space between lines, used to enhance readability or adjust spacing as part of the design.

Main uses of line-height

Unitless numbers 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Specify a height relative to the font size. For example, specifying 1.5 sets the line height to 1.5 times the font size. This method is useful for responsive design.
Percentage 
1p {
2    line-height: 150%;
3}
  • Specify the line height as a percentage of the font size. For example, specifying 150% sets the line height to 150% of the font size.
Fixed values (px, em, rem, etc.) 
1p {
2    line-height: 20px;
3}
  • Specify the line height in absolute units. For example, you can specify a concrete value like 20px, but it may lack flexibility in responsive design.
normal 
1p {
2    line-height: normal;
3}
  • Specifying normal applies the browser's default line spacing settings. Typically, it will be about 1.2 to 1.4 times the font size.

Examples of Using line-height

Readable paragraphs
  • A line-height of about 1.5 to 1.6 is usually recommended for readability. If the line spacing is too narrow, the text will be cramped and hard to read, and if it's too wide, the text will feel disjointed.
Heading design
  • For headings and titles, where the text is larger, line spacing can be reduced. Settings like 1.1 or 1.2 are often used.

Summary

  • line-height is an important property for improving both the readability and design of text.
  • Using relative values (numbers or percentages) makes it easier to adapt to responsive designs.
  • For headings with large text and paragraphs with smaller text, it's crucial to set appropriate line spacing for each.

Leveraging this property can make the appearance of text more readable and enhance its design quality.

letter-spacing property 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing is a CSS property used to adjust the spacing between characters (letter spacing). This property can be used to tidy up the text design, enhance readability, and achieve specific styles.

In this example, it is specified as follows.

  • normal: The default letter spacing. It is a standard value determined by the browser and font.
  • 4px: An example of widened letter spacing. Adds 4 pixels of space between each character.
  • -1px: An example of narrowed letter spacing. Reduces 1 pixel of space between each character.

How to Use letter-spacing

Values with units 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Setting a positive value will increase the letter spacing.
  • Setting a negative value will decrease the letter spacing.
  • Units are typically in px (pixels) or em.
Default: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Use the default letter spacing. Normally, the standard letter spacing defined by the font is applied.

Examples of letter-spacing usage

  • Improved readability: For small font sizes or overly condensed fonts, you can improve readability by increasing letter-spacing.
  • Design adjustment: You can adjust letter spacing to visually emphasize design elements such as titles or logos.
  • Adjustment between words: You can adjust spacing at the letter level, rather than between words. letter-spacing adjusts letter-level spacing, but use word-spacing to expand the space between words.
  • Design balance: If you increase letter spacing too much, the whole text might look too stretched out. Conversely, if you decrease it too much, the text can become cramped and difficult to read, so it's important to maintain an appropriate balance.

Summary

  • letter-spacing is a property that adjusts the space between letters, affecting both design and readability.
  • You can increase spacing with positive values and decrease it with negative values.
  • It's effective for titles and specific design elements, but be careful not to compromise readability.

By using this property, you can adjust the appearance of text and achieve attractive designs.

word-spacing Property 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing is a CSS property that controls the space between words in a text. Proper use of this property can improve visual balance and text readability. word-spacing is particularly useful in typography-focused designs and responsive design scenarios.

In this example, it is specified as follows.

  • normal: Applies the default word spacing. This is the browser's initial value.
  • 4px: An example of increased word spacing. Adds 4 pixels of margin between each word.
  • -1px: An example of decreased word spacing. Reduces the space between each word by 1 pixel.
  • word-and-letter-spacing: An example of decreased word and letter spacing. Reduces the space between words by 0.1em and between letters by 0.05em compared to normal.

Using Positive and Negative Values

Setting a positive value for word-spacing will expand the word spacing. On the other hand, using negative values narrows the spaces between words. Negative values may be used to emphasize visual effects or to tighten letter spacing for specific design reasons.

Difference with letter-spacing

word-spacing is a property that adjusts the space between words, while letter-spacing adjusts the space between letters. By combining these properties, you can have more precise control over the typography of entire texts.

Cautions and Best Practices

  • Excessive Space Adjustment: Overuse of word-spacing can lead to a decrease in readability. Especially too large or too small spaces can be stressful for users, making moderate adjustments important.
  • Responsive Design: Specifying relative values using em or rem is effective for responsive design because it ensures proper display across different screen sizes.
  • Heading Style Adjustment: By widening the space between words in heading text, you can add visual emphasis. This allows you to clarify the hierarchy of content and achieve a sophisticated design.

word-break Property 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break is a CSS property that controls how text wraps when it exceeds the width of the container. Normally, browsers break lines at word boundaries, but specific settings can improve appearance and readability when long words or URLs are present.

You can specify the following values for the word-break property.

  • normal

    normal is the default value. When a word exceeds the width of the container, it will break at word boundaries. This setting is common in languages like English, and breaks do not occur in the middle of words.

  • break-all

    break-all is a setting where line breaks can be inserted after any character, as needed. Especially when long words or URLs are included, line breaks occur at character level to prevent layout disruption.

  • keep-all

    keep-all is a setting used particularly for Asian languages (Japanese, Chinese, Korean, etc.). In this setting, the entire word is preserved, and no breaks occur in the middle of words. However, for space-separated languages like English, normal word-boundary line breaks are applied.

This example shows three different word-break settings. With word-break-normal, the whole word is preserved and breaks at word boundaries if it exceeds the container's width. With word-break-break-all, breaks occur even in the middle of words. word-break-keep-all allows natural breaks for Asian languages like Japanese and word-boundary breaks for English.

word-break Application Scenarios

Mobile Devices and Responsive Design 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

On mobile devices, screen width is limited, which can cause text including URLs or long words to exceed the screen width. In such cases, applying word-break: break-all; allows line breaks at character level to fit screen width, improving readability.

hyphens Property 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • The hyphens property is used in CSS to specify how word hyphenation (splitting words with hyphens) should be handled when breaking lines of text. By setting this property appropriately, you can improve the readability and appearance of the text. Hyphenation is particularly useful when long words need to be wrapped.

  • Since hyphenation rules vary by language, this property depends on the text's locale.

Syntax 

1element {
2    hyphens: none | manual | auto;
3}

The hyphens property can be set to the following values:.

  • none: No hyphenation is applied. Words will typically break only at the end of the word.
  • manual: Hyphenation is applied manually. In this case, you need to specify hyphenation points manually within the HTML. For example, you can use &shy; (soft hyphen).
  • auto: The browser automatically applies hyphenation at appropriate positions. In this case, the document's language (lang attribute) must be correctly specified.

Notes

  • Importance of Language Settings: When using hyphens: auto;, proper hyphenation requires the lang attribute of the HTML document to be set correctly.
  • Font Dependency: Some fonts may not be suitable for hyphenation.
  • Use of Hyphenation Dictionaries: Hyphenation rules depend on the dictionaries used by the browser. Therefore, it may not work as expected for certain languages.

Summary

By properly utilizing the hyphens property, you can significantly improve text layout. Especially for multilingual websites and mobile-friendly designs, appropriately using auto and manual can enhance the user experience.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Text-related CSS propertiesCSS Properties for Code Display and Quotations