Typography System

OxyMade’s Typography System provides a consistent, scalable approach to font sizing with support for fluid typography and modular scales.

Overview

The typography system includes:

• Modular type scales - Mathematical ratio-based sizing
• Fluid typography - Sizes that scale smoothly between breakpoints
• Responsive variants - Breakpoint-specific overrides
• Font weight utilities - Consistent weight classes

Type Scale

Text Sizes

Text sizes follow the Tailwind scale with mobile/desktop responsive pairs:

Text sizes are controlled by the fluid text sizing toggle in OxyMade settings, independent of heading settings.

Heading Sizes

Semantic heading classes with three-tier sizing hierarchy:

Heading Generation Priority:

1. Typescale Mode (if enabled) - Uses mathematical calculation based on base size and scale ratio
2. Custom Sizes (if typescale off and custom sizes configured) - Uses user-defined values
3. Default Sizes (if typescale off, no custom sizes) - Uses built-in defaults

Headings respect the fluid vs fixed setting from the typography configuration panel.

Fluid Typography

Fluid typography scales smoothly between mobile and desktop sizes using CSS clamp().

How It Works

Fluid sizes use CSS clamp() for smooth interpolation:

font-size: clamp(mobile-size, preferred-size, desktop-size);

The size scales smoothly based on viewport width, eliminating jarring size jumps at breakpoints.

Controlling Fluid Typography

For Text Sizes (text-xs through text-7xl):

• Use the “Fluid Text Sizing” toggle in OxyMade > Settings > Step 3
• When enabled: sizes use clamp() between mobile and desktop values
• When disabled: sizes use only the desktop value as fixed px

For Headings (hero, h1-h6):

• Use the “Fluid” toggle in OxyMade > Typography > Configure
• When enabled: headings use clamp() between mobile and desktop values
• When disabled: headings use only the desktop value as fixed px

Configuration

Text and heading sizes are defined with mobile/desktop pairs:

[
    'text-base' => ['mobile' => 16, 'desktop' => 16],
    'text-lg' => ['mobile' => 17, 'desktop' => 18],
    'h1' => ['mobile' => 28, 'desktop' => 40],
    'h2' => ['mobile' => 24, 'desktop' => 32],
]

Note: Typescale settings (base size, ratio) are only used when typescale mode is enabled in the Configure panel.

Type Scale Ratios

Only used when Typescale Mode is enabled in OxyMade > Typography > Configure.

Choose a ratio for mathematical scaling of headings:

Ratio Impact (Typescale Mode Only)

Each heading level multiplies by the ratio:

Base: 16px (1.333 ratio)
h3 (level 3): 16 × 1.333³ = 37.6px
h2 (level 4): 16 × 1.333⁴ = 50.1px
h1 (level 5): 16 × 1.333⁵ = 66.8px

When Not Using Typescale

When typescale is disabled, headings use the default or custom sizes directly, and these ratios have no effect.

Font Weights

Available weight utilities:

Usage in Oxygen

Apply in the class field:

text-lg font-semibold

Or use the corresponding selector from OxyMade collections.

Using Typography

CSS Classes

<h1 class="h1 font-bold">Page Title</h1>
<p class="text-base">Body text content...</p>
<span class="text-sm font-medium">Caption text</span>

CSS Variables

Typography values are also available as CSS variables:

.custom-heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

Oxygen Integration

After syncing, typography selectors appear in Oxygen’s class picker under:

• OxyMade Typography - Font sizes
• OxyMade System - Font weights

Responsive Typography

Breakpoint Classes

Apply different sizes at different breakpoints:

<h2 class="text-xl lg-text-3xl">Responsive Heading</h2>

Available breakpoint prefixes:

• sm- - Phone portrait
• md- - Phone landscape
• lg- - Tablet portrait
• xl- - Tablet landscape

Fluid vs Breakpoint

Choose the approach that fits your needs:

You can combine both:

<h1 class="h1 xl-hero">Title</h1>

Configuration & Setup

Admin Panel

Configure typography in OxyMade > Typography > Configure:

Heading Settings:

• Typescale Mode - Enable to use mathematical scaling, disable for fixed/custom sizes
• Fluid - Toggle whether headings use clamp() (smooth) or fixed px values
• Base Sizes - Mobile/desktop base font sizes (only used in typescale mode)
• Scale Ratios - Ratio multipliers (only used in typescale mode)
• Custom Sizes - Override specific heading sizes (only used when typescale is off)

Text Settings (OxyMade > Settings > Step 3):

• Fluid Text Sizing - Toggle whether text sizes use clamp() (smooth) or fixed px values

Reinstalling Typography

Click “Reinstall Typography” button to sync all font sizes to Oxygen after:

• Enabling/disabling fluid typography
• Changing base sizes or ratios
• Updating custom size definitions

The reinstall process:

1. Reads current configuration and text sizes
2. Generates variable definitions
3. Syncs to Oxygen as CSS variables and classes
4. Updates the OxyMade Typography collection

Programmatic Configuration

Text and heading sizes are defined in includes/typography.php:

// Default text sizes (Tailwind scale)
'text-base' => ['mobile' => 16, 'desktop' => 16],
'text-lg' => ['mobile' => 17, 'desktop' => 18],
'text-xl' => ['mobile' => 18, 'desktop' => 20],

// Default heading sizes
'h1' => ['mobile' => 28, 'desktop' => 40],
'h2' => ['mobile' => 24, 'desktop' => 32],

To customize, edit get_default_custom_sizes() in includes/typography.php and click Reinstall Typography.

Best Practices

Hierarchy

Establish clear visual hierarchy:

hero/h1: Page title (one per page)
h2: Section headings
h3: Subsection headings
text-base: Body text
text-sm: Secondary text
text-xs: Captions, labels

Consistency

Use the scale consistently:

/* Good - using scale */
.card-title { font-size: var(--text-lg); }
.card-body { font-size: var(--text-base); }

/* Avoid - arbitrary values */
.card-title { font-size: 19px; }
.card-body { font-size: 15px; }

Accessibility

• Ensure text meets WCAG contrast requirements
• Don’t rely on size alone for meaning
• Test with browser zoom up to 200%

Troubleshooting

New Sizes Not Appearing After Edit

Problem: You edited text sizes in includes/typography.php but the changes aren’t showing in Oxygen.

Solution:

1. Make sure you edited get_default_custom_sizes() in includes/typography.php
2. Click “Reinstall Typography” button in OxyMade > Typography
3. The new values will sync to Oxygen’s OxyMade Typography collection

Sizes Not Applying in Editor

1. Verify typography was installed in setup (check OxyMade > Typography > Status)
2. Click “Reinstall Typography” to re-sync all variables
3. Clear Oxygen’s cache and refresh the editor
4. Check that the correct class or CSS variable is applied

Fluid Typography Not Working

For text sizes:

1. Enable “Fluid Text Sizing” in OxyMade > Settings > Step 3
2. Click “Reinstall Typography”

For headings:

1. Disable typescale or enable fluid in OxyMade > Typography > Configure
2. Click “Reinstall Typography”

General checks:

• Confirm your browser supports CSS clamp() (all modern browsers)
• Verify viewport meta tag is present: <meta name="viewport" content="width=device-width">
• Check that clamp() values generated correctly in browser DevTools

Heading Sizes Using Wrong Calculation

Problem: Headings are calculated with typescale math when you want fixed sizes, or vice versa.

Solution:

1. Go to OxyMade > Typography > Configure
2. Check Typescale Mode toggle:
   • ON → Uses base size × ratio calculation
   • OFF → Uses fixed/custom sizes from get_default_custom_sizes()
3. Click “Reinstall Typography”

Related

• Spacing System
• CSS Variables Reference
• Configuration