Typeface and text styles

Overview

A consistent typeface in our design system improves readability, strengthens brand identity, enhances user experience, and creates a cohesive, professional look. Text styles organize and present content clearly, ensuring consistency, readability, brand alignment, and accessibility.

Header text styles

Header text styles in our design system vary on desktop and mobile device types, but all use the Plus Jakarta Sans typeface with a line height of 140%. Note that some text styles are semibold and some are bold.

Desktop

Mobile

Body text styles

Body text styles are universal across devices and screen sizes. Body text is recommended for the main text as it provides better readability and control over spacing.

Note text styles

Note text is typically used for reference content rather than the main content.

Button text styles

Link text styles

Tag text styles

Related resources

For designers: Visit the Designers section for access to component specs and Figma files.

‍For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.

Contact

For more information about this standard, email: web-standards@pennmedicine.upenn.edu