Android系統字體規範

咱們在作Android移動APP設計的時候,字號的選擇也是很讓人頭疼,轉載一份有關Android系統字體規範,若是在作Android項目的用戶應該看看,若是有任何建議歡迎在留言處與咱們交流探討。html

主要從如下幾點作了分析:前端

  • 移動設計中與字號有關的基本概念
  • Android系統默認字體及字號
  • Android字體單位sp與px的換算
  • 規範字號的意義
  • 印刷業的規範字號的用法
  • Android規範字號的近似用法
  • 如何向前端輸出?
  • 如何在photoshop裏選擇字號?

1. 移動設計中與字號有關的基本概念

  • px:Pixels即像素,基本原色素及其灰度的基本編碼。
  • DPI:dots per inch,是印刷上的記量單位,意思是每一個英寸上,所能印刷的網點數。
  • PPI:pixels per inch 數字影像的解析度,意思是每英寸所擁有的像素數,即像素密度。
  • PPI = √(長度像素數² + 寬度像素數²) / 屏幕對角線英寸數
  • pt:Point,磅因,國際通行的印刷單位,是一個天然界標準的長度單位。

    inch = 2.54cm = 25.4 mm = 72pt, 1pt≈0.35mm
    Photoshop裏的字體單位pt和point不同。在Photoshop裏,一樣是10pt的字,只要變換字體,字的高度就會變化。android

  • dp:Density-independent pixels,以160PPI屏幕爲標準,則1dp=1px
  • dp和px的換算公式 :dp*ppi/160 = px
  • sp:Scale-independent pixels.安卓的字體單位,以160PPI屏幕爲標準,當字體大小爲 100%時, 1sp=1px
  • sp 與 px 的換算公式:sp*ppi/160 = px

2. Android 系統默認字體 Rotobo,限定使用如下字號

032516uL1

3. Android 字體單位 sp 與 px 的換算

  • PPI = √(長度像素數² + 寬度像素數²) / 屏幕對角線英寸數
  • sp與px的換算公式:sp*ppi/160 = px

以三星Note2爲例,PPI = √(1280² + 720²) / 5.5=267
0325166eM字體

經測量,三星Note2的字體高度確實如此,見下圖:
0325165K5優化

4. 規範字號的意義

保證相同字號的字在不一樣PPI屏幕上顯示的物理高度一致,下面來驗證一下。編碼

  • 設定 PPI爲 267 時,高度18sp(即 30px)的字的物理高度爲 X,則:
    一英寸裏的像素數 267 / 一英寸裏的毫米數 25.4mm = 30 / X
    X ≈ 2.86mm
  • 設定 PPI爲 160 時,高度18sp(即 18px)的字的物理高度爲 Y,則:
    一英寸裏的像素數 160 / 一英寸裏的毫米數 25.4mm = 18 / Y
    Y ≈ 2.86mm

綜上,X = Y,這就證實了同爲18sp的字在 PPI分別爲 267 和 160 時,顯示的物理高度都是 2.86mm設計

5. 印刷業的規範字號的用法

看書的時候眼睛距離書本的最佳距離爲 33cm,書本的閱讀距離比較接近於手機的閱讀距離,因此咱們來參考下書本上印刷文字的規範。htm

印刷業已經有成熟的行業字號標準,以下表所示:
032516FuMip

其中正文經常使用的字號是六號(7.5p)、小五號(9p)、五號(10.5p),以下表所示:
032516DIVget

6. Android 規範字號的近似用法

經過計算出 Android規範字號的物理高度,找到每一個字號最接近的印刷字號:
032516zev

再根據印刷字號的用途,近似得出Android 規範字號的用法
032516h0W

7. 如何向前端輸出?

第一步:將sp 換算成px。可是px隨PPI 變化而變化,這一點能夠從sp 與px的換算公式「sp*ppi/160 = px 」看出來。咱們不能算出全部的狀況,因此只計算首選須要適配的ppi 對應的像素高度。

第二步:把算好的像素高度和換算公式「 sp * ppi/160 = px 」同時輸出給前端,這樣之後再換ppi,前端能夠自動計算。另外,前端代碼裏定義字體高度用的也是px,因此設計師向前端輸出以px計算的字號尺寸是很是合適的。例如:
032516RML

8. 如何在photoshop裏選擇字號?

上文中,咱們已經算出了字體像素高度,把這些像素高度畫到ps 裏,
再把你要使用的字體調到這樣的像素高度,得出photoshop 裏對應的字號,用於設計。也就是說Photoshop 裏的字號都須要根據實際狀況,手動調出來,沒有捷徑。例如ppi 爲240 時,對應的像素高度和字體字號以下圖所示:
0325174p4

若是ppi 變化,上面的圖就不能用了,又要從新算,比較勞神費力,但我目前尚未更好的辦法,歡迎你們拍磚,我會積極採納意見,優化方案。

參考文獻:
1.Android 設計指南:
http://www.sunjw.us/adchs/style/typography.html

2.維基百科:點(印刷)
http://zh.wikipedia.org/wiki/%E7%82%B9_(%E5%8D%B0%E5%88%B7

3.百度文庫《印刷文字的字體與字號規定》
http://wenku.baidu.com/view/c3f12af9aef8941ea76e05f2.html

相關文章
相關標籤/搜索