如何在有限邊距時使用字型

中英文夾雜的文章在採用字型時通常會先預設英文字型, 接著才使用中文字型, 這樣就可以使用不同的字型組合. 這是在 CSS 編輯時已經給予適當字距、行高才會取得協調.

但是有一種狀況卻應該反其道而行. 那就是在窄小空間內的選單型態, 因為不同字型的字高起始在設計上都不同. 設想看看.. 在有限狹小的選單格子中擺下不同字型會呈現高低不平整的不協調感; 尤其是中英文同時使用時. 除非你真的找到完美的中英文字型組合, 在高度、字距、比例上猶如同一種字型. 否則我還是建議當選單會夾雜中英文使用時, 還是只設定單一的中文字型當作預設字型為宜.

補充:
有的讀者看不明白, 故修改我目前的側欄選單當作示範.
請先看第一張圖, 小鳥 Twitter 的部份. 這是 CSS 以英文字型在前; 中文字型在後, 一般原則下顯示出來的中英文並用的選單. 可以看到英文和中文在水平線上有著字型的高低差.
http://goo.gl/kFJJmN

第二張圖是 CSS 以中文在前; 英文在後的組合, 看起來比較協調. 新近設計發布的中文字體會協調些, 但是例如標楷體的英文比例就有點糟糕.
* 中文在前相當於中文為唯一顯示的字型, 因中文字型設計會連同英文、符號一起設計. (至於設計得好不好看又是另一回事)
http://goo.gl/qQ0Ziq

或許有讀者感覺第一張圖並沒有很突兀. 但是設想:一排選單; 幾個按鈕, 中文、英文、中文、英文... 整排看起來高高低低的實在不太美觀. 尤其選用某些風格化的英文字型, 由於字高比例設計不同, 夾雜其中的中文看起來會生不如死!  不信嗎? 請看第三張圖:
http://goo.gl/p1dIyL
Shared publiclyView activity