做移動(dòng)設(shè)計(jì)的同學(xué)逛尚，不管是原生app或者web app垄惧，應(yīng)該對(duì)字體字號(hào)都是很頭痛的問題。根本原因是绰寞，我們用唯一分辨率的電腦到逊，設(shè)計(jì)各個(gè)不同尺寸大小分辨率的設(shè)備，那簡直要瘋掉了滤钱。
但不要著急觉壶，我們先來理解一下一些名詞：
我們一般會(huì)碰到的度量單位主要有：dpi、ppi件缸、dp铜靶、sp、px停团、pt旷坦、in。其中佑稠，px應(yīng)該各位最熟悉的單位秒梅，也是我們主要使用的photoshop或者axure等工具用的度量單位，而它在移動(dòng)端時(shí)舌胶，的確已經(jīng)“過時(shí)”了捆蜀。但不要著急把它丟掉，因?yàn)樗墙酉聛矸浅Ｖ匾膿Q算單位（所有手機(jī)參數(shù)還是用px在表達(dá)）幔嫂。
dpi和ppi這兩個(gè)是密度單位辆它，不是度量單位，而這兩個(gè)恰恰是我們換算中重要的分母履恩。簡單理解一下：
ppi (pixels per inch)：圖像分辨率 （在圖像中锰茉，每英寸所包含的像素?cái)?shù)目）
dpi (dots per inch)： 打印分辨率 （每英寸所能打印的點(diǎn)數(shù)，即打印精度）
dpi主要應(yīng)用于輸出切心，重點(diǎn)是打印設(shè)備上飒筑。
我們?cè)谝苿?dòng)應(yīng)用中提到ppi和dpi其實(shí)都一樣（概念不同，但對(duì)設(shè)計(jì)來講沒有特別需要深入了解）绽昏，所以我們先忽略掉dpi协屡。而ppi的運(yùn)算方式是：
PPI = √（長度像素?cái)?shù)2 + 寬度像素?cái)?shù)2） / 屏幕對(duì)角線英寸數(shù)
舉個(gè)簡單的栗子，iphone5的ppi是多少全谤？ppi=√（1136px2 + 640px2）/4 in=326ppi（視網(wǎng)膜Retina屏）.這樣大家就能夠明白ppi和px的關(guān)系肤晓。
這里還提到in（英寸）這個(gè)詞，這個(gè)非常重要，因?yàn)楝F(xiàn)實(shí)中我們經(jīng)常提到4英寸手機(jī)或者5.5英寸大屏手機(jī)补憾，而這個(gè)尺寸是用戶真正感受到的物理大小漫萄，所有提到不同尺寸的屏幕不僅僅是分辨率或者像素，而更多的是英寸盈匾。
好卷胯，現(xiàn)在關(guān)鍵的來了，dp威酒、sp、pt挺峡，是我們?cè)O(shè)計(jì)中的關(guān)鍵葵孤。
dp：Density-independent pixels，以160PPI屏幕為標(biāo)準(zhǔn)橱赠，則1dp=1px尤仍，dp和px的換算公式 ：
dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px狭姨。
sp：Scale-independent pixels宰啦，它是安卓的字體單位，以160PPI屏幕為標(biāo)準(zhǔn)饼拍，當(dāng)字體大小為 100%時(shí)赡模， 1sp=1px。
sp 與 px 的換算公式：sp*ppi/160 = px
是不是看起來dp和sp一樣师抄，在Android設(shè)計(jì)原則中漓柑，有提到這兩個(gè)單位，他建議文字的尺寸一律用sp單位叨吮，非文字的尺寸一律使用dp單位辆布。例如textSize="16sp"、layout_width="60dp"茶鉴。
為什么要把sp和dp代替px锋玲？最簡單的原因是他們不會(huì)因?yàn)閜pi的變化而變化，在相同物理尺寸和不同ppi下涵叮，他們呈現(xiàn)的高度大小是相同惭蹂。也就是說更接近物理呈現(xiàn)，而px則不行围肥。
但問題來了剿干，ps或者axure里面沒有sp或者dp這個(gè)選項(xiàng)啊，怎么辦穆刻？看到網(wǎng)上有人說用pt去替換px（pt是物理高度置尔，1in=72pt）。補(bǔ)充一下自己推算的pt轉(zhuǎn)換px的公式氢伟，不一定對(duì)榜轿，可以參考：例如9pt幽歼，再96dpi下，那么就是9 * 1/72 * 96 =12px谬盐。而在72ppi下甸私，9pt=9px。
我再來做個(gè)小小的實(shí)驗(yàn)：
1飞傀、先了解清楚你筆記本的ppi皇型，比如我的macbook air是11.6英寸，1366 x 768分辨率砸烦，那么它的ppi就是135ppi弃鸦。
2、然后新建一個(gè)頁面幢痘，輸入的ppi值就是你電腦的ppi值唬格。我們先來看看不同ppi值在電腦上呈現(xiàn)的字體大小是怎么樣的：
我用的都是arial 14點(diǎn)（注：專家指正這里不是px而是pt，點(diǎn)）的字體颜说，但在320ppi购岗、160ppi、135ppi（我自己的）以及標(biāo)準(zhǔn)72ppi下的大小门粪，截然不同喊积。
好，我們?cè)賮砜纯葱瑁陔娔X上直接截圖web頁之后對(duì)比的效果：
你會(huì)驚訝的發(fā)現(xiàn)注服，只有72ppi是正常的，其他字體都不對(duì)了措近，因?yàn)樵镜膚eb設(shè)計(jì)是不用考慮dp溶弟、sp或者ppi的，它是直接px作為物理單位的瞭郑，而點(diǎn)在72ppi下（1pt x 1/72 x 72dpi=1px）是正常顯示的辜御。所以我們以前做web的時(shí)候根本不用擔(dān)心自己的設(shè)計(jì)在別人電腦上看起來會(huì)很大或很小。當(dāng)然其實(shí)像firefox是用96dpi屈张，也就是9pt=12px擒权。
但我再截一下用iphone訪問web之后的圖：
好吧，這時(shí)候阁谆，你就發(fā)現(xiàn)72ppi是見鬼了碳抄，因?yàn)檫@個(gè)字體在手機(jī)上看到完全地小了，所以做移動(dòng)設(shè)計(jì)不要傻乎乎地還用72ppi了场绿，不然你很難判斷效果剖效。（當(dāng)然你也可以借助我之前提到的同屏工具來映像到移動(dòng)設(shè)備上查看效果，但這個(gè)其實(shí)會(huì)很麻煩很麻煩很麻煩...）
但是到底是選160ppi還是135ppi呢？如果選了135ppi那在別人的電腦上會(huì)怎么樣呢璧尸？是不是又要重新調(diào)咒林？其實(shí)不用，我借用另外一臺(tái)Retina的macbook pro做了相同的測(cè)試爷光，你會(huì)發(fā)現(xiàn)垫竞，其實(shí)和屏幕ppi無關(guān)，和你在ps里設(shè)定的分辨率有關(guān)蛀序。
[補(bǔ)充欢瞪，有位專家指出我的不對(duì)，就是在點(diǎn)和px上我搞錯(cuò)了徐裸，我又嘗試了一下引有，如果是px的話，不同ppi下字體大小是不變的倦逐，而點(diǎn)（pt）的話會(huì)有變化。
并且如果是用pt來代替px的話宫补，為了整除方便檬姥，那么ppi一定要設(shè)置成72的倍數(shù)，比如144ppi粉怕，上圖里面160ppi則會(huì)除不盡健民，所以上圖其實(shí)160ppi的字體還是和截圖字體有些許差異。]
然后有專家提出贫贝，iOS下是用pt作為字體單位秉犹，而Android是以sp作為字體單位，而且web app還是以px作為字體單位稚晚。怎么樣讓設(shè)計(jì)和輸出單位是一致的崇堵？我之前給出的解決方案并不十分嚴(yán)謹(jǐn)易懂，所以我重新編輯了一下客燕。
為了求證移動(dòng)字號(hào)的問題鸳劳，跑了一圈同事，最后只能暫時(shí)得出一些“不一定正確”的結(jié)論：
1也搓、字號(hào)行業(yè)標(biāo)準(zhǔn)幾乎沒有赏廓，不像web一樣，宋體12px傍妒、14px這樣很清楚幔摸。我唯一找到的只有Android的設(shè)計(jì)建議：
圖中原作者還換算了一下在240ppi下對(duì)應(yīng)的px值。
而我問了一圈同事颤练，基本上現(xiàn)在設(shè)定字號(hào)都是憑感覺做事的既忆。當(dāng)然你也可以參考Android這個(gè)標(biāo)準(zhǔn)。
2、如何在電腦上快速預(yù)覽高清內(nèi)容是否排版合理尿贫，我想到最簡單的一點(diǎn)就是縮放psd电媳，縮放的比例很關(guān)鍵，要達(dá)到物理尺寸庆亡，首先你得知道你電腦的分辨率匾乓，我的分辨率是135ppi，如果要看分辨率是326的iphone上的效果又谋，就縮小到135/326≈41.4%拼缝，你就會(huì)發(fā)現(xiàn)物理尺寸非常接近≌煤ィ可以看看一些排版上的問題咧七。當(dāng)然你也可以裝一些工具來達(dá)到更好的效果。
3任斋、怎么和開發(fā)溝通你的字體大屑套琛？我也沒有特別好的辦法废酷，就簡單分成3塊來說：
iOS瘟檩，你設(shè)計(jì)的時(shí)候字體記得用“點(diǎn)”，然后ps設(shè)定分辨率用標(biāo)準(zhǔn)的72ppi即可澈蟆，因?yàn)閾?jù)同事說墨辛，這樣下的pt值是準(zhǔn)確的，或者說iOS自動(dòng)會(huì)轉(zhuǎn)換這個(gè)值趴俘。具體也需要大家操作了才知道睹簇。而這個(gè)分辨率下1pt=1px，我簡單換算了一下sp->px->pt的尺寸：
12sp=24.45px=24.45pt寥闪；14sp=28.52px=28.52pt太惠；18sp=36.67px=36.67pt；22sp=44.88px=44.88pt疲憋；
但這個(gè)小數(shù)點(diǎn)實(shí)在難受垛叨，所以四舍五入取整數(shù)，并且為了保證可以整除柜某，那么可以是24pt嗽元、28pt、36pt喂击、44pt剂癌。
Android，你就用標(biāo)準(zhǔn)sp就好了翰绊，當(dāng)然其他圖片等尺寸你可以用dp來表述佩谷。
Web app旁壮，這個(gè)我也找不到答案，因?yàn)閃eb app還會(huì)涉及到響應(yīng)式設(shè)計(jì)谐檀，而且前端會(huì)用em去表示字體比例抡谐。所以同樣，如果你用72ppi分辨率做的話桐猬，直接可以把對(duì)應(yīng)的字號(hào)告訴開發(fā)就好了麦撵，當(dāng)然最好你所用到的字號(hào)是倍數(shù)關(guān)系，最小倍數(shù)是0.25溃肪，這樣用em去做比例的時(shí)候會(huì)更容易些免胃。比如12px、16px惫撰、24px羔沙、32px這樣。
有關(guān)字體字號(hào)的研究已經(jīng)有同事在做厨钻，以后有結(jié)論了再和大家分享扼雏。
原網(wǎng)址：https://zhuanlan.zhihu.com/zhezhexiong/19565895
