---
title: To設計師：入門網頁字型指南-5
tags: 網頁設計, 字體
description:
---
# To設計師：入門網頁字型指南-5

<!--  -->

{%hackmd 90wqUJSZS6-SJOFf7BzsQA %}

《設計彈性與多語系網站》

在這個系列的最後，筆者想針對網頁設計的文字部分作延伸討論，內容可能有些發散──不限於字體，更延伸到網頁設計本身的一些觀念──但大致上就是想強調與前後端搭配實作時應考量到的「設計彈性」，並且用「多語系網站」來實際舉例。

不論是客戶、設計師還是工程師，大家都是網路使用者，只是使用的網頁類型依據各自的生活經驗有所不同。可能有些人經常使用購物網站，對於購物流程就會有比較多觀察（通常好用的網站使用起來順順的沒什麼感覺，一旦遇到難用的網站，敏銳度就會提高了XD）；又可能有些人常使用資訊型的網站，像是論壇或是投資網站，就比較清楚何種呈現方式能讓人很快找到重點、查詢到想要的內容。

然而，在製作網頁時，我們要關注的不只是個人自身的經驗，而應該考量實際使用者的感受（退萬步言，業主想像的使用者感受）。設計師們可能會需要挑戰自己從來沒有使用過的網站類型──可能是嬰幼兒產品網站、跨國企業的其他國家語系網頁、或在這行其實很常見、但通常末端使用者不會用到的：網站後台。

這些跳脫自身體驗的產品與內容，就是考驗設計師（工程師也是啦）經驗值的時刻了。如何累積經驗值呢？最差的情況就是專案裡所有人都盲目摸索，於是網頁上線才收到使用者的抱怨，並據此改進；不過大部分的情況可能會是這樣：業主本身對產品的特殊情況有一定的了解並據此提出需求，或是專案裡有身經百戰的可靠隊友，團隊就能在規劃階段先作功課，盡量全面地考量，也能在測試階段盡量減少上線後才爆炸的可能。

最後這篇文章的目的之一，就是想分享筆者自己曾經遇過的、以前幾乎沒特別想過的情形，希望藉此幫助讀者們在實際遇到這種未知領域網頁時，可以有多一些心理準備。

### 與前後端搭配實作時應考量到的重點

身為設計師，在設計網頁時，思考方式需要跳脫平面設計的框架，畢竟兩者有一個很大的差異：「網頁是活的」！平面設計在固定的版面、尺寸中呈現固定的排版、圖片和文字，但來到網頁設計，版面會隨著觀看的裝置尺寸變化，而同一個產品網頁版型，又會由後台帶入資料，衍伸出千百種不同產品、文案內容。

這也就是說，進入網頁設計的領域，設計師就不再只能思考單一層面：如何調配現有的圖文素材，引導觀者視線、讓畫面美觀又能清楚呈現資訊；而是要再加深一個維度：這樣的設計帶入過少／過多的文案時，該怎麼呈現？如何在極端情況（內容不足／內容過多）下也能讓版面維持優良的設計？也就是由靜態進入動態變化的世界。

下面就藉由多語系網站這種與文字息息相關的、典型的「不同內容套用至同一設計」類型，來具體探討「設計彈性」。

### 多語系網站會遇到的文字呈現情境

多語系網站從簡單的雙語系，到包含幾十種語系的全球性網站都有。一般專案設計時為考量成本，通常會以其中一種語系作為主要方向、其他語系就直接套上翻譯由前端工程師處理；不過，正式的大型專案可能也會需要設計師提供多語系的 prototype ，這時稍微了解各語系的文字特色就會有很大的幫助！

如果一開始沒有考慮到各種語言之間的特性差異，可能會遇到像是註冊按鈕設計只剛好容納了「註冊」兩個中文字，翻譯成英文變成「Register」、翻譯成德文則變成「Registrieren」（驚不驚喜，意不意外～），這樣因為單字長度差異導致排版空間不足的窘境。

[手機版 Twitter 截圖，可以看到俄文有些選項被截斷]

以下將列舉一些多語系網站常見的細節，希望這些內容不論對剛入行的設計師還是前端工程師，都能建立一些對多語系網站的心理準備，盡可能地讓設計本身富有彈性。

#### 一、不同語言間字形的差異
在系列文章的上一篇有介紹到 Google Fonts 的介面，每種字體都有展示該字體字形（Glyphs）的區塊；不同語言文字的字形無論是寬、高還是文字內部的緊密度都不同，若全部使用同一套字間距、行高、段落間距設定，就無法兼顧全部語言的閱讀性。

不同語言的字形大致可以歸納成三種[註1]：
- English-like（類英文文字）：奠基於拉丁字母的文字，英語系國家、歐洲、非洲地區大多使用此類文字；越南文則是例外，雖然也以拉丁字母為基底，但因為包含聲調符號所以屬於高文字。
- Tall（高文字）：文字本身的高度較高，南亞、東南亞、中東地區均屬此類。高文字需要的行高比類英文文字稍多一些。
- Dense（密集文字）：字形較大、構成較複雜，中文、日文和韓文屬於此類。密集文字會需要更高的行高、以及較大的字間距來確保閱讀舒適順暢。

[不同語言字形的比較]

另外要注意的是各字體對字重的支援度落差，像 Roboto 這種有 100 、 300 一路到 900 字重的字體是少數，常見的問題是某些語言的字體沒有 Medium 500 字重（微軟正黑體就沒有 Medium 字重……）。所以設計多語系網站時，要注意若有使用除了 Regular 400、Bold 600 以外字重，就可能會面臨切換語系後出現缺少字重導致層級不明確。

給前端工程師的額外說明：在 CSS 中， `line-height` 的預設值為 `normal` ，而 `normal` 通常為 1.2 ，也就是字體大小的 120% 。 `line-height` 有多種寫法（純數值、px、em、rem、%、initial、inherit...等），筆者建議直接以數值標示最為明確，可以直觀地瞭解是字體大小的「 1.2 倍行高」。實際呈現時，這個高度還會受字體設計本身影響，這就是為何有時明明做好文字在按鈕裡垂直置中，但換了另一種字體文字位置就歪掉了。

[同樣是英文字體，但字形各不相同（觀察兩個字體間最高和最低緣與文字間形成的空隙差異）]

#### 二、不同語系間單字長度的差異
你知道翻譯成德文／俄文，很多單字的長度會直接爆增兩三倍嗎？這兩種語言的單字長度通常較長，因此可以當作多語系元件寬度的一個指標。設計時為文字保留延伸空間相當重要，如果什麼元件都剛好塞得緊緊的，更換語系或改變內容後就可能出現資訊被截斷、無法完整顯示的問題；如果被截短的是段落文字，還能靠「閱讀更多」按鈕來處理，但如果是 UI 元件，可能會導致使用者根本看不出該元件的作用。

[利用 Google 翻譯內容後將同樣元件互相比較：可以看到文案數量、斷行、日期表示方式、按鈕大小都不相同，按鈕大小設成固定時，翻譯成德文會有寬度不足的問題]

單字長度的差異，又衍伸出多欄式排版可能造成的斷句問題──這算是使用密集文字作為母語的人容易遇到的盲點。因為中文單字通常較短，在網頁中做多欄設計也無所謂，10個字元左右的欄寬都還算充裕。然而西文語系的單字普遍較長，「欄寬」在西文世界也是重要的文字排版要素之一，為避免文句和單字被斷得七零八落，理想的欄寬就比中文字多上不少，需要落在40-60字元間或更長[註2]。

不過，知道這些又能怎麼辦呢？要做多國語言 prototype 時，設計師們難道要複製多個版面再慢慢套上翻譯嗎？遇到這種擺明了就是重複作業的流程，就該來找找是否有自動化工具可用了[註3]！ Adobe Xd 有 World Ready 、 Data Populator 和 Google Sheets 等等外掛、 Figma 則有 Translator 等套件，都能直接套入預覽用或是翻譯好的文案。對前端工程師而言， Google Sheets 也是超實用工具，特有的 `=GOOGLETRANSLATE` 函數，可以進行大量 UI 元件的翻譯，適合作為初步的頁面文案提供給翻譯人員檢視潤稿。

#### 三、不同語系的閱讀方向差異
各位中文母語人士肯定都很熟悉由上而下、由右至左的直書排版，雖然在網頁上相對少見[註4]，但在電子書和紙本書籍雜誌卻是非常常見的，這是中日韓語系獨有的文字排列方式，除非是只有中日韓語系的網站才會使用，在此暫不討論。不過，你知道阿拉伯文、希伯來文都是由右至左閱讀的嗎？

這邊就要提到「網頁方向」（ direction ）了，網頁方向可分為 left-to-right （LTR）和 right-to-left （RTL）兩種，在 CSS 中可用 `direction` 來設定。用最最簡單的描述概括，就是在 HTML 結構中撰寫 1-2-3 這樣的內容，在一般 LTR 網頁中檢視就會由左至右看到 1-2-3 靠左對齊的畫面，若將網頁流向改為 RTL ，在頁面中看到的順序就會變為 3-2-1 且靠右對齊（閱讀順序左右相反）。當然，實際情況比這複雜得多[註5]，但我們由此可知網頁的排版流向很重要，這也是為何在前端排版時，如非必要盡量少用 absolute 定位 ，因為使用 absolute 定位的元件會無視網頁方向，也就無法單純依靠改變方向來變更該元素的位置。

[Google 搜尋頁面， LTR 方向（繁體中文）]
[Google 搜尋頁面， RTL 方向（阿拉伯文）]

#### 四、其他延伸細節
- 不要在圖片裡放文字：有看過系列文章第一篇可能已經知道了：不要把需要時常修改替換的文案放在圖上！這也適用於多語系網站的情境，就算對設計師來說同一張圖出 30 種語系版本只是小事一樁，在網站裡要管理這一堆圖也是非常可怕的事。
- 語系選項的設計：如果網頁語系規模不大，可以單純使用語言當選項，如「English、Français、中文」（注意文字要以對應語言顯示）。但若是全球性網站，只使用語言名稱就稍顯不足，身為中文使用者應該有深刻體會，同樣語言在不同國家會有不同的用法與意義（香港繁中、台灣繁中；美國、英國、加拿大、澳洲的英文…）；相對地，同一個國家內也有使用不同語言的可能（比利時官方語言就有三種）。因此理想的呈現方式會是「區域＋語言」的組合。

[AWS 語系選項截圖（相對簡單）]
[ASUS 語系選項截圖（相對複雜）]

- 注意避免 input 元件與文字夾雜的情形，受語法順序不同影響，會導致難以翻譯。
- 日期、幣值、符號的表現方式不同：例如月份的中文與英文完整文字長度差距頗大、不同國家有不同的時間表示方式……等等。

以上，系列文章暫時到此結束，希望閱讀完能帶給你一些收穫！

---

[註1]　可參考這篇超棒的整理：[《Language support - Material Design》](https://material.io/design/typography/language-support.html)

[註2]　關於欄寬的說明，則可參考：[《Understanding typography - Material Design》](https://material.io/design/typography/understanding-typography.html#readability)

[註3]　這篇文章介紹 Adobe Xd 外掛和 Google Sheets 翻譯函數，解決你一切翻譯煩惱～[《你給我翻譯翻譯，什麼叫用 Adobe Xd 設計多國語系網站》](https://medium.com/rar-design/%E4%BD%A0%E7%B5%A6%E6%88%91%E7%BF%BB%E8%AD%AF%E7%BF%BB%E8%AD%AF-%E4%BB%80%E9%BA%BC%E5%8F%AB%E7%94%A8-adobe-xd-%E8%A8%AD%E8%A8%88%E5%A4%9A%E5%9C%8B%E8%AA%9E%E7%B3%BB%E7%B6%B2%E7%AB%99-b54d0344e428)

[註4]　日本甚至有專門的協會（[縦書きWeb普及委員会](http://tategaki.github.io/)）推廣網頁直書文字，還舉辦了 2015-2017 三屆比賽，可以從得獎網站看到縱書網站的各種可能性。

[註5]　非常詳盡地說明頁面方向由 LTR 轉為 RTL 時會有哪些差異：[《Bidirectionality - Material Design》](https://material.io/design/usability/bidirectionality.html)