Types

TypeScript type definitions for Fluid Typography.

ScaleTuple

Represents a typography scale with minimum and maximum pixel values.

export type ScaleTuple = [number, number];

Usage

import type { ScaleTuple } from 'fluid-typography'

const myScale: ScaleTuple = [14, 16]  // min: 14px, max: 16px

Examples

// Display text
const displayXL: ScaleTuple = [40, 60]

// Body text
const body: ScaleTuple = [14, 16]

// Caption
const caption: ScaleTuple = [10, 11]

ScaleConfig

Configuration for a custom typography scale.

export interface ScaleConfig {
  size: ScaleTuple;
  lineHeight?: number;
  fontWeight?: string;
  letterSpacing?: string;
  textTransform?: 'uppercase' | 'lowercase' | 'capitalize';
}

Properties

Property	Type	Required	Default	Description
size	ScaleTuple	Yes	-	Min and max font sizes in pixels
lineHeight	number	No	1.5	Line height (unitless)
fontWeight	string	No	'400'	Font weight
letterSpacing	string	No	undefined	Letter spacing with unit
textTransform	'uppercase' | 'lowercase' | 'capitalize'	No	undefined	Text transform

Usage

import type { ScaleConfig } from 'fluid-typography'

const heroConfig: ScaleConfig = {
  size: [50, 80],
  lineHeight: 1.1,
  fontWeight: '900',
  letterSpacing: '-0.02em',
  textTransform: 'uppercase'
}

Examples

// Minimal configuration
const basic: ScaleConfig = {
  size: [20, 24]
}

// Full configuration
const advanced: ScaleConfig = {
  size: [48, 96],
  lineHeight: 1.0,
  fontWeight: '900',
  letterSpacing: '-0.03em',
  textTransform: 'uppercase'
}

// Dashboard metric
const metric: ScaleConfig = {
  size: [40, 60],
  lineHeight: 1.2,
  fontWeight: '700'
}

PluginOptions

Options for configuring the Fluid Typography plugin.

export interface PluginOptions {
  customScales?: Record<string, ScaleConfig>;
  minViewportWidth?: number;
  maxViewportWidth?: number;
}

Properties

Property	Type	Required	Default	Description
customScales	Record<string, ScaleConfig>	No	{}	Custom typography scales to add
minViewportWidth	number	No	375	Minimum viewport width in pixels
maxViewportWidth	number	No	1440	Maximum viewport width in pixels

Usage

import type { PluginOptions } from 'fluid-typography'

const options: PluginOptions = {
  customScales: {
    'hero': {
      size: [50, 80],
      fontWeight: '900'
    }
  },
  minViewportWidth: 320,
  maxViewportWidth: 1920
}

Examples

// Default options
const minimal: PluginOptions = {}

// Custom scales only
const withScales: PluginOptions = {
  customScales: {
    'hero': { size: [50, 80] },
    'mega': { size: [60, 120] }
  }
}

// Custom viewport only
const withViewport: PluginOptions = {
  minViewportWidth: 320,
  maxViewportWidth: 1920
}

// Everything combined
const full: PluginOptions = {
  customScales: {
    'hero': {
      size: [50, 80],
      lineHeight: 1.1,
      fontWeight: '900',
      letterSpacing: '-0.02em'
    }
  },
  minViewportWidth: 320,
  maxViewportWidth: 1920
}

Type Guards

Validating Scale Tuples

import type { ScaleTuple } from 'fluid-typography'

function isValidScale(scale: unknown): scale is ScaleTuple {
  return (
    Array.isArray(scale) &&
    scale.length === 2 &&
    typeof scale[0] === 'number' &&
    typeof scale[1] === 'number' &&
    scale[0] < scale[1]
  )
}

// Usage
const scale = [14, 16]
if (isValidScale(scale)) {
  // scale is ScaleTuple
}

Using with Tailwind Config

tailwind.config.ts

import type { Config } from 'tailwindcss'
import fluidTypography from 'fluid-typography'
import type { PluginOptions } from 'fluid-typography'

const typographyOptions: PluginOptions = {
  customScales: {
    'hero': {
      size: [50, 80],
      lineHeight: 1.1,
      fontWeight: '900'
    }
  },
  minViewportWidth: 320,
  maxViewportWidth: 1920
}

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [fluidTypography(typographyOptions)]
} satisfies Config

Related

• Plugin Functions - Exported functions and utilities
• Default Scale - Default typography scale values
• Basic Usage Examples - See usage examples