Typography
Font Variants
For RingUI applications, system fonts are used. The system fonts for the most common operating systems are displayed below.
RingUI offers 9 variations of these system fonts. In the table below, you can find all variants, their typical usage description, and their describing variables.
| Main headings | 24, bold, line-height 28 |
| Secondary headings | 20, regular, line-height 24 |
| Tertiary headings | 16, bold, line-height 22 |
| Quaternary Headings | 12, regular, capital, line-height 18, +2 spacing |
| Emphasized H4 | 12, bold, capital, line-height 18, +2 spacing |
| Standard UI text (Lists, menus, buttons, etc.) | 14, regular, line-height 20 |
| Emphasized regular | 14, bold, line-height 20 |
| Labels, descriptions | 12, regular, line-height 16, grey |
| Text blocks | 16, regular, line-height 24 (if width bigger than 400px) or line-height 22 (if width smaller than 400px) |
Text Color
All font variants use the black 'Text/Main' (#1F2326) color as default. The only exception is the label variant, which is displayed in the grey 'Text/Label' (#737577) color by default.
General Guidelines for Typography
Align text to the bottom line. This is especially important if you mix different font sizes on one line.
Align text to enhance readability. In most cases, it is best if all related text elements are aligned vertically.
Never underline text to emphasize it. Underlined text indicates a link and should therefore only be used for this purpose. Use bold fonts for emphasis instead.
Keep the defined headings order. However, you can skip heading types, and you don’t have to use H1 as your 'first' heading style.
Always follow the capitalization rules defined in the capitalization guidelines.
Guidelines for Continuous Text
Align continuous text to the left. Don’t fully justify continuous text and don’t align continuous text to the center or to the right.
For optimal readability, line length should not be too wide, but also not too narrow. Try to aim at a line length of 60 to 100 characters including spacing.
Usage Examples
To better understand how these fonts are used in action, you can find a few examples here.
If you want to learn more about Typography, we recommend to read the article 'Understanding Typography' by Google.