Mineral UI provides a simple set of typographic elements to easily apply structure to your interface. Using consistent typographic styles will create clear paths for users to move through your application.
Font Usage #
Mineral UI uses Open Sans, a humanist sans-serif typeface with good legibility and warmth. Featuring a tall x-height and open forms, it is ideal for on-screen consumption. Open Sans supports ISO Latin 1, Latin CE, Greek and Cyrillic character sets.
For Internationalization, support is included for RTL (right-to-left) languages. Asian Syllabic, Abjad, Indic and other script languages will be supported by sans-serif system font.
Open Sans (Latin, Cyrillic, Greek)
Open Sans
Открытый без
Ανοικτό Sans
System Font (Asian Syllabic, Abjad, Indic)
加学住無聞団覧問会因禁準著記経。訃先広応施彰道余世歌大木。解台房高暮治静一梁犯大下派。容定野操後情更接値感稿演初礼現後惑親資質。都大森年期所示求田岡画我託王質事。割街定載神配芸理時終安国。作点谷正継件訃供金番掲考歳約以止人全自。質問載護歳稿天懲禁印障利礼屋造倉多的補。社迅北討氏首楽市視専権点代推掲本藤。
وأزيز أصقاع الدولارات عن لمّ, يتم الحرة فرنسا البشريةً أي. عدد قد حكومة الضروري الحيلولة, أعلنت واستمر الحدود تم تحت, أم مكن أحدث الثانية التخطيط. أن بلا وبعض غرّة، أعمال. تاريخ وبحلول واتّجه بل ذلك. هو سابق هُزم الإمداد دول. سياسة لأداء الوراء و عرض, مكن و وحتّى اتفاقية.
प्रस्ताव पर चर्चा शुरू करने से पहले मै आप सभी के सामने एक या दो बात रखना चाहूँगा, मै दो बातो को साफ़-साफ़ समझना चाहता हूँ और उन दो बातो को मै हम सभी के लिये महत्वपूर्ण भी मानता हूँ। मै चाहता हूँ की आप सब भी उन दो बातो को मेरे नजरिये से ही देखे, क्योकि यदि आपने उन दो बातो को अपना लिया तो आप हमेशा आनंदित रहोंगे।
Type Sizing #
Consistent application of typography helps the user understand information hierarchy.
- Type sizing is based on a typescale.
- Type basis defines
16pxas1rem. - Type sizing is based on a
1.25(4:5 Major-Third) scale. This ratio balances vertical density with an expression of clear hierarchy. - The root base (default text size) is
14px.
Relative Line Spacing #
Linespacing is consistently set at 1.25 for all type sizes, except for prose text, which has a line height of 1.5 to increase readability for long-form text.
Hierarchy and Intent #
Consistency is key to creating an easily scannable interface for users. Each level in the Mineral UI type hierarchy is defined with a specific color and intent. Associating the typographic style to the intent in the interface provides a visual pattern that is easy for users to skim.
The variations help keep type styles to a minimum, so consistency is easier to achieve. Too many type styles make a layout unbalanced and difficult to manage.
Long-form Text #
Default text and caption styles are intended for sections of content that provide description and assistance. Paragraph text is primarily used for content sections. Caption Text is used to highlight or offset content, such as inline help or when captioning dashboard content.
| Example | Value | Color Value | Font (px/rem) |
|---|---|---|---|
Paragraph | <p>, <li> | theme.color_gray_100 | Regular (14/0.875) |
Paragraph (Prose) | <p.prose> | theme.color_gray_100 | Regular (16/1) |
Paragraph (Mouse) | <p.mouse> | theme.color_gray_100 | Regular (11/0.6875) |
| <ul>, <ol> | theme.color_gray_100 | Regular (14/0.875) |
Caption - Strong | <h5> | theme.color_gray_100 | Bold (14/0.875) |
Caption - Light | <h6> | theme.color_gray_80 | Regular (14/0.875) |
Display Text #
Use Display text sparingly to make a bold statement, or draw attention to different sections in an application view. Display text is for short titles and section divisions—it’s not for long-form content.
| Example | Value | Color Value | Font (px/rem) |
|---|---|---|---|
Page Title | <h1> | theme.color_gray_100 | ExtraBold (34/2.125) |
Large Section Header | <h2> | theme.color_gray_80 | Bold (28/1.75) |
Medium Section Header | <h3> | theme.color_gray_80 | Bold (22/1.375) |
Small Section Header | <h4> | theme.color_gray_80 | Bold (18/1.125) |