# Typographic Scale Typography influences both readability and engagement. As with a musical scale, a typographic scale provides the basis for creating a harmonious visual structure that conveys the structure and relationships among text elements. For the HarvardSites Drupal Design System, we balance aesthetics with usability and accessibility standards to create a cohesive typographic rhythm across all platforms. May 02, 2025 Sarah Horton Richard Clinch - [ Insights ](/news-categories/insights) ![ Icon with “Aa” pairs, a line height arrow, and a list of text styles from Heading 1 to body text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-05/DS_insights_typographic_scale_0.png?itok=srVrmdCp) Typography plays a crucial role in graphic design. Through attributes such as size and weight, typography defines relationships, visually conveying the role and hierarchy of different elements. Headings, for example — large, bold headings signal main topics and smaller headings signpost subtopics. Headings collectively create a topographic map that users can follow to find and utilize the information and functionality they seek. Typography has other roles, such as communicating graphic and brand identity and supporting accessibility and usability. Clear typography is an essential consideration for universal legibility and readability. For the HarvardSites Design System, the typographic scale must support a wide range of user interface elements and components, from menus to site headers to buttons and other user interface controls. As part of HarvardSites web publishing platforms, the typographic scale must support content authors in providing standard and complex, multi-layered information, from captions to data tables to body text to headings and display text. Site visitors must benefit from both visual and programmatic semantics, on desktop and mobile devices and using assistive technologies. With these requirements in mind, we focused on approaches that would help us create the most flexible and extendable typographic scale: - **Minimum Font Size:** We initially based our typographic scale on the Golden Ratio, starting from a 16 pixel base. However, we realized that our scale meant that smaller elements, such as image captions, would fall below the 16px threshold, reducing legibility and readability. We are in the process of updating the typographic scale to ensure the smallest text is 16px, which will enhance readability and accessibility for all users. We also added a new entry to our [Clean Typography design standards](https://designsystem.harvardsites.harvard.edu/graphic-design#clean-typography) specifying, “Text must be no smaller than the browser’s default font size (i.e., 1rem).” - **Legible Fonts:** Typefaces have different attributes that contribute to their aesthetic as well as their effectiveness in conveying information. Legibility is a key factor in effectiveness, relating to how well individual characters can be visually distinguished. A key attribute for legibility is a font’s x-height, which is the height of the lowercase “x” character. Typefaces with large x-heights are considered more legible, especially for reading smaller text and on screen. To be included in the design system, typefaces must meet our [Clean Typography design standards](https://designsystem.harvardsites.harvard.edu/graphic-design#clean-typography) for legible fonts, “​​Themes must use typefaces with an x-height of 8.3px ±5% when viewed at the browser’s default size (i.e., 16px).” - **Mobile-First Design:** Following our [First Principles of Digital Design](https://designsystem.harvardsites.harvard.edu/guiding-principles#first-principles), we use a mobile-first approach in developing the design system, which promotes a minimalistic approach to design. Mobile-first typography yields a scale composed of the minimal differences needed to effectively convey information structure. - **Visual and Encoded Semantics:** Visual semantics is one aspect of typography, conveying the role and relatedness of elements using visual attributes. For nonvisual users, those semantics are encoded in designs using semantic markup, such as headings, tables, lists, and more. In implementing the design system on web publishing platforms, we prioritize [encoded semantics](https://designsystem.harvardsites.harvard.edu/accessibility#semantics) in our [Accessibility Standards and Guidelines](https://designsystem.harvardsites.harvard.edu/accessibility). For example, content authors are provided options to set the heading level rather than options to change text size and weight. This approach prioritizes encoded relationships and provides greater flexibility for different contexts of use. - **Flexible Mechanics:** Our typographic scale originates in Figma, a collaborative design tool that we use for creating and maintaining the design system. Our design system is founded on a common layout and typographic scale, applied across components and design variations. This helps us achieve a harmonious rhythm across all platforms and websites that utilize the design system. For variations, we use design tokens to apply distinct features, like color and font, and properties like borders and corner radiuses. This approach means we don’t hardcode specific details in the design system, allowing us to adapt our approach, for example, to change our typographic scale from one based on the Golden Ratio to a Major Third scale that better accommodates our new minimum font size. Looking ahead, we will continuously evaluate and refine our typographic scale to meet the evolving needs of content authors and site visitors. ## Further reading - Robert Bringhurst, [*The Elements of Typographic Style*](https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style) - Edward Tufte, [*Envisioning Information*](https://www.edwardtufte.com/book/envisioning-information/) - Richard Hendel, [*On Book Design* (Amazon)](https://www.amazon.com/Book-Design-Richard-Hendel/dp/0300075707) - Patrick Lynch and Sarah Horton, [Typography](https://webstyleguide.com/9-typography.html) in [*Web Style Guide*](https://webstyleguide.com/) - Karyna Khmelyk, [What different types of typographic scales exist?](https://cieden.com/book/sub-atomic/typography/different-type-scale-types) See also:- [ Typography ](/insights-topics/typography)