Font Styles

• Font _[Font]
  _Change the font family, size, color, and style of the text
• Line Height _[Number]
  _Change the line height of the text
• Letter Spacing _[Number]
  _Change the letter spacing of the text
• Mobile Font Size _[Number]_Set the size of the text on mobile devices
• Mobile Line Height _[Number]
  _Set the line height of the text on mobile devices
• Text Transform _[Choice]
  _Transform the text to be capitalized, uppercase, or lowercase
• Font (Hover) [Font] (Not available in all instances of this group)
• Margin [Spacing] (Not available in all instances of this group)
  Add a top or bottom margin to the text

---

How to Use the Font Styles Field Group

The Font Styles field group is a core component of the Rubric theme that appears across multiple modules to ensure consistent typography throughout your educational or content-heavy website. When you’re editing modules in the HubSpot page editor, you’ll find these typography controls in the styling sections of text-based modules like headings, paragraphs, callouts, and content blocks.

Responsive Typography Best Practices

The mobile-specific font size and line height controls are particularly important for educational content where readability is crucial. Start by setting your desktop font sizes, then use the mobile controls to ensure text remains legible on smaller screens. A good rule of thumb is to increase mobile font sizes by 10-15% compared to desktop for body text, especially for resource-heavy pages where users need to consume detailed information.

Optimizing for Educational Content

Since Rubric is designed for education institutions, consider using the letter spacing controls to improve readability for dense academic content. Slightly increased letter spacing (0.5-1px) can make lengthy course descriptions or policy documents easier to scan. The text transform option works well for creating visual hierarchy—use uppercase sparingly for section headers or category labels.

Hover Effects and Spacing

When the hover font option is available, use it strategically on interactive elements like course titles or event listings to provide clear visual feedback. The margin controls help you fine-tune spacing between text elements without needing custom CSS, which is especially useful when building course catalogs or event schedules where consistent spacing enhances the structured, professional appearance that educational institutions require.