Vega’s typography emphasizes functionality over style. However the two work together to create information in a professional, clean, and appealing manner. Consistency is also a central principle. We use common fonts throughout the site for specific purposes.
The overall point must be to convey information to users. It should not be difficult for Heartland’s customers to be able to find, see, and read the content on our websites. Ease of navigation and parsing of information is central to our mission.
Different font styles and weights may need to be used for different environments. We need to take into account the different sizes of screens and to design our typefaces to produce a minimal level of eyestrain, and should be adaptable to different users with different vision constraints. Users should be able to change the font size to enable readability, however this should not break the overall style or theme of the materials.
Headers should be used to designate hierarchy of information. Headings have specific meanings. If you need to emphasize something use only font-weight and body text color; do not use headers for emphasis purposes. This is important not just for flow of text, but also for accessibility reasons; those using non-visual reading tools use headers for organizing content.
The base fonts currently being used in Vega are:
Inter (sans-serif) - We use Inter as the base font for all the content on a web or product page, which is primarily intended to be displayed on a screen.
Roboto Mono (monospace) - Roboto Mono is used to display preformatted code or code snippets on a web or product page.
Alias tokens are to be used as the building blocks for fonts within the system. Alias tokens are designed to make it easier for changes to occur without making granular modifications in the code.
Base tokens are used for information about specific fonts.Base tokens will not be used directly for styling text. They will be extended by Alias tokens to provide a layer of redundancy and accommodate typography changes in the future.
The naming format for fonts is as follows: category?-weight?-size
The category prefix describes the type of font. These can include “sans-serif” (default) or “mono”.
Options for the weight prefix include “regular”, “medium”, or “bold”. If the category is excluded, this implies that the default (sans-serif) category is to be used. However, in this case, the weight prefix must be included. If the category is included, then the “regular” weight prefix may be excluded.
Note that the size attribute must always be included - it matches the font size using points.
It may be necessary to use other formatting changes to represent hierarchies beyond typographic scale.
As a general rule, all text should be left-aligned on the page, with the exception of in some tables, where readability may require other alignments.
We can use strong font weights for emphasis, as long as they are used sparingly. Avoid overuse of this attribute as it will obscure readability. It should be used for specific purposes, such as describing text on a button or action.
Do not use underlining for anything other than for text links.
In some cases it may make sense to use subdued text to de-emphasize content. This can be used as descriptive text for actionable items. When using subdued text we must be absolutely careful to make sure it is readable to meet accessibility requirements.
The use of PageHeading must be for the title of the screen, and used nowhere else.
This is reserved for titles on modal elements.
Headings are reserved for titles at the top level of a screen. There should only be one heading on a screen, unless the screen is divided into cards. In this case each card should have its own heading.
Subheadings should be used for subsections within a screen under a heading. These are optional, and may be multiple in number. They should not be used in place of headings on a screen, such as for a card.
In cases where detail needs to be provided, but space on a screen is limited, such as under an image or a table, captions should be used.
There are a number of different criteria we need to consider when delivering content to mobile devices. Due to the wide variation in displays for these devices this may render some of our typography differently than we may have initially intended.
Rules of thumb: