可能你聽過這說法，好的字型是**的，不過更準確來說，應該是好的字型讓閱讀行為毫不費力。當視線掠過一行文字時，它是跳躍前進的，我們稱之為掃視。你讀的不是字母，甚至不是詞語，而是文字某部分的影像，大腦會補上它預期的內容。如果超出大腦預料，它會促使眼睛回去核實假設十分正確。通過在字裡行間創造平順的視覺流動，好的字型極度減輕了眼睛的負擔。對任何字型工作者而言，在移動裝置上要面臨與生俱來的挑戰：空間有限，環境光通常比較微弱。不過將已經用於web端的技巧稍加調整，我們就可以提公升移動裝置的易讀性。
1. 留足空間
與普遍觀點恰好相反，字型並非螢幕上彎彎曲曲的線條排列；它主要在於周圍和相互間的空間。字母本身對字型的影響，與構成它的空間相比，要小得多。要理解這一點，了解字型從何而來很有幫助：字母o（還有b、c、p等等）中間的圓孔被稱作「凹槽」。在最原始的印刷機上，鉛字由金屬雕刻而成，這些凹槽來自雕刻成型、排列在盤中的金屬活字。第乙個字型設計師所處理的模具，實際上並不能用於印刷。字母本身對字型的影響，與構成它的空間相比，要小得多。
談到層次時，我們通常指的是h1到p，有時候還會到h6。但另外還有一種層次在影響著行或段落的視覺流，這是特殊的層次：字母間距小於字間距，字間距小於行間距，以此類推。要在移動端創造最佳易讀性，尤其要注意這些特殊層次，這些格式塔式的詞語、行、段落的文字組合，在自然光環境下同樣至關重要。
2. 行寬
行寬是一行文字的長度。或者確切的說，是一行文字的理想長度，因為很難讓每一行都精確吻合。眾所周知，舒適閱讀的理想行寬是65個字元左右。行寬產生的物理長度，取決於字型的設計、字間距（見下文）和你使用的具體文字。本文開篇的65個字元（譯者注：此處請參見英文原文），用pt serif字型是26.875em寬，用open sans是28.4375em寬，用ubuntu字型是27.3125em寬。如果再加入斜體、大小寫和一大堆其他字型細節，還會有更大的差異。在桌面端瀏覽器中，65個字元很難觸及邊緣，但在移動裝置上，65個字元（如果至少大到看得清）會超出瀏覽器的邊界。所以，在移動裝置上，你必須得縮減行寬。移動端並沒有普遍認可的行寬標準。不過傳統上，報紙或雜誌上每乙個窄列都會趨向於39個字元。鑑於這個理想行寬已經經歷了數個世紀的考驗，它在移動端字型上也運轉良好。
3. 寬鬆行距、緊湊行距
行距是行之間的空間，行距太緊湊，會讓視線難以從行尾掃視到下一行首。行距太寬鬆，字間距會開始形成佇列，產生了我們通常意義上的河流，阻斷了行的視覺流。行距的標準通常是1.4em，但以我的經驗，這對於螢幕來說太緊湊了：在螢幕上表現良好的字型都有乙個關鍵特徵——大的凹槽，大凹槽需要更大一些的行距來保持空間層次。反過來，更短的行寬需要更小的行距。所以你可能需要將桌面端的行距設得寬鬆點，同時記得將移動端的設定得緊湊些。
4. 找到最佳狀態
所有字型至少都有一種最佳狀態，在螢幕上展現最佳的尺寸，還有在瀏覽器中最能保持字形的抗鋸齒選項。最佳狀態下，多數筆畫通常都能排列在畫素網格中——畫素字型，如果你還記得的話，那些字型僅僅在字型大小調整到最佳狀態下才有效。
將字型設為最佳狀態能形成更強烈的對比。為移動端設計時，對比尤其重要，因為戶外的強光可能分散注意。你會發現，微調行距會使每行脫離完美畫素匹配。我覺得，在移動裝置螢幕上，對比的重要性勝過行距。所以如果你不得不在行距上妥協，來保持每行契合畫素網格，那就這麼做吧。通常設計師通過基線網格來排列文字。但在移動裝置上，我們需要使用x高度來代替（x高度顧名思義，就是小寫字母x的高度）。從易讀性研究中，我們知道大腦識別的是文字頂部，而不是底部。所以要成就更加平順的視覺流，我們要確保字元頂部最契合畫素網格。
5. 不要忽視起伏邊
起伏邊是一段文字的邊緣。你讀的多數內容是居左對齊的（至少對於拉丁語系而言），導致右邊沿參差不齊。當視線從行尾跳至下一行首時，大腦最好要能判斷出下一次跳躍的角度和距離。把每次跳躍都想象成跑過跳板，如果間距保持一致，就會快很多。因此，文字左側邊緣應該是平的，每行從同乙個地方開始（對於從右至左的語言，恰好相反）。因此你絕不應該將兩三行以上的文字居中對齊。通常文字會設定成兩端對齊，這意味著每行文字所佔空間相等，所以兩側都不會有起伏邊。我懷疑兩端對齊的流行和響應式設計有關，它教設計師們以塊狀形態思考。兩端對齊的文字產生的留白不統一。最糟的情況會導致一行中只有幾個字，相當不協調。更窄的行寬會加重兩端對齊的問題，所以兩端對齊的文字在移動端是難以閱讀的。如果整潔真的非常重要，那麼使用連字符號來讓起伏邊更平滑，絕不能在移動端使用兩端對齊。文字右側是起伏邊在移動端還有一項額外好處：人們通常在易分心的場合閱讀文字，讀者視線頻繁地從文字上移開——檢視站名，或是接**。起伏邊創造了乙個隨機形狀，讓右撇子的視線可以通過重讀最少的文字，回到剛才的位置。
6. 減少反差
增強文字與背景對比的同時，我們也要減少不同層次文字間的反差。在移動端，實際可見的文字更少，所以反差被放大了。其原因是我們的大腦基於環境來判斷重要性。在桌面端，標題可能是正文本號的兩倍甚至三倍，因為螢幕上有更多文字，所以這是有效的。在移動端，實際可見的文字更少，所以反差被放大了。多數設計師使用斐波那契數列式的字型大小組合。在移動端，應該縮小比率來減少字型大小間的反差。比如，如果你使用**比例1.618與字型大小相乘。在移動端，應該用更小的比例1.382來替代。桌面端螢幕比移動端容許更誇張的字型大小縮放。
7. 按比例調整字間距
為移動端調整字型大小時，我們要意識到字間距發生了必要的變化。（先說一句，不應該調整固有字距。固有字距是兩個字母相互組合時的距離，使它們的間距與其他字母間距在視覺上統一。創作字型時，就納入了固有字距的考量，這個過程可能要花上數月。如果你選用了一款專業的字型，它的固有字距就是合適的，如果你覺得不對，請換乙個字型。）字間距並不是固有字距。字間距是字型中應用在所有字元上的間距。通常你也不應該調整字間距。大字型大小是個例外，拿標題和小號文字（比如腳注）舉例。大號文字需要減少字間距，小號文字需要增加字間距。前者是考慮到分組，後者則是為了增強對比。如果你在調整標題，或是用了通常字間距緊密的藝術字型，縮小時可能就需要把字間距放開一點。
總結字型是一門工藝，設計師終其一生都在精心打磨。的確如此，因為每個文字、每種字型和每項技術都帶來了新的挑戰。沒有一成不變的普適規律。假如你追求易讀性，要牢記三條原則：行內的視覺流要平順，空間層級要清晰，要有足夠的對比。這尤其適用於移動端頁面。沒有不可撼動的規則，全憑你雙眼決斷。不過本文的指南可以作為理想的出發點，讓你在移動裝置上優美地排列文字。
大連中鈺睿泓與你分享精品文章
移動端字型設定
body ios 4.0 ios 9以下系統已經非常少 使用英文本型 helvetica neue，之前的ios版本降級使用 helvetica。中文字型設定為華文黑體stheiti。微軟雅黑是為了相容win系統，畢竟視網膜解析度的win系統用simsun是非常醜陋的，可以用4k屏 windows ...
移動端如何設定字型
說起移動端字型，就會想到它的布局方式以及布局單位，那麼以下就是幾種布局 布局方式 一 靜態布局 static layout 即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。1 布局特點 不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布...
移動端字型設定最佳實踐
body ios 4.0 ios 9以下系統已經非常少 使用英文本型 helvetica neue，之前的ios版本降級使用 helvetica。中文字型設定為華文黑體stheiti。微軟雅黑是為了相容win系統，畢竟視網膜解析度的win系統用simsun是非常醜陋的，可以用4k屏 windowns...