Don’t understand UI text design specifications? This article will help you figure it out!
|
In UI design, text setting is an essential part. The text setting process involves font type, font size, font weight, line height, line width, and color. The text design specifications described in this article include the following parts:
The default system font for iOS devices is Ping Fang for Chinese characters and SF UI Text for English and numbers. The default fonts for Android devices are Source Han Sans for Chinese and Roboto for English and numbers. Font Size The font size of text varies in different usage scenarios. The main usage scenarios of text are divided into: first-level title, second-level title, third-level title, body text and prompt text. The minimum font size is generally 11. There are also special cases, such as the text in the label, the font size is 10 or even smaller. Font Weight Font weight refers to the thickness of the font strokes. The font weight level is used to indicate the different thickness of the font strokes in the same font family. In UI design, there are two commonly used font weights, one is Regular and the other is Medium. Use Regular for normal text. Use Medium when you need to highlight the hierarchy and increase contrast. Medium is often used for titles. Line Height The font size is equal to the text height. As shown in the figure below, when the font size is 16 and the line height is set to 16, the line height is also the height of the font itself (16pt). Line height = font size + line spacing. As shown in the following figure: the line spacing is 3pt above the text, and the line spacing is 3pt below the text. The font height is 16pt. Line height (22) = font size (16) + line spacing (3+3). In the interface process, it is necessary to standardize the font size and the corresponding line height. Otherwise, there will be design layout problems. For example, when designing a label, when the font size is 14 and the line height is 20, in order to keep the font visually the same distance from all sides, the top and bottom spacing is 4 and the left and right spacing is 8. Because of the existence of line spacing, the top and bottom spacing and left and right spacing cannot be set the same. If the line height is set to 14 (the size of the text itself), then the top and bottom spacing should also be 8pt, not 4pt. The following table is a comparison table of the font size and corresponding line height recommended by the iOS design guidelines. The following figure is a comparison table of Sketch’s default font size and line height: It can be seen that the comparison table of font size and line height recommended by iOS is different from the default one in Sketch. When the Sketch visual draft is developed and implemented, the font size and corresponding line spacing will be inconsistent, which will cause problems with restoration. There are two ways to solve the problem that row height cannot be perfectly restored:
Line Width Line width = font width + width of the font on both sides Line width acts on the text range, as shown in the following figure: Extending the line width means setting the text content range. The text is 12pt away from the voice icon on the right, which means that when the text content is 12pt away from the voice icon, the text will be punctuated or truncated for display. color There are two rules for defining font color. One is to use the color value directly, as shown in the figure: Another way is to achieve it through opacity, usually with #000000 as the base, setting different opacities, as shown in the following figure: In general, the opacity method has a wider range of usage scenarios. |
<<: What exactly are the cloud phones that Baidu and Huawei are working on?
>>: Five basic security checks for your Android phone
Recommend
How to improve product activity? There are these 6 operating routines
In fact, I haven’t used QQ to chat for a long tim...
Mobile phone photos and text messages have come back to life, but why can deleted data be recovered?
Popular Science Times reporter Chen Jie The itera...
B2B industry content marketing, how to produce high-quality B2B content?
This article is the content production part of th...
6 reasons why Apple Pay will accelerate its growth
Tencent Technology News: The online version of Fo...
As a startup, how should you operate and maintain the vitality of your product?
Today I was invited to Zhongguancun Entrepreneurs...
Can you fall asleep quickly by eating more carbohydrates before going to bed? Eat this way if you want to sleep well →
"Eating more carbohydrates before going to b...
Photos of the reddish lunar soil are black and white? Space cameras are very different from everyday cameras!
On June 25, my country's Chang'e-6 return...
Sony PCM-D10 is the best in the industry with its exquisite sound and noise reduction
For many students who are studying abroad and hav...
3 types of people must be cautious when getting a perm, not because it will damage the hair or make them look ugly, but because...
As the saying goes, the three things you need for...
How can Internet finance carry out precision marketing?
The cost of acquiring traffic in Internet finance...
"MSG is a chemical industrial product. I always use chicken and mushroom essence!"...Excuse me? !
"I heard that eating too much MSG is not goo...
5 thoughts on community operations, and several points of focus on people and time periods!
In fact, this is a summary I wrote for myself. It...
Cucumbers are obviously green, so why are they called cucumbers?
This article was reviewed by Sun Hai, a plant sci...
"Seeing a world in a grain of sand", the 200 million-year rhythm of the earth's crust, disaster omens and the advent of life
William Blake, the first important romantic poet ...