Introduction

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.

Key takeaways

  • 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.

About

AaBbCc
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890&@!#$%^*()

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.

Text styles

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.

 

NameSizeLine height*WeightWhen to use
Page Heading
3442SemiboldTitle for the whole web page; use only 1 per page
Section Heading
2431SemiboldTop-level sections of a page
Sub-section Heading
1828SemiboldSmaller content sections within a section; use below Section Headings only, not on their own
Body Copy Semibold
1624SemiboldTitles, labels; UI elements when they’re selected
Body Copy Regular
1620RegularPrimary body copy, placeholder text; unselected UI elements
Body Copy (Accessible)
1624RegularParagraphs and other multi-line text
Small Body Copy
1418RegularSmall screens, compact components, or content areas where Body Copy is too large
Tiny Text
1215RegularDetail copy (not primary content) like an image description or a footnote

* 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

Designing with type

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.

Size

Our font sizes are legible across a range of screen sizes and settings. font-size, xxlargefont-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.

 

NameSize (px)
font-size, xxlarge34
font-size, xlarge24
font-size, large18
font-size, default16
font-size, small14
font-size, xsmall12

Weight and formatting

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

 

NameWeight
font-weights, light300
font-weights, regular400
font-weights, semibold600
font-weights, bold700

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).

Color

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.

 

ColorHex valueSwatchWhen to useSass color
Dark#000000
 
To improve legibility on a gray or moderately dark backgroundmap-get($color-font, dark)
Default#373738
 
All body copy, lists, paragraphs, etc.map-get($color-font, default)
Muted#5D5E5E
 
Labels and captionsmap-get($color-font, muted)
Light#7C7D7D
 
Placeholder text onlymap-get($color-font, light)
Disabled#B6B7B7
 
WCAG 2.1 AA compliant only when used for disabled statesmap-get($color-font, disabled)
Invert#FFFFFF
 
On a black or very dark backgroundmap-get($color-font, invert)
Interaction, default#0466B4
 
For links and other interactive textmap-get($color-interaction, default)

Alignment

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.

Lists

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.

Unordered List

  • Item one
  • Item two
    • Nested one
    • Nested two
  • Item three

Non-Bulleted List

  1. Item one
  2. Item two
    • Nested one
    • Nested two
  3. Item three

Ordered List

  1. Item one
  2. Item two
    • Nested one
    • Nested two
  3. Item three

Miscellaneous

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.

Developer implementation

Applying text styles

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.

HTML styling elements

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.

Fallback typefaces

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.

Javascript constants

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

import { fontSize } from @athena/forge-shared

Resources

Utilities

CSS classes

NameClass sizeClass weight
Page Heading.fe_u_font-size--xxlarge.fe_u_font-weight--semibold
Section Heading.fe_u_font-size--xlarge.fe_u_font-weight--semibold
Sub-section Heading.fe_u_font-size--large.fe_u_font-weight--semibold
Body Copy Semibold.fe_u_font-size--default.fe_u_font-weight--semibold
Body Copy Regular.fe_u_font-size--default.fe_u_font-weight--regular
Body Copy (Accessible).fe_u_font-size--default.fe_u_font-weight--regular
Small Body Copy.fe_u_font-size--small.fe_u_font-weight--regular
Tiny Text.fe_u_font-size--xsmall.fe_u_font-weight--regular

Sass variables

NameSass sizeSass weight
Page Headingmap-get($font-size, xxlarge)map-get($font-weights, semibold)
Section Headingmap-get($font-size, xlarge)map-get($font-weights, semibold)
Sub-section Headingmap-get($font-size, large)map-get($font-weights, semibold)
Body Copy Semiboldmap-get($font-size, default)map-get($font-weights, semibold)
Body Copy Regularmap-get($font-size, default)map-get($font-weights, regular)
Body Copy (Accessible)map-get($font-size, default)map-get($font-weights, regular)
Small Body Copymap-get($font-size, small)map-get($font-weights, regular)
Tiny Textmap-get($font-size, xsmall)map-get($font-weights, regular)