今天的封面是 Cursor 程式編輯器，雖然我畫的時候，他的圖示好像還沒有扁平化的樣子，剛好前陣子看到一篇 Cursor 的圖示設計系統的文章，推薦大家可以看看，整理的超棒！推薦文章！

回到今天的主題～

昨天介紹了字體大小、粗細、字體家族與文字裝飾，這些屬性能決定文字本身的外觀。不過，要讓內容讀起來更舒服，文字之間的距離與排列方式也同樣重要。

今天要來認識文字間距與對齊相關的 CSS 屬性，透過字距、行距，以及水平與垂直對齊，調整出更清楚、好閱讀的版面。

直接開始介紹吧！

文字間距

文字間距是影響閱讀體驗的重要因素，適當的間距設定能提高文字的可讀性和美觀度。CSS 提供多種屬性來控制文字間的空間，包括字元間距和行距，讓設計師能精確調整文字排版效果。

Letter-spacing 文字字距

letter-spacing 屬性控制字元與字元之間的間距，對文字的視覺密度和可讀性有重要影響：

p {
  letter-spacing: 2px;     /* 固定數值 */
  letter-spacing: 0.1em;   /* 相對單位 */
  letter-spacing: normal;  /* 預設值 */
}

• 數值設定

  1. 固定數值：字距為固定數值，不會隨字體大小改變。可使用正值增加間距，負值減少間距。

     .text {
       font-size: 20px;
       letter-spacing: 2px;  /* 每個字元間增加 2px */
     }
     .tight {
       letter-spacing: -1px; /* 減少 1px,文字更緊密 */
     }
     

  2. 相對單位 (em)：字距相對於元素自身的字體大小，會隨字體大小等比例縮放，適合響應式設計。

     .text {
       font-size: 20px;
       letter-spacing: 0.1em; /* 字距為 2px (20px × 0.1) */
     }
     .small-text {
       font-size: 14px;
       letter-spacing: 0.1em; /* 字距為 1.4px (14px × 0.1) */
     }
     

  3. normal：瀏覽器預設值，通常為 0，表示使用字體本身的預設間距。

     .text {
       letter-spacing: normal; /* 恢復預設間距 */
     }
     

• 使用建議

  • 中文字體一般較少需要調整字距，調整時應謹慎使用較小數值，並根據具體情況決定。

  • 內文通常使用預設值 normal ，或是微調極小的間距 (0～0.05em)，保持自然閱讀感。

  • 標題可以使用較大的字距 (0.05～0.15em)，營造特殊質感和視覺重點。

  • 當英文全大寫時，可以嘗試增加字距 (0.1～0.2em)，避免文字過於擁擠。

  • 負值字距會讓文字重疊，應避免用於正文，僅在特殊視覺效果時使用。

    body {
      letter-spacing: normal; /* 內文預設 */
    }
    h1 {
      letter-spacing: 0.05em; /* 大標題稍微放鬆 */
      text-transform: uppercase;
    }
    .subtitle {
      letter-spacing: 0.15em; /* 副標題較寬鬆 */
      text-transform: uppercase;
      font-weight: 300;
    }
    .logo {
      letter-spacing: 0.2em; /* Logo 文字更寬鬆，增加質感 */
    }
    .compact {
      letter-spacing: -0.02em; /* 特殊緊密效果 */
    }
    

Line-height 文字行距

line-height 屬性控制行與行之間的高度，對於多行文字的可讀性影響極大：

p {
  line-height: 20px;   /* 固定高度 */
  line-height: 150%;   /* 百分比 */
  line-height: 1.5;    /* 使用無單位數值（推薦） */
}

• 數值設定

  1. 固定數值：行高固定數值，不會隨字體大小改變，不適合響應式設計。

     .text {
       font-size: 20px;
       line-height: 24px; /* 固定 24px  */
     }
     

  2. 百分比：行高相對於元素自身的字體大小的百分比，內部元素只會繼承計算後的固定值。

     .text {
       font-size: 20px;
       line-height: 150%; /* 元素本身行高為 30px (20px × 150%) */
       p {
         font-size: 16px; /* 內部元素行高為 30px (20px × 150%) */
       }
     }
     

  3. 無單位數值：行高相對於元素自身的字體大小的倍數，內部元素會繼承行高倍數，因此最推薦使用。

     .text {
       font-size: 20px;
       line-height: 1.5; /* 元素本身行高為 30px (20px × 1.5) */
       p {
         font-size: 16px; /* 內部元素行高為 24px (16px × 1.5) */
       }
     }
     

• 使用建議

  • 行距可以根據設計所需要的空間感來定。

  • 內文適合使用 1.5～1.8 之間的行距，提高閱讀舒適度。

  • 標題則適合使用 1.3～1.5 的較小行距，呈現更緊湊的視覺效果。

  • 對於較長的文字段落，可以使用較寬鬆的行距，以增加閱讀舒適度。

    body {
      line-height: 1.6; /* 內文預設行距 */
    }
    h1, h2, h3 {
      line-height: 1.3; /* 標題較緊密行距 */
    }
    .long-text {
      line-height: 1.8; /* 長文較寬鬆 */
      max-width: 70ch;  /* 限制每行字數，提升可讀性 */
    }
    
    

文字對齊

CSS 提供多種屬性來處理文章段落的文字對齊方式，讓您能根據內容需求靈活調整文字的排列位置。

Text-align 文字水平對齊

text-align 屬性用來控制文字在元素內的水平對齊方式，這對於排版和視覺平衡非常重要。

.text-align {
  text-align: left;
  text-align: center;
  text-align: right;
  text-align: justify;
}

<p class="text-align">
  青山依舊在，幾度夕陽紅。滾滾長江東逝水，浪花淘盡英雄。
</p>

Vertical-align 文字垂直對齊

vertical-align 屬性用來控制行內元素 (inline)、行內區塊元素 (inline-block)、表格單元格元素 (table-cell) 的垂直對齊方式。此屬性在處理不同高度的行內元素時特別有用，例如：圖片 <img> 與文字 <span> 並排在同一行時，可以調整兩者的垂直對齊關係；兩個字體大小不一樣的文字，也適合用這個調整。

.vertical-align {
  vertical-align: baseline;
  vertical-align: middle;
  vertical-align: top;
  vertical-align: bottom;
}

<p>
  <span>這是</span>
  <img class="vertical-align" src="https://picsum.photos/200">
  <span>一張圖片</span>
</p>

由於此屬性對 block 元素無效，因此文字 <p>、區塊 <div> 的預設皆無法使用。如果要處理 block 元素的對齊問題，可以使用 Flexbox 或 Grid 的方式排版，詳細的使用方法會在後續章節中介紹。

總結

本篇介紹了 letter-spacing、line-height、text-align 與 vertical-align，它們分別影響文字的字距、行距與對齊方式。適當調整這些屬性，能讓內容更有層次，也能提升閱讀時的舒適度。

實作時可以先從合適的行距開始，再依標題與內文的需求微調字距；對齊方式則要依內容與元素類型選擇，避免為了視覺效果而影響閱讀。