相信認真做過(guò)網(wǎng)頁(yè)設計（Web Design），或者關(guān)注過(guò)頁(yè)面設計的同行都對“空格”不陌生�！翱崭瘛睂儆谝活�(lèi)細節，很容易被忽略，但又比較影響效果，更麻煩是很不好控制。此問(wèn)題總結的想法，來(lái)......

相信認真做過(guò)網(wǎng)頁(yè)設計（Web Design），或者關(guān)注過(guò)頁(yè)面設計的同行都對“空格”不陌生�！翱崭瘛睂儆谝活�(lèi)細節，很容易被忽略，但又比較影響效果，更麻煩是很不好控制。此問(wèn)題總結的想法，來(lái)自“知乎”上梁海的提問(wèn)，以及對他提供專(zhuān)業(yè)答案的反思和總結。

就所提問(wèn)題而言，我目前還是堅定的“不空格”派系。我不否認“空格”后效果的提升，但不能完全解決問(wèn)題，有利有弊。既然效果并不十分理想，再綜合工作量、可維護性而言，我認為意義實(shí)在有限�；蛘吒�悲觀(guān)的認為，要想達到完美的效果，必須手動(dòng)調整，沒(méi)有完美的可控程序邏輯。道理如同圖書(shū)排版，真正排版出色的好書(shū)，都是一頁(yè)頁(yè)手工定制的，排版效果必須跟著(zhù)內容走。

這個(gè)問(wèn)題在專(zhuān)業(yè)網(wǎng)頁(yè)設計上講，我認為可歸類(lèi)于“內容排版”，與用戶(hù)體驗中“可讀性”直接相關(guān)。平面設計里好像叫“字體排印”，我認為同樣應該用“可讀性”指標來(lái)衡量質(zhì)量。但受限于網(wǎng)頁(yè)構成原理，我認為在網(wǎng)頁(yè)中，空格影響的不僅有“內容排版”，還有“頁(yè)面版式”問(wèn)題也很典型�！皟热菖虐妗敝饕�指內容層面，“頁(yè)面版式”主要指結構層面，下邊分開(kāi)來(lái)討論。

內容排版的空格

目前互聯(lián)網(wǎng)上內容里，中英文混雜已經(jīng)非常普遍，并且可以放大理解為“中西文混排（自己基本只用英文，所以后續都寫(xiě)“中英文混排”）”。不僅僅是英文單詞的使用，各種英文術(shù)語(yǔ)和縮寫(xiě)已經(jīng)完全融入了普通人生活。尤其在信息爆炸的互聯(lián)網(wǎng)上，此問(wèn)題表現的比較突出。

我最早看到和自己寫(xiě)的中英文內容，全部都是連著(zhù)寫(xiě)，不會(huì )考慮加空格。后來(lái)是在一些很專(zhuān)業(yè)的網(wǎng)站上發(fā)現，原來(lái)還有在中文、英文之間加空格的說(shuō)法，尤其翻譯過(guò)來(lái)的技術(shù)參考里。很容易想到，這種寫(xiě)法是為了更好的區別不同語(yǔ)言，以免造成閱讀上的“粘連”障礙，加空格后確實(shí)極大提升了“可讀性”。（梁海更專(zhuān)業(yè)的觀(guān)點(diǎn)原文“文字的交界處應該是個(gè)盡量平滑的過(guò)渡，盡量滿(mǎn)足雙方文字的需求，并且讓文本的節奏盡量平穩�！保�

但同時(shí)我發(fā)現，影響“中英文混排”效果的原因其實(shí)很多，在網(wǎng)頁(yè)設計中不僅僅只有“加空格”手段來(lái)優(yōu)化。比如更改字體，因為在計算機系統里英文的選擇其實(shí)很多，不比中文“宋體”的單調。不同的英文字體，不僅對比中文的大小比例不一樣，而且前后粘連的距離也不一樣。

2003年前后，我最常用的字體是Arial， Tahoma， Verdana，對比同樣字號可以發(fā)現，Arial最小而Verdana最大。于是在我們當時(shí)的理解里，中英文混排最好用Verdana，如果沒(méi)記錯當時(shí)的微軟官方網(wǎng)站用的就是，我特地到一些外企中文網(wǎng)站驗證過(guò)。

2005年，我開(kāi)始大量閱讀Blog后，我發(fā)現Wordpress默認風(fēng)格的“中英文混排”效果不錯，查后得知人家用的是Lucida Grande字體，此后我開(kāi)始有意識的關(guān)注“中英文混排”效果不錯的個(gè)人Blog，以便提取“可讀性”更好的字體，這個(gè)事情如要自己實(shí)驗會(huì )很麻煩。但請注意，當時(shí)Wordpress其實(shí)沒(méi)多少人用，甚至還沒(méi)有Movable Type的用戶(hù)多。

其實(shí)一開(kāi)始我也嘗試過(guò)給英文兩邊加空格，但確實(shí)麻煩。而且有個(gè)細節不知是否有人關(guān)注過(guò)，某些字體（具體哪些字體未深入測試）定義“空格”的寬度會(huì )因左側是中文或者英文而不一樣。也就是說(shuō)，給一個(gè)單詞兩邊加上空格后，會(huì )出現左邊寬、右邊窄的效果，這點(diǎn)我也無(wú)法接受的。而在有了通過(guò)“字體”解決的思維方式后，更完全拋棄了“加空格”的想法。再往后，又先后認識了Helvetica， Calibri等等優(yōu)秀字體，所以用起來(lái)還算綽綽有余。

單就字體而言，學(xué)問(wèn)很大，還有清晰度、襯線(xiàn)等方面的可讀性影響因素，而且在不同客戶(hù)端瀏覽器下表現也可能有差異。比如我知道不同字體的下劃線(xiàn)也會(huì )很影響可讀性，Tahoma的下劃線(xiàn)就是緊挨文字的。這里只談空格，我也不是專(zhuān)業(yè)搞研究的，所有結論均出于實(shí)踐經(jīng)驗。目前我個(gè)人網(wǎng)站上用的就是Calibri，個(gè)人博客上還是Lucida Grande，我認為混排效果都不錯。

圖只是舉例示意，不同字號、瀏覽器等客觀(guān)條件都可能影響效果。

頁(yè)面版式的空格

結構層面的空格主要在HTML結構代碼里，很多時(shí)候我們需要針對不同標記的內容做間隔。之前我的做法，都是自然空格，就是在HTML代碼里敲入一個(gè)空格。但慢慢我發(fā)現，第一不易做像素級的精確控制，第二不同客戶(hù)端下的空格寬度解析不一致，這在做跨瀏覽器兼容時(shí)很重要。而且我很快意識到，代碼里做空格不符合“結構、表現”分離的原則。于是，后來(lái)我把所有需要“空格”效果的內容全部用CSS的margin定義解決，想空就空，想空多少隨時(shí)可以改。

很快問(wèn)題又來(lái)了，通常高保真原型里沒(méi)有的空格，但研發(fā)工程師做的測試原型里卻有。這是因為在客戶(hù)端代碼里，換行就算一個(gè)空格。工程師在做應用層開(kāi)發(fā)時(shí)，往往不那么注意，通常為了看代碼方便而隨意空行。還有類(lèi)情況是可能使用了某種控件或者特殊語(yǔ)句，甚至還有查不出來(lái)的情況，這這種事我也碰到不少。

當然，這種雞毛蒜皮的細節問(wèn)題，往往不會(huì )放多高的優(yōu)先級，但多了確實(shí)影響效果。其實(shí)也不是沒(méi)有解決辦法，可以通過(guò)CSS語(yǔ)句word-spacing：-3px;來(lái)定義讓空格失效，通過(guò)局部控制靈活應對，最近試的效果還是挺不錯。

回到前文“內容排版”的問(wèn)題，如梁海所提，通過(guò)結構層處理統一為英文加上標記，如<span lang=”en”>Manual of Style</span>，我認為是不可取的。第一太過(guò)麻煩，第二理論上可以用JS直接判斷中英文�？偟膩�(lái)說(shuō)，我認為單獨控制“內容排版”中的英文都有點(diǎn)多此一舉。

dt內各內容標記之間無(wú)空格，用margin精確控制。