字型的研究•上篇
7個問題 + 1個建議
先感謝一下提到這些問題的同學，讓我有動力完成這次的“長篇大論”。字型的研究分成上下兩篇，此為上篇。設計中經常要和字型打交道，今天來探索下那些讓你糾結過的字型問題。
研究方法與研究工具
科學的研究方法一般包括7個步驟：1。提出問題 2。猜想與假設 3。制定計劃與設計實驗 4。進行實驗與收集資料 5。分析與論證 6。反思與評估 7。表達與交流。
要回答剛提出的部分問題，必須需要進行一些實驗，我開發了一個用來進行“字型”實驗的工具，它是一款Android的應用程式，當我們在Android裝置上執行它，可以看到如下介面。
第一個介面顯示了不同字號的開發效果，黑色背景是文字所佔用的實際區域。第二個介面可以對文字內容、字號、字號單位、行間距以及行間距倍數進行自定義，透過自定義引數我們可以進行其他的字型試驗。
在
UI設計科學派
的微信訂閱號中提供了字型實驗工具的下載，文字回覆“字型的研究”即可獲得下載連結（
字型實驗工具會不定期更新，請在訂閱號中獲取最新下載連結
）。
問題1 iOS與android預設字型的進化過程
這個問題比較簡單，應該有很多設計師都可以回答，但是出於科學研究的完整性，我還是要再重複一遍，並且最後大家會發現，
越是簡單的問題越可能藏著意料之外的情況
。
Roboto字型有3種版本？對！從Android系統引入Roboto字型作為預設英文字型之後，已經最佳化過兩次，如果注意不到這個變化，那麼接下來的研究就可能得出完全相反的結論。接下來我們要看一下這些字型樣式，示例中我以每種字型的Regular或Light樣式進行展示。
對比三版Roboto，會發現第一二版本變化較小，最新版的設計變化較大。筆畫越來越流暢，風格上越來越骨感和簡約。字母和數字都有非常細緻的最佳化，下面是放大後的數字對比圖，大家可以感受一下。
現在已經知道了
兩個常見手機系統隨著版本的迭代都採用了哪些字型
，也知道了
同一款字型會不斷地變化
。這個結論對我們後續的研究非常重要，為了保證設計的嚴謹性，
必須要清楚自己使用的測試裝置採用了什麼字型，並在設計過程中也採用完全一致的字型
。
問題2 px、dp和sp之間有何關係？
px是我們在PS等設計軟體中最常用到的單位，1px就是螢幕上的1畫素。我們可以在PS中採用px作為字型字號單位。如果你的軟體中看到字號單位是“點”，沒有關係，只要畫布解析度為72畫素/英寸，1“點”= 1px。如果你想換成px，可以這樣操作。
dp也會經常接觸，在iOS中，這個單位叫做“點”。dp是個物理單位，dp數量 × 螢幕密度 = px數量，可以簡單理解為“
螢幕越細膩，1dp所包含的px就越多
”。
常見裝置的螢幕密度：
iOS陣營
iPhone5s~iPhone7：2x
iPhone6p~iPhone7p：3x
大部分的ipad：2x
Android陣營
hdpi裝置：1。5x（代表機型為nexus S，4英寸，解析度為800×480）
xhdpi裝置：2x（代表機型為三星 GALAXY SIII，4。8英寸，解析度為1280×720）
xxhdpi裝置：3x（代表機型為nexus 5，4。95英寸，解析度為1920×1080）
xxxhdpi裝置：3。5x（代表機型為nexus 6P，5。7英寸，解析度為2550×1440）
舉個例子：以nexus 5來做設計效果，我將文字的大小設計成42px，那麼開發同學就要寫成14dp（42 ÷ 3 ）。
最後是sp，一般情況下1sp = 1dp，但是當用戶調整過手機的預設字型大小後，採用sp為單位的文字會根據調整比例進行縮放。所以Android官方強烈建議APP內的字型採用sp為單位來保證應用的易用性。
在調大系統字號前後，分別用字型實驗工具生成了16sp和16dp大小的字型預覽效果。從上圖可以看到採用sp為單位的字型，會隨著系統字型變大而變大。
設計過程中，當字型採用sp為單位的時候，應該提前考慮到文字隨系統進行縮放之後的適配效果，今天不會對此話題進行講解，後續會在
UI的骨骼
的章節中慢慢探索。
問題3 同樣的字號，PS和開發效果是否一樣？
這可能是大家最關心的問題。文字的效果還要進一步分解為：視覺大小、粗細、字間距以及行間距。將字型實驗工具的截圖放在PS內進行一下對比，測試裝置為 nexus 5，系統版本為4。4。4，PS中所用字型為第二版Roboto和DroidSansFallback。
紅色文字是在PS裡寫出來的，字號為60px（即20dp），透過實驗可以得到如下結論：
1。 ps中的文字視覺大小和開發效果是一致的，粗細也一致。
2。 英文Roboto字型的字間距會有一些差距，在PS中的字間距稍小。
3。 中文DroidSansFallbac字型的字間距保持一致。
4。 ps的預設行間距差與開發效果差距較大，必須手動調整才能保持一致。
整理一下結論：
同樣字號下，PS與開發效果幾乎保持一致，但行間距需要單獨調整
。行間距會在“問題6”中進行研究。
科學的研究方法還需要我們再次驗證已發現的結論，下面是用另外一臺系統版本為6。0的nexus 5手機進行的驗證結果。
在Android 6。0系統上進行的測試，得出的結論基本與Android4。4。4系統是一致的，證明剛才的結論是正確的。
未完待續
字型的研究 •上篇
就先討論這3個問題，剩餘問題會在下篇繼續研究。
相關連結
字型的研究 •下篇