Typography

A basic reference for the definition of the visual identity and the organization of the content.

Font Stacks

Commure uses two text styles exclusively: A sans serif one, which is the main style, and a monospaced one used to render code.

Commure takes an agnostic approach to typography, due to the customizable, multi-language, and multi-platform nature of healthcare products. Therefore, Commure doesn't include any specific font family as part of its framework. Instead, it relies on the native font family of the user's operating system. This way we avoid web-font delivery services or font files stored on the server.

Commure embrace the standard known as "Native Font Stack" as the basis for its typographic source. The tables in the sections below list the font families available for each operating system's native font stack.

Sans Serif

For sans serif style, using React's native font stack as inspiration, we also include families for Ubuntu, Oxygen, and Gnome operating systems:

OSFont Family
WindowsSegoe UI
MacOS & iOSSan Francisco
Chrome OS & AndroidRoboto
Basic web fallbacksArial, Helvetica Neue, sans-serif
Emoji FontsApple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

Monospaced

For monospaced style, we also follow the same approach as React:

OSFont Family
WindowsSegoe UI
MacOS & iOSSan Francisco
Chrome OS & AndroidRoboto
Basic web fallbackMenlo, monospaced

Type Scale

As we approached the foundational elements with simplification and standardization in mind, so too have we approached type scale. Commure's type scale is based on React and follows one of the most widely used type scales in web products today.

Commure's type scale is based on an initial increase of 2px that grows to 4px in larger font sizes to favor contrast and improve readability. It follows a non-linear arithmetic progression that's understandable and easy to use in both simple and complex applications.

Better software ...
Font size: 12px
Better software ...
Font size: 14px
Better software ...
Font size: 16px
Better software ...
Font size: 18px
Better software ...
Font size: 20px
Better software ...
Font size: 24px
Better software ...
Font size: 28px
Better software ...
Font size: 32px
Better software ...
Font size: 36px
Better software ...
Font size: 40px

Basic Formatting

Line Height

Commure uses two reference line heights for its typography: A standard line height with a 1:1.5 ratio and another one used for headings with a 1:1.25 ratio.

1:1.5 is one of the most common line height ratios used in web development right now. A body font of 16px (1rem) returns a value of 24px (1.5rem), which is the main reference measurement for the vertical organization of content in Commure.

Using a minimum value of 1.5 for the line-height for main paragraph content also improves accessibility for people with low vision or cognitive concerns such as Dyslexia.

We perceive the space between large font sizes a bit differently. The white space between lines appears more prominent. Therefore, it is considered best practice to reduce the line height in font sizes that are 20 pixels or larger. The same is true for uppercase texts. Therefore uppercase headings in Commure, despite only being 12px and 14px, also use a ratio of 1:1.25.

Line Heightratio
Standard1:1.5
Secondary1:1.25

Commure's Line height only applies to texts elements that run more than one line, such as paragraphs, headlines, and list group items. For the remainder of the UI elements that contain text, such as buttons, single line input fields, stickers, badges, or labels, this value is defined by the implementation.

Font Weight

For efficiency and simplicity, Commure only incorporates three font weights for content:

Font WeightReference
Regular400
Semibold600
Bold700

The use cases for each font weight are covered in the "Type Styles" section.

Letter Case

Commure uses lowercase as a basis, regardless of the specific capitalization rules. Uppercase is only used as a hierarchy resource in the section divider pattern used in dataset display views and forms.

The use cases for each letter case are covered in the "Type Styles" section.

Line Length

Wide lines of text can be difficult to read. It can be difficult to continue onto the correct line in large blocks of text. between 60-100 characters is recommended. 60 characters is the equivalent of approximately 400 pixels using the Roboto font at body text size of 14 pt and 100 characters is the equivalent of approximately 660 pixels using the Roboto font at body text size of 14 pt.

spacing guidelines


Type styles

The tables in this section show the format combinations that are available in Commure.

Consistency and hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to make text easier to read, and scan.


Heading Styles

X-Large title
Font: Roboto
Font size: 40px
Font weight: 600
Line height: 44px
Color: #3F3F3F
Large title
Font: Roboto
Font size: 36px
Font weight: 600
Line height: 32px
Color: #3F3F3F
Medium title
Font: Roboto
Font size: 28px
Font weight: 600
Line height: 32px
Color: #3F3F3F
Small title
Font: Roboto
Font size: 24px
Font weight: 600
Line height: 24px
Color: #3F3F3F
Heading
Font: Roboto
Font size: 20px
Font weight: 600
Line height: 24px
Color: #3F3F3F
Subheading Lowercase
Font: Roboto
Font size: 18px
Font weight: 600
Line height: 20px
Color: #3F3F3F
SUBHEADING UPPERCASE
Font: Roboto
Font size: 16px
Font weight: 600
Line height: 20px
Color: #3F3F3F
Body regular
Font: Roboto
Font size: 14px
Font weight: 400
Line height: 20px
Color: #3F3F3F
Body small
Font: Roboto
Font size: 12px
Font weight: 400
Line height: 16px
Color: #3F3F3F
Caption
Font: Roboto
Font size: 12px
Font weight: 400
Line height: 16px
Color: #3F3F3F
Label
Font: Roboto
Font size: 12px
Font weight: 600
Line height: 16px
Color: #3F3F3F

Text Styles

Text 1
Font: Roboto
Font size: 20px
Font weight: 400
Line height: 24px
Letter spacing: -0.07px
Color: #3F3F3F
Text 2
Font: Roboto
Font size: 16px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Color: #3F3F3F
Text 3
Font: Roboto
Font size: 14px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Color: #3F3F3F
Text 4
Font: Roboto
Font size: 12px
Font weight: 400
Line height: 16px
Letter spacing: 0
Color: #3F3F3F

Paragraph Styles

Paragraph 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Font: Roboto
Font size: 16px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Color: #3F3F3F
Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Font: Roboto
Font size: 14px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Color: #3F3F3F
Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Font: Roboto
Font size: 12px
Font weight: 400
Line height: 16px
Letter spacing: 0
Color: #3F3F3F

Clinical Style

Use regular weight on all body text, table cell content. Also use regular weight with subsection headers, UI element labels, and interactive text, all of which are given emphasis with other techniques. Use semibold weight for section headings, column headings, and timeline titles.

Section header
Font: Roboto
Font size: 16px
Font weight: 600
Line height: 24px
Letter spacing: -0.07px
Color: #3F3F3F
Text emphasis visual view
Font: Roboto
Font size: 16px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Color: #3F3F3F
Narrative body text
Font: Roboto
Font size: 14px
Font weight: 400
Line height: 20px
Letter spacing: -0.05px
Color: #3F3F3F
Tabular column header
Font: Roboto
Font size: 14px
Font weight: 600
Line height: 16px
Letter spacing: 0
Color: #3F3F3F
Tabular body text
Font: Roboto
Font size: 14px
Font weight: 400
Line height: 16px
Letter spacing: 0
Color: #3F3F3F
Tabular missing data
Font: Roboto
Font size: 12px
Font weight: 400
Line height: 16px
Letter spacing: 0
Color: ##A1A1A1
Label text
Font: Roboto
Font size: 10px
Font weight: 400
Line height: 16px
Letter spacing: 0
Color: #3F3F3F