Syracuse University Syracuse University
Digital Design System

Text

Classes to adjust font size, weight, style and color

Font Size

The base font size for the digital design system is 16px with body copy at 20px. You may adjust the font size of an element by using the utility classes below.

It is strongly recommended to use the default text sizes but if a font size does need to be adjusted, please make sure it follows standard conventions for page hierarchy.

Class Name CSS Value
.font-size-12px

font-size: .75rem;
line-height: 1.35rem;
.font-size-14px

font-size: .875rem;
line-height: 1.4875rem;
.font-size-16px

font-size: 1rem;
line-height: 1.5rem;
.font-size-18px

font-size: 1.125rem;
line-height: 1.6875rem;
.font-size-20px

font-size: 1.25rem;
line-height: 1.75rem;
.font-size-22px

font-size: 1.375rem;
line-height: 1.925rem;
.font-size-24px

font-size: 1.5rem;
line-height: 2.1rem;
.font-size-26px

font-size: 1.625rem;
line-height: 2.275rem;
.font-size-28px

font-size: 1.75rem;
line-height: 2.45rem;
.font-size-30px

font-size: 1.875rem;
line-height: 2.625rem;
.font-size-32px

font-size: 2rem;
line-height: 2.8rem;
.font-size-34px

font-size: 2.125rem;
line-height: 2.975rem;
.font-size-36px

font-size: 2.25rem;
line-height: 3.15rem;
.font-size-38px

font-size: 2.375rem;
line-height: 3.325rem;
.font-size-40px

font-size: 2.5rem;
line-height: 3.5rem;
.font-size-42px

font-size: 2.625rem;
line-height: 3.675rem;
.font-size-44px

font-size: 2.75rem;
line-height: 3.85rem;
.font-size-48px

font-size: 3rem;
line-height: 4.2rem;
.font-size-56px

font-size: 3.5rem;
line-height: 4.9rem;
.font-size-60px

font-size: 3.75rem;
line-height: 5.25rem;
.font-size-72px

font-size: 4.5rem;
line-height: 5.75rem;

Responsive Font Sizes

The above utility classes for font size can be made responsive by adding a breakpoint modifier to the end of the class name. For example, if you want a paragraph text to be 22px on desktop and above but you can use the class .font-size-22px-md.

<p class="font-size-22px-md">The text is 22px for viewports 768px and above.</p>

The text is 22px for viewports 768px and above.

Font Weight and Style

Class Name CSS Value
.font-serif font-family: ShermanSerif, Georgia, serif;
.font-sans font-family: ShermanSans, Verdana, sans-serif;
.font-weight-normal font-weight: 500;
.font-weight-bold font-weight: 700;
.text-caps text-transform: uppercase;

Font Color

Example Class Name

Syracuse University

 .text-black

Syracuse University

 .text-white

Syracuse University

 .text-gray-light

Syracuse University

 .text-gray

Syracuse University

 .text-gray-dark

Syracuse University

 .text-blue

Syracuse University

 .text-orange

Syracuse University

 .text-orange-dark