Typeface
Our preferred typeface for digital products is Helvetica. When used in a web safe font stack consisting of Helvetica, Arial, and sans-serif system fonts, this choice removes any licensing costs that are barrier of use for smaller departments and pairs well with the typeface used in our new department logo systems. We have limited our use to two weights, regular and bold, to maintain a consistent look across all devices.
Alternative Typescale
Our system uses a harmonious progression of font sizes and styles, each with an intended application and meaning. The scale is based on a progression of 1.125x the base font size of 16px to allow multiple sizes mixed in to fulfill specific needs while maintaining legibility. A 1rem or 16px base font size was selected because it allows for a scale that harmonious with the 4pt spacing system as well as meets ADA compliancy guidelines.
- Aa
- --ucla-font-size-x-small
- $ucla-font-size-x-small
- 0.79rem / 12px
- Aa
- --ucla-font-size-small
- $ucla-font-size-small
- 0.889rem / 14px
- Aa
- --ucla-font-size
- $ucla-font-size
- 1rem / 16px
- Aa
- --ucla-font-size-medium
- $ucla-font-size-medium
- 1.125rem / 18px
- Aa
- --ucla-font-size-large
- $ucla-font-size-large
- 1.266rem / 20px
- Aa
- --ucla-font-size-x-large
- $ucla-font-size-x-large
- 1.424rem / 22px
- Aa
- --ucla-font-size-xx-large
- $ucla-font-size-xx-large
- 1.602rem / 25px
- Aa
- --ucla-font-size-xxx-large
- $ucla-font-size-xxx-large
- 1.802rem / 28px
- Aa
- --ucla-font-size-xxxx-large
- $ucla-font-size-xxxx-large
- 2.027rem / 36px;
- Aa
- --ucla-font-size-display
- $ucla-font-size-display
- 2.566rem / 41px
- Aa
- --ucla-font-size-x-display
- $ucla-font-size-x-display
- 2.566rem / 41px
- Aa
- --ucla-font-size-x-display
- $ucla-font-size-x-display
- 2.887rem / 46px
- Aa
- --ucla-font-size-xx-display
- $ucla-font-size-xx-display
- 3.653rem / 58px
- Aa
- --ucla-font-size-xxx-display
- $ucla-font-size-xxx-display
- 4.11rem / 65px
- Aa
- --ucla-font-size-xxxx-display
- $ucla-font-size-xxxx-display
- 4.624rem / 73px
Initial Stratcomm Typescale
Our system uses a harmonious progression of font sizes and styles, each with an intended application and meaning. The scale is based on a progression of 1.5x the base font size of 16px with a few between sizes mixed into fulfill specific needs while maintaining legibility. A 16px base font size was selected because it allows for a scale that harmonious with the 4pt spacing system as well as meets ADA compliancy guidelines.
- Aa
- --ucla-stratcomm-font-size-x-small
- $ucla-stratcomm-font-size-x-small
- .75rem; / 12px
- Aa
- --ucla-stratcomm-font-size-small
- $ucla-stratcomm-font-size-small
- .8rem / 12.8px
- Aa
- --ucla-stratcomm-font-size
- $ucla-stratcomm-font-size
- 1rem / 16px
- Aa
- --ucla-stratcomm-font-size-medium
- $ucla-stratcomm-font-size-medium
- 1.125rem / 20px
- Aa
- --ucla-stratcomm-font-size-large
- $ucla-stratcomm-font-size-large
- 1.5rem / 24px
- Aa
- --ucla-stratcomm-font-size-x-large
- $ucla-stratcomm-font-size-x-large
- 2.25rem / 36px
- Aa
- --ucla-stratcomm-font-size-xx-large
- $ucla-stratcomm-font-size-xx-large
- 3rem / 48px
- Aa
- --ucla-stratcomm-font-size-display
- $ucla-stratcomm-font-size-display
- 4.5rem / 54px