真不是兄弟：像素跟點大不同－itest8的部落格

真不是兄弟：像素跟點大不同

產品開發的分工是一件挑戰團隊合作技巧的事情，以網頁開發來說，由於網頁的特性，單純的網頁視覺設計師很少能夠直接掌握產品最終的外觀，往往是在繪圖軟件裡面將視覺部分定稿，再由前端工程師根據設計來將產品的視覺部分實現出來。舉凡圖片的尺寸、位置，組件的效果、色彩的RGB值、文字的尺寸等等，都必須清楚的傳達才能夠完整的重現原本的設計。

而在開發APP的時候，這些問題一樣存在。在大部分的時候，我們都使用像素來做繪制以及開發App的單位，這沒什麼問題，尤其是iOS系統目前的屏幕尺寸還算單純，使用像素作為溝通的單位基本上不會有什麼太大的誤會產生。需要的時候頂多是視覺設計師準備一臺手持裝置，透過xScope、Screenshots之類的工具實時在手機上檢視設計稿，增加工作的效率。

但是文字的尺寸則會出現問題，實際上遇到的狀況就是設計師提供的字體尺寸不對，開發人員如果按照設計師的數值，則制作出來的文字會比設計稿來得變小：

有經驗的開發人員通常就直接把設計師給的數值直接乘以2使用，藉以得到原本設計的結果，但這其中當然是有些誤會在其中。在這裡我們發現設計師標示文字尺寸時是使用瞭pt這個單位，很容易讓人把它跟像素搞混在一起，但它們卻是完全不同的東西。

pt是常見的標示文字尺寸的單位，在繪圖以及文書軟件等幾乎都是使用pt作為字體尺寸的單位，故一般稱呼「字級」時，通常即是指pt，許多平面排版設計師都喜歡在手邊準備一張字級對照表，方便與客戶溝通時使用。

px與pt的區別

px ( pixel、又稱為像素)與pt ( point、有時被稱為點)是兩個看起來很像、卻完全不一樣的單位(在某些場合他們是1：1的)，在很多時候卻常常被搞混，或是制作過程根本沒有分清楚、導致結果沒有很精確。在繪圖軟件裡面可以看到基本單位設定裡面就有這兩個選擇：

px，即是pixel、像素。是屏幕上所顯示的最小單位，當制作的版面是供屏幕瀏覽時，使用px可以精確的控制畫面上顯示效果。但也因為每個屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一個像素可能會小到肉眼無法辨識的大小。

pt，即是point，是一個標準的長度單位。定義上1pt=1/72英吋。因此它跟我們所熟悉的公分、公尺一樣，可以明確的指出1pt的長度是多少。

也因此，像word這種以打印輸出為需求的軟件，字體大小使用pt就顯得相當方便實用，隻要軟件設定是對的，使用多少pt的字級，透過打印後永遠都會得到一樣大小的字體。

但是在屏幕顯示的時候，則需要透過一定的轉換公式，但這邊會遇到的另外一個問題就是各傢操作系統的dpi並不一致。Windows系統一般都是設定96dpi，Mac的OSX系統則大多是72dpi。由於pt在定義上是1/72英吋的關系，因此在72dpi的系統上時1pt= 1px，這沒什麼問題，但在96dpi時則明顯不適用，像素密度明顯變細瞭，所以需要一個轉換的公式，在這邊，1px=0.75pt。（72 / 96 = 0.75 )

也因為這樣，在許多時候都建議屏幕顯示用的設計可以選擇px作為字體的單位，例如網頁的css樣式表單就有pt、px以及百分比的em等方式來定義字體大小可供設計師選擇。

開發iOS app的時候，雖然沒有這麼多樣的單位可選，但設計師隻需要簡單的利用一些小技巧即可讓文字尺寸與最後的結果相符：由於Photoshop使用1 inch = 72 pt的標準，因此當文件檔案的分辨率設定為72的時候（這是默認值），1 pt = 1 px，而設定為144的時候1 pt = 2 px。

所以，在以Retina APP為主流的現在，開新文件時請記得將檔案的分辨率設定為144，如此就能保證你的pt數值是開發人員需要的數值瞭。