Default Scale

Reference for the default typography scale values included with Fluid Typography.

DEFAULT_SCALE

The complete default typography scale exported from the plugin.

export const DEFAULT_SCALE: Record<string, ScaleTuple>

Scale Values

Display (Hero Sections)

Scale Name	Value	Mobile Size	Desktop Size	Description
display-2xl	[48, 72]	48px	72px	Massive hero titles
display-xl	[40, 60]	40px	60px	Large hero titles
display-lg	[32, 48]	32px	48px	Medium hero titles
display	[28, 36]	28px	36px	Small hero titles

Headings

Scale Name	Value	Mobile Size	Desktop Size	Description
h1	[28, 36]	28px	36px	Main page headings (matches text-4xl)
h2	[24, 30]	24px	30px	Section headings (matches text-3xl)
h3	[20, 24]	20px	24px	Subsection headings (matches text-2xl)

Body Text

Scale Name	Value	Mobile Size	Desktop Size	Tailwind Equivalent
body	[14, 16]	14px	16px	text-base
body-sm	[13, 14]	13px	14px	text-sm
body-xs	[11, 12]	11px	12px	text-xs

Small Text

Scale Name	Value	Mobile Size	Desktop Size	Description
caption	[10, 11]	10px	11px	Image captions, footnotes
overline	[10, 11]	10px	11px	Labels (uppercase)

Usage in Code

Import and Use

import { DEFAULT_SCALE } from 'fluid-typography'

// Get a specific scale
const h1Scale = DEFAULT_SCALE['h1']  // [28, 36]
const bodyScale = DEFAULT_SCALE.body  // [14, 16]

// Iterate over all scales
Object.entries(DEFAULT_SCALE).forEach(([name, [min, max]]) => {
  console.log(`${name}: ${min}px → ${max}px`)
})

Extend Default Scale

import { DEFAULT_SCALE } from 'fluid-typography'
import type { ScaleTuple } from 'fluid-typography'

// Create extended scale
const extendedScale: Record<string, ScaleTuple> = {
  ...DEFAULT_SCALE,
  'custom-xl': [50, 80],
  'custom-sm': [12, 14]
}

Reference in Config

import { DEFAULT_SCALE } from 'fluid-typography'

// Use scale values for other purposes
export default {
  theme: {
    extend: {
      spacing: {
        'hero-text': `${DEFAULT_SCALE['display-xl'][1]}px`  // 60px
      }
    }
  }
}

Full Scale Object

export const DEFAULT_SCALE = {
  // Display
  'display-2xl': [48, 72],
  'display-xl': [40, 60],
  'display-lg': [32, 48],
  'display': [28, 36],

  // Headings
  'h1': [28, 36],
  'h2': [24, 30],
  'h3': [20, 24],

  // Body
  'body': [14, 16],
  'body-sm': [13, 14],
  'body-xs': [11, 12],

  // Small
  'caption': [10, 11],
  'overline': [10, 11]
}

Additional Properties

Default typography classes also include these properties:

Display Styles

Class	Line Height	Font Weight	Letter Spacing
text-display-2xl	1.0	800	-0.02em
text-display-xl	1.05	800	-0.02em
text-display-lg	1.1	700	-0.015em
text-display	1.1	700	-0.015em

Heading Styles

Class	Line Height	Font Weight	Letter Spacing
text-h1	1.2	700	-0.015em
text-h2	1.3	700	-0.01em
text-h3	1.4	600	-

Body Styles

Class	Line Height	Font Weight
text-body	1.5	400
text-body-sm	1.5	400
text-body-xs	1.5	400

Small Text Styles

Class	Line Height	Font Weight	Letter Spacing	Text Transform
text-caption	1.4	400	-	-
text-overline	1.5	600	0.1em	uppercase

Design Rationale

Mobile Sizes (375px viewport)

Optimized for readability on small screens:

• Hero text remains impactful but fits the viewport
• Body text is large enough to read comfortably
• Spacing scaled appropriately for touch interfaces

Desktop Sizes (1440px viewport)

Matches Tailwind's default sizes where appropriate:

• text-body = text-base (16px) - familiar mental model
• text-body-sm = text-sm (14px)
• text-body-xs = text-xs (12px)
• Display and heading sizes optimized for large screens

Fluid Scaling

Between 375px and 1440px viewports, sizes scale smoothly using CSS clamp():

/* Example: text-h1 */
font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);
/*               └─ 28px  └─ dynamic calculation  └─ 36px */

Comparison with Tailwind Defaults

Fluid Typography	Tailwind CSS	Mobile	Desktop
text-h1	text-4xl	28px	36px
text-h2	text-3xl	24px	30px
text-h3	text-2xl	20px	24px
text-body	text-base	14px	16px
text-body-sm	text-sm	13px	14px
text-body-xs	text-xs	11px	12px

Why Different on Mobile?

Fluid Typography scales down on mobile for:

• Better readability in constrained viewports
• Improved information density
• Reduced horizontal scrolling
• Better touch interface spacing

Accessing in Components

import { DEFAULT_SCALE } from 'fluid-typography'

// Use for calculations
function FontSizeDemo() {
  const [min, max] = DEFAULT_SCALE['h1']
  
  return (
    <div>
      <p>H1 scales from {min}px to {max}px</p>
      <h1 className="text-h1">Example Heading</h1>
    </div>
  )
}

Next Steps

• Types - Explore type definitions
• Functions - Learn about exported functions
• Customization - Add custom scales