Research on font specification and application of Android system

We're doing Android mobile app design. , the choice of font size is also very frustrating, today, a collation of a Android System font specifications, mainly from the following aspects: the program.

1. Basic concepts related to font size in mobile design

• Px:pixels is the basic encoding of pixels, basic pigments and their grayscale.
• Dpi:dots per inch is a printed volume unit that means the number of outlets that can be printed on each inch.
• Ppi:pixels per inch The resolution of a digital image, meaning the number of pixels in each inch, that is, pixel density.
• PPI =√ (length pixels ²+ width pixels ²)/Screen Diagonal inch number
• Pt:point, Lb., an internationally-accepted printing unit, is a natural standard of length units.
  

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

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

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

3. Android Font Unit SP and PX conversion

• PPI =√ (length pixels ²+ width pixels ²)/Screen Diagonal inch number
• SP and PX Conversion formula: sp*ppi/160 = px

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

After measurement, Samsung Note2 's font height is indeed the case, see the following figure:

4. The significance of the canonical font size

To ensure that the same font size of the word on the different PPI screen shows the physical height of the same, below to verify.

• When the PPI is set to 267, the height of 18sp (that is, 30px) has a physical height of X, then:
  The number of pixels in an inch is 267/millimeter in an inch 25.4mm = 30/x
  x≈2.86mm
• When the PPI is set to 160, the height of 18sp (that is, 18px) has a physical height of Y, then:
  The number of pixels in an inch is 160/millimeter in an inch 25.4mm = 18/y
  y≈2.86mm

In summary, X = Y, which proves that the same 18sp characters in the PPI 267 and 160 respectively, the display of the physical height is 2.86mm

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

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

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

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

6. Approximate usage of Android specification font size

By calculating the physical height of the Android specification font size, find the most closely printed font size for each font size:

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

7. How to output to the front end?

The first step: convert the SP into PX. But PX changes with PPI, which can be seen from the conversion formula "sp*ppi/160 = px" of SP and px. We cannot work out all the cases, so we only compute the pixel heights corresponding to the preferred PPI.

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

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

In the above, we have calculated the font pixel height, the pixel height to the PS,
Then put the font you want to use to this pixel height, the corresponding font size in Photoshop, for design. In other words, the size of Photoshop need to be based on the actual situation, manually transferred out, there is no shortcut. For example, when the PPI is 240, the corresponding pixel height and font size are shown in the following illustration:

If the PPI changes, the above diagram can not be used, but also to recalculate, more laborious, but I do not have a better way, welcome to shoot Bricks, I will actively adopt ideas, optimization program.

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

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

3. Baidu Library "Printing text font and font size provisions"
Http://wenku.baidu.com/view/c3f12af9aef8941ea76e05f2.html