Mod provides a comprehensive typography system built on modern web fonts with carefully crafted type scales for optimal readability and visual hierarchy.

Font Stacks

Mod uses two primary font stacks defined as CSS custom properties:

Primary Font Stack

The main font stack used for all body text and UI elements:

--mod-font-stack: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

This stack prioritizes the Inter typeface, falling back to system fonts for optimal performance and native feel across different platforms.

Monospace Font Stack

Used for code blocks, inline code, and other monospaced content:

--mod-code-font-stack: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

This comprehensive monospace stack ensures consistent code presentation across all platforms and browsers.

Base Typography

Body Text

The default body typography is optimized for readability:

• Font Family: Inter (with system font fallbacks)
• Font Size: 15px
• Line Height: 25px (1.67 ratio)
• Font Weight: 400 (regular)
• Text Rendering: Optimized with optimizeLegibility, -webkit-font-smoothing: antialiased, and -moz-osx-font-smoothing: grayscale

Type Scale

Mod uses a carefully crafted type scale for headings that maintains visual hierarchy while ensuring readability:

Text Styling Elements

Emphasis and Strong Text

• <em>: Italic styling for emphasis
• <strong>: Bold styling (font-weight: 600) for strong importance
• <dt> (Definition Terms): Bold styling (font-weight: 600) with 8px bottom margin

Code Typography

Mod provides specialized styling for code elements:

Inline Code

Inline code elements (<code> not within <pre>) receive:

• Font Family: Monospace stack
• Font Weight: 500 (medium)
• Font Size: 14px
• Line Height: 22px
• Padding: 2px 4px
• Border Radius: Uses --mod-border-radius (5px)
• Background: Theme-appropriate background color

Code Blocks

Code blocks (<pre><code>) use the full monospace font stack and include comprehensive syntax highlighting for both light and dark themes.

Color Utilities

Mod provides utility classes for applying theme colors to text:

.mod-color-brand    /* Brand color */
.mod-color-info     /* Info color */
.mod-color-success  /* Success color */
.mod-color-warning  /* Warning color */
.mod-color-danger   /* Danger color */

These utilities apply both text color and text-decoration color for consistent styling.

Text Alignment Utilities

Control text alignment with utility classes:

.mod-text-left     /* Left align text */
.mod-text-center   /* Center align text */
.mod-text-right    /* Right align text */

Special Text Effects

Gradient Text

Create gradient text effects using the .mod-text-gradient utility class:

<span class="mod-text-gradient" style="background: linear-gradient(45deg, #6150FD, #3A7BFC);">
  Gradient Text
</span>

This utility uses background-clip: text and color: transparent to create text with gradient backgrounds.

Text Wrapping

Control text wrapping behavior:

.mod-nowrap  /* Prevents text wrapping */

Responsive Considerations

Mod's typography system is designed to work well across all screen sizes. The base font size of 15px provides good readability on both desktop and mobile devices, while the carefully calculated line heights ensure optimal reading experience.

Customizing Typography

You can override Mod's typography by targeting the CSS custom properties:

[data-mod-theme="light"],
[data-mod-theme="dark"] {
  --mod-font-stack: "Your Custom Font", 
    "Inter", 
    -apple-system, 
    BlinkMacSystemFont, 
    system-ui, 
    sans-serif;
}