Typographic & Linguistics
Principles
As the screen's display area is quite limited and font sizes have to be reasonably large, keeping displayed text at an appropriate length becomes extremely important.
- The title should never be longer than one line. If the title is too long, the undisplayed portion will be replaced with "...". Please make sure that the shortest title is used.
- The text on a button must be as brief as possible, and the string should fit inside the default button size. Strings that are too long will be cut off, so the user will be unable to see the description use voice commands.
- Furthermore, it is necessary to take into consideration multilingual issues when planning the lengths of text strings.
Zenbo's GUI uses the four fonts in the Roboto typeface. The fonts are used in combination under various states or conditions, which are:
- Roboto light
- Roboto regular
- Roboto medium
- Roboto bold
Structure
- System buttons
The colors of the system buttons are used in accordance with the nature of the displayed text, and they are blue (#12afe2), red (#ff0c57), and green (#03c4b4).
Font
Blue: Roboto medium, 50dp, #12afe2
Red: Roboto medium, 50dp #ff0c57
Green: Roboto medium, 50dp #03c4b4
Word subtraction rule
The text on a system button should be brief (used as commands). If the text on a system button is too long, the designer may reduce the font size to 40dp. If the text string still does not fit, then a shorter string should be used instead. Alternatively, "…" may replace the final syllable of the last displayed word or everything after that word.
- Web browsing mode
The layout and font of buttons on the web browser are slightly different from those of system buttons in order to accommodate users' web browsing habits.
Font
Roboto medium, 40dp, #12afe2
Word subtraction rule
The button's text, font, and size on a web browser are smaller than those of system buttons. Each web browser button should be labeled with texts (also used as voice commands) that are as brief as possible. If the text string is too long, the designer may reduce the font size to 32dp, or further down to 28dp over two lines. If the text string still doesn't fit, then a shorter string should be used instead. Alternatively, "…" may by used to replace the final syllable of the last word or everything after that word.
Do
Follow the principle for cutting off long text and use brief phrases.
Don’t
Use phrases that are as brief as possible. Do not use excessively long text strings or change the font size that may compromise readability.
- Numbering tabs
As described in the previous sections on colors and components, the system's numbering tabs come in two sizes, each with its usage scenarios. The fonts used are also subject to relevant size and text truncation rules.
Large numbering tab without stroke
Large tabs without black borders are used only in single- or double-column menus.
Single-digit numbers: Roboto bold, 92dp, #ffffff
Two-digit numbers: Roboto bold, 70dp, #ffffff
Three-digit numbers: Roboto bold, 58dp, #ffffff
Four-digit numbers: Roboto bold, 45dp, #ffffff
Small numbering tab with stroke
Small tabs with black borders are used only in a horizontal contact list or the grid view.
Single-digit numbers: Roboto bold, 65dp, #ffffff
Two-digit numbers: Roboto bold, 55dp, #ffffff
Three-digit numbers: Roboto bold, 42dp, #ffffff
Four-digit numbers: Roboto bold, 32dp, #ffffff
- List view items
A single-column menu comes in several forms. Please observe the following usage restrictions regarding font sizes if the background's layout contains a brief introduction.
A. Main content is accompanied with a single piece of information to the right
Title
Roboto medium, 55dp, #ffffff
Content body
List items: Roboto medium, 72dp, #ffffff
List subtitles: Roboto light, 45dp, #ffffff
List right-side details: Roboto medium, 55dp, #ffffff
Word subtraction rule
All text strings must be brief. If a string exceeds the space of one single line, the font size will be automatically reduced to 45dp and split into two rows, or the last part will be replaced with "..." to indicate that the text string continues on.
B. The main content is accompanied with two pieces of information to the right
Title
Roboto medium, 55dp, #ffffff
Content body
List items: Roboto medium, 72dp, #ffffff
List right-side details: Roboto medium, 45dp, #ffffff
List right side sub details: Roboto light, 45dp, #ffffff
C. Main content consists of one row
Title
Roboto medium, 55dp, #ffffff
Content body
List items: Roboto medium, 72dp, #ffffff
Word subtraction rule
In this layout, if the text exceeds the space of one line, the font size will be automatically reduced to 45dp and split into two rows.
D. Main content consists of two rows
Title
Roboto medium, 55dp, #ffffff
Content body
List items: Roboto medium, 72dp, #ffffff
List subitems: Roboto medium, 45dp, #ffffff
Word subtraction rule
In this layout, if the title and subtitle exceed the space allocated, please add “…” to the end
- Grid view
A grid view comes in several forms. Please observe the following usage restrictions regarding font sizes.
A. Contact list
On the contact list, the user will read the number or command label aloud as a voice command. For this reason, the displayed label should be as brief as possible. If it won't fit on two rows, reduce the font size to 45dp and add "..." to the final segment.
Do
Shorten the length of the string and add "..." to the end.
Don’t
In this layout, a text string is restricted to at most two rows. Use "..." if necessary.
B. Multimedia grid view
On the multimedia grid view, the user will read the number aloud as a voice command. Therefore only a short line of text is displayed. Excessively long text must be truncated with "...".
Do
Space for only one line is provided for the text, so "..." is used whenever necessary.
Don’t
In the grid view, a text string is restricted to at most one row. Use "..." if necessary.
- The hint page
The hint screen is divided into the title area and the content area. Each text string that can be used as a voice command is accompanied by a voice-control icon so that users will be able to read the command aloud accurately. The applicable font sizes are defined as follows:
Title
Roboto medium, 55dp, #ffffff
Content body
Content title: Roboto medium, 72dp,
List items: Roboto medium, 72dp, #ffffff