Typography Presets

Pre-built typography classes that combine font size, line height, letter spacing, font family, and font weight for consistent text styling throughout the design system.

Headings

Heading styles for page titles, section headers, and content hierarchy.

Class Name	Description	Font Size	Line Height	Letter Spacing	Font Weight	Sample
.spr-heading-xl	Extra large heading	spr-font-size-900	spr-line-height-1000	spr-letter-spacing-densest	spr-font-medium	Heading XL
.spr-heading-lg	Large heading	spr-font-size-800	spr-line-height-900	spr-letter-spacing-denser	spr-font-medium	Heading Large
.spr-heading-md	Medium heading	spr-font-size-700	spr-line-height-800	spr-letter-spacing-denser	spr-font-medium	Heading Medium
.spr-heading-sm	Small heading	spr-font-size-600	spr-line-height-700	spr-letter-spacing-dense	spr-font-medium	Heading Small
.spr-heading-xs	Extra small heading	spr-font-size-500	spr-line-height-600	spr-letter-spacing-dense	spr-font-medium	Heading XS

Subheadings

Subheading styles for section divisions and content organization.

Class Name	Description	Font Size	Line Height	Letter Spacing	Font Weight	Sample
.spr-subheading-sm	Small subheading	spr-font-size-400	spr-line-height-500	spr-letter-spacing-dense	spr-font-medium	Subheading Small
.spr-subheading-xs	Extra small subheading	spr-font-size-300	spr-line-height-400	spr-letter-spacing-normal	spr-font-medium	Subheading XS

Body Text

Body text styles for paragraphs, descriptions, and general content.

Base Body Classes

Class Name	Description	Font Size	Line Height	Sample
.spr-body-lg	Large body text base	spr-font-size-400	spr-line-height-600	Large body text
.spr-body-md	Medium body text base	spr-font-size-300	spr-line-height-500	Medium body text
.spr-body-sm	Small body text base	spr-font-size-200	spr-line-height-400	Small body text
.spr-body-xs	Extra small body text base	spr-font-size-100	spr-line-height-300	Extra small body text

Body Text with Font Weight Variations

Large Body Text

Class Name	Font Weight	Decoration	Sample
.spr-body-lg-regular	Normal	-	Regular large text
.spr-body-lg-regular-underline	Normal	Underlined	Underlined regular large text
.spr-body-lg-regular-medium	Medium	-	Medium weight large text
.spr-body-lg-medium-underline	Medium	Underlined	Underlined medium large text

Medium Body Text

Class Name	Font Weight	Decoration	Sample
.spr-body-md-regular	Normal	-	Regular medium text
.spr-body-md-regular-underline	Normal	Underlined	Underlined regular medium text
.spr-body-md-regular-medium	Medium	-	Medium weight medium text
.spr-body-md-medium-underline	Medium	Underlined	Underlined medium medium text

Small Body Text

Class Name	Font Weight	Decoration	Sample
.spr-body-sm-regular	Normal	-	Regular small text
.spr-body-sm-regular-underline	Normal	Underlined	Underlined regular small text
.spr-body-sm-regular-medium	Medium	-	Medium weight small text
.spr-body-sm-medium-underline	Medium	Underlined	Underlined medium small text

Extra Small Body Text

Class Name	Font Weight	Decoration	Sample
.spr-body-xs-regular	Normal	-	Regular extra small text
.spr-body-xs-regular-underline	Normal	Underlined	Underlined regular extra small text
.spr-body-xs-regular-medium	Medium	-	Medium weight extra small text
.spr-body-xs-medium-underline	Medium	Underlined	Underlined medium extra small text

Labels

Label styles for form inputs, UI components, and small text elements.

Base Label Classes

Class Name	Description	Font Size	Line Height	Letter Spacing	Sample
.spr-label-sm	Small label base	spr-font-size-200	spr-line-height-200	spr-letter-spacing-wide	SMALL LABEL
.spr-label-xs	Extra small label base	spr-font-size-100	spr-line-height-100	spr-letter-spacing-wide	XS LABEL

Label Font Weight Variations

Small Labels

Class Name	Font Weight	Sample
.spr-label-sm-regular	Normal	REGULAR SMALL LABEL
.spr-label-sm-medium	Medium	MEDIUM SMALL LABEL

Extra Small Labels

Class Name	Font Weight	Sample
.spr-label-xs-regular	Normal	REGULAR XS LABEL
.spr-label-xs-medium	Medium	MEDIUM XS LABEL

Supporting Utilities

Font Size Classes

Class Name	Underlying Class
.spr-font-size-100	spr-text-100
.spr-font-size-200	spr-text-200
.spr-font-size-300	spr-text-300
.spr-font-size-400	spr-text-400
.spr-font-size-500	spr-text-500
.spr-font-size-600	spr-text-600
.spr-font-size-700	spr-text-700
.spr-font-size-800	spr-text-800
.spr-font-size-900	spr-text-900
.spr-font-size-1000	spr-text-1000

Line Height Classes

Class Name	Underlying Class
.spr-line-height-none	spr-leading-none
.spr-line-height-100	spr-leading-100
.spr-line-height-200	spr-leading-200
.spr-line-height-300	spr-leading-300
.spr-line-height-400	spr-leading-400
.spr-line-height-500	spr-leading-500
.spr-line-height-600	spr-leading-600
.spr-line-height-700	spr-leading-700
.spr-line-height-800	spr-leading-800
.spr-line-height-900	spr-leading-900
.spr-line-height-1000	spr-leading-1000

Letter Spacing Classes

Class Name	Underlying Class
.spr-letter-spacing-none	spr-tracking-spacing-none
.spr-letter-spacing-densest	spr-tracking-spacing-densest
.spr-letter-spacing-denser	spr-tracking-spacing-denser
.spr-letter-spacing-dense	spr-tracking-spacing-dense
.spr-letter-spacing-normal	spr-tracking-spacing-normal
.spr-letter-spacing-wide	spr-tracking-spacing-wide
.spr-letter-spacing-wider	spr-tracking-spacing-wider
.spr-letter-spacing-widest	spr-tracking-spacing-widest

Examples

<!-- Page hierarchy -->
<h1 class="spr-heading-xl spr-text-color-strong">Main Page Title</h1>
<h2 class="spr-heading-lg spr-text-color-base">Section Title</h2>
<h3 class="spr-subheading-sm spr-text-color-supporting">Subsection</h3>

<!-- Content blocks -->
<p class="spr-body-lg-regular spr-text-color-base">
  This is the main content paragraph with larger text for better readability.
</p>

<p class="spr-body-md-regular spr-text-color-base">This is standard body text for most content.</p>

<p class="spr-body-sm-regular spr-text-color-weak">This is smaller text for secondary information or captions.</p>

<!-- Form labels -->
<label class="spr-label-sm-medium spr-text-color-strong">FORM FIELD LABEL</label>
<input type="text" class="spr-body-md-regular" />

<!-- Interactive elements -->
<a href="#" class="spr-body-md-regular-medium spr-text-color-brand-base hover:spr-text-color-brand-hover">
  Link with medium weight
</a>

<a href="#" class="spr-body-md-regular-underline spr-text-color-brand-base"> Underlined link </a>

<!-- Status messages -->
<div class="spr-body-sm-regular spr-text-color-success-base">Success message in small text</div>

<div class="spr-body-xs-regular spr-text-color-danger-base">Error caption or small warning text</div>

Best Practices

• Use semantic hierarchy: Start with spr-heading-xl for main titles and work down
• Maintain consistency: Use the same text styles for similar content types
• Combine with color utilities: Pair typography classes with semantic text colors
• Consider accessibility: Ensure sufficient contrast between text and background colors
• Mobile responsiveness: Consider smaller sizes on mobile devices