Android System font Specification

When we do the Android mobile app design, the choice of font size is also very annoying, reproduced a copy of the Android system font specifications , if the user should look at the Android project, if there are any suggestions welcome to discuss with us in the message.

Mainly from the following points to do the analysis:

• Basic concepts related to font size in mobile design
• Android system default font and size
• Conversion of the Android font unit SP to px
• The meaning of canonical font size
• The use of the standard font size for printing industry
• Approximate usage of the Android spec font size
• How do I output to the front end?
• How do I select a font size in Photoshop?

1. Basic concepts related to font size in mobile design

• Px:pixels is the basic encoding of pixels, basic original pigments and their grayscale.
• Dpi:dots per inch, is printed on the amount of units, meaning that each inch, the number of outlets can be printed.
• Ppi:pixels per inch Digital image resolution, meaning the number of pixels per inch, that is, pixel density.
• PPI =√ (length pixels ²+ width pixels ²)/Screen diagonal inches
• Pt:point, pound because of the international Printing Unit, is a natural standard length unit.
  

  inch = 2.54cm = 25.4 mm = 72pt, 1pt≈0.35mm
  The font units in Photoshop are different in PT and point. In Photoshop, the same 10pt word, as long as you change the font, the height of the word changes.

• Dp:density-independent pixels, with 160PPI screen as standard, then 1dp=1px
• Conversion formula for DP and px: dp*ppi/160 = px
• sp:scale-independent pixels. Android Font unit, 160PPI screen as standard, when the font size is 100%, 1sp=1px
• Conversion formula for SP and px: sp*ppi/160 = px

2. Android system default font Rotobo, limit the use of the following font size

3. Conversion of the Android font unit SP to px

• PPI =√ (length pixels ²+ width pixels ²)/Screen diagonal inches
• Conversion formula for SP and px: sp*ppi/160 = px

Take Samsung Note2 as an example, PPI =√ (1280²+ 720²)/5.5=267

Measured, the font height of the Samsung Note2 is true, see:

4. Specification of the meaning of font size

Ensure that words of the same font size match the physical height shown on different PPI screens, and verify below.

• When the PPI is set at 267, the height of 18sp (i.e. 30px) is the physical height of the word X, then:
  Number of pixels in an inch 267/inch in millimeters 25.4mm = 30/x
  x≈2.86mm
• When you set the PPI to 160, the height of 18sp (that is, 18px) is the physical height of the word Y, then:
  Number of pixels in an inch 160/inch in millimeters 25.4mm = 18/y
  y≈2.86mm

All in all, X = Y, this proves that the same 18sp characters at the PPI 267 and 160 respectively, the physical height of the display is 2.86mm

5. The use of the standard font size in the printing industry

When reading a book the best distance from the books is 33cm, the reading distance of the book is closer to the reading distance of the mobile phone, so we refer to the book on the standard printed text.

The printing industry already has a mature industrial font size standard, as shown in the following table:

The font size commonly used in the body is sixth (7.5p), small fifth (9p), fifth (10.5p), as shown in the following table:

6. Approximate use of the Android spec font size

By calculating the physical height of the Android spec font size, find the nearest print size for each font size:

According to the use of the print size, approximate use of the Android specification font size

7. How do I output to the front end?

First step: Convert the SP to PX. However, PX varies with the PPI, which can be seen from the conversion formula "sp*ppi/160 = px" of the SP and PX. We cannot figure out all the cases, so we only calculate the pixel height of the PPI corresponding to the preferred one.

The second step: the calculated pixel height and Conversion formula "SP * ppi/160 = px" Output to the front end at the same time, so that after the PPI, the front end can be automatically calculated. In addition, the front-end code defines the height of the font is also PX, so the designer to the front-end output of the size of PX is very appropriate. For example:

8. How do I select a font size in Photoshop?

Above, we have calculated the font pixel height, the height of these pixels to the PS,
Then adjust the font you want to use to the pixel height, and get the corresponding font size in Photoshop for the design. In other words, the size of Photoshop needs to be based on the actual situation, manual adjustment, there is no shortcut. For example, when the PPI is 240, the corresponding pixel height and font size are as follows:

If the PPI changes, the above figure can not be used, but also to re-calculate, more laborious, but I have no better way to welcome everyone to shoot bricks, I will actively adopt views, optimize the program.

Reference documents:
1.Android Design Guide:
Http://www.sunjw.us/adchs/style/typography.html

2. Wikipedia: Dot (print)
Http://zh.wikipedia.org/wiki/%E7%82%B9_ (%e5%8d%b0%e5%88%b7

3. Baidu Library "font and font size rules for printed text"
Http://wenku.baidu.com/view/c3f12af9aef8941ea76e05f2.html

Android System font Specification