#  Typography options 

 



 ##  

  expand\_more  

 
  

 

## These options define the heading and body font pairing used across a site.

Each option is designed for readability and accessibility. The difference is tone, contrast, and overall voice.



 

 ### Baskerville and Source Sans Pro

Traditional contrast with an academic tone



 

   ![Baskerville font demo](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2026-01/Bask_5.png?itok=Lp-Cxzg8) 

 

 

 

 ### Merriweather and Roboto

Warm and readable for content-heavy sites



 

   ![Merriweather font sample](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2026-01/merry_2.png?itok=ZrBXdRN7) 

 

 

 

 ### Inter and Inter

Clean and modern with minimal contrast



 

   ![Inter font sample](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2026-01/Inter_2.png?itok=kVSHM_sd) 

 

 

 

  

 

 

 

##  How typography fits with other visual systems 

**Font pairings control the typography used for headings and body text.**  
They do not change layout, component structure, or how colors are applied.

Site styles and color roles are configured separately and work consistently across all typography options. This separation allows you to adjust the tone and readability of text without affecting layout or color behavior.



 

##  Accessibility 

**All font pairings are designed to meet accessibility and readability requirements.**  
Font pairings are chosen to support legibility, sufficient contrast, and clear hierarchy across components and layouts.

Accessibility is handled through platform standards and component implementation, not by individual typography choices.

All typography options meet [accessibility and readability standards](/accessibility "Accessibility").