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

Available Sizes

From smallest to largest:

Heading Sizes

Semantic heading classes:

Fluid Typography

Fluid typography scales smoothly between mobile and desktop sizes.

Configuration

[
    'fluid_enabled' => true,
    'base_font_size_mobile' => 16,
    'base_font_size_desktop' => 18,
    'typescale_mobile' => 1.25,
    'typescale_desktop' => 1.33
]

How It Works

Fluid sizes use CSS clamp():

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

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

Type Scale Ratios

Choose a ratio for your type scale:

Ratio Impact

Each step up in the scale multiplies by the ratio:

Base: 16px (1.333 ratio)
lg: 16 × 1.333 = 21.3px
xl: 21.3 × 1.333 = 28.4px
2xl: 28.4 × 1.333 = 37.9px

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 Options

Admin Settings

Configure typography in OxyMade > Typography:

1. Enable/Disable Fluid - Toggle fluid typography
2. Base Sizes - Set mobile and desktop base sizes
3. Scale Ratios - Choose mobile and desktop ratios
4. Custom Sizes - Add custom size definitions

Code Configuration

$typography_config = [
    'typescale_enabled' => true,
    'fluid_enabled' => true,
    'base_font_size_mobile' => 16,
    'base_font_size_desktop' => 18,
    'typescale_mobile' => 1.25,
    'typescale_desktop' => 1.33,
    'custom_sizes' => [
        'massive' => [
            'mobile' => '3rem',
            'desktop' => '5rem'
        ]
    ]
];

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

Sizes Not Applying

1. Verify typography was installed in setup
2. Check that selectors are synced with Oxygen
3. Clear Oxygen’s cache

Fluid Not Working

1. Confirm fluid_enabled is true
2. Check that CSS clamp() is supported
3. Verify viewport meta tag is present

Scale Looks Off

1. Review your chosen ratio
2. Check base sizes aren’t too extreme
3. Consider your content length and line width

Related

• Spacing System
• CSS Variables Reference
• Configuration