Typography

Typography is the consistent, thoughtful application of font choices to improve legibility and user experience. Forge uses Source Sans Pro, a font that supports patient safety and is well-suited for data-rich UI applications.

The guidance for using Forge typography in your product is straightforward, but it’s important to follow it consistently for a cohesive user experience.

• Forge uses the Source Sans Pro font as its only typeface.
• Specific combinations of font weight, size, and line height allow us to adapt this font to a wide range of settings.
• Use Forge’s predefined text styles for clear communication between designers and developers.
• To implement Forge fonts, use Sass maps, not CSS.

We chose Source Sans Pro carefully, with these considerations:

• Readability: athenaOne users spend much of their time looking at complex information on computer screens. Source Sans Pro is specifically designed for digital user interfaces (unlike other typefaces designed primarily for print).
• Safety: For patient safety reasons, it’s important that each character is clearly distinguishable from others (e.g., the upper case “I” is clearly distinguishable from a lowercase “L”). Similar characters in other typefaces sometimes cause confusion.
• Personality: While PT Serif Bold (athenahealth’s display font) is an appropriate choice for headlines and pull quotes with more personality, athenaOne is best served by Source Sans Pro. It’s clear-eyed and neutral in personality, befitting the seriousness and gravity of healthcare.

The fonts and guidance on this page are categorized by use to help you create products that are aesthetically and functionally consistent. For a smooth design-dev handoff, use Forge’s predefined text styles in Figma and your documentation.

Forge’s sole font is Source Sans Pro, so the combination of variables like size, weight, and formatting establishes a clear and consistent information hierarchy. Forge’s predefined text styles cover a range of common uses. These correspond to the text styles available in Figma.

* Line height is applied automatically in code, so the line heights listed above and in Figma simply mimic the styling web browsers display when translating type. For this reason, line height should be used in the design stage only.  

For CSS classes and Sass mappings, see Utilities. 

We recommend using Figma text styles in your designs to ensure that updates to our font stack are automatically applied to your designs when the library is updated. Font options are described here for reference only.

Our font sizes are legible across a range of screen sizes and settings. font-size, xxlarge – font-size, large are designed for titles and headings, while font-size, default and font-size, small are ideal for text found in the body and UI elements on web pages and apps. font-size, xsmall is for use only in footnotes and other low-priority content.

Source Sans Pro comes in many weights, but Forge uses these 4:

Of these, we recommend these 2 weights for most uses:

• font-weights, regular is best for body text.
• font-weights, semibold is used for headings, titles, and labels that call for stronger text. For anything longer than a sentence, semibold can be harder to read than regular weight, so use it sparingly for longer text.

Use these font weights for accents only:

• font-weights, light is not for use in AthenaOne. Use it only for editorial content like documentation or marketing sites, to provide visual lightness and range.
• font-weights, bold is used only to add importance to certain key words or phrases. To implement this, use the <strong> tag (see Developer implementation).

In addition to these font weights, Source Sans Pro supports italic and underlined text.

• Use italic text only to add emphasis to certain words, or to indicate definitions or new terms. To implement this, use the <em> tag (see Developer implementation).
• Use underlined text only for links (on hover).

Forge uses text color in very specific places, where it can provide additional context that helps users. Product copy must be legible and accessible. When paired with the right background colors, Forge’s color-font palette is legible and accessibility-compliant. See the Color page for more information about font and background colors.

To implement these colors in code, use the map-get values listed in each row.

Horizontal alignment

Forge is left-aligned by default. Use left alignment in your designs whenever possible. There are a few exceptions in Forge components:

• Button text is center-aligned.
• In Table, certain value types like numbers are right-aligned.
• EmptyState text is center-aligned.

Vertical alignment

Vertical alignment dictates the vertical position of text elements placed next to each other. Elements can be top- or bottom-aligned or aligned along the text baseline.

Most Forge components are built with baseline alignment, but it’s applied inconsistently, so in your designs, use the vertical alignment that works best for your use case. For example, when a label is placed next to an input field, each text element is a different size, with a different line height, so the most practical way to align them is usually along the baseline.

Forge includes styles for 3 list types:

• Use unordered lists (<ul>) for lists that don’t need to be in a specific order, like this one. The bullets help differentiate list items.
• Use non-bulleted lists for a lighter visual treatment of an unordered list.
• Use ordered lists (<ol>) to automatically add numbers to a list that must be in a specific order, like a series of steps or a priority list.

As seen in StatusTag, all-caps styling can help differentiate elements on the page. This should be applied with CSS via text-transform: uppercase. Use this styling sparingly to avoid the connotation of yelling.

For long blocks of text like paragraphs, limit the maximum width to 60-100 characters per line (including spaces). Shorter line length makes content easier to read.

Root includes the .fe_f_all class, which is mandatory for Forge styling. .fe_f_all applies styles to descendant Forge components and some native HTML elements like paragraphs and links.

To use Forge typography without broadly applying Forge styling, import @athena/forge/sass/forge-abstracts and use map-get($font-name) as your font-family. Reference the Utilities section below for more map-get values.

Use a variant of the Heading component to apply specific styles to titles and headings. Variants apply the size and weight classes listed in Utilities.

For bold or italic text, we recommend semantically correct HTML5 options like <strong> and <em>. We advise against using <b> and <i> tags, per W3C guidance.

Arial and Sans-Serif are the fallback typefaces (in that order) when users can’t or don’t load Source Sans Pro. Text inside <code> or <pre> tags (used to indicate that something is code or is whitespace-dependent) uses the default browser Monospace font family.

Font size constants can be imported from @athena/forge-shared

import { fontSize } from @athena/forge-shared

• Thinking With Type: http://thinkingwithtype.com/text/
• Professional Web Typography: https://prowebtype.com/
• The Elements of Typographic Style Applied to the Web: http://webtypography.net/toc/
• Typography in Design Systems: https://medium.com/eightshapes-llc/typography-in-design-systems-6ed771432f1e

• Download Forge’s font (included in Figma cloud): https://fonts.google.com/specimen/Source+Sans+3