Control optical sizing for variable fonts that automatically adjust letterforms based on display size. Optical sizing optimizes stroke weight, spacing, and x-height for maximum readability at any size.

Presets

Target Element

Font Optical Sizing

Browser adjusts optical sizing based on font-size

Font Family

Has Optical SizingAxis range: 8-60

Font Size: 24px

Heading

Font Weight: 400

LightRegularBoldBlack

Preview Options

Show Auto vs None ComparisonShow Size Range Examples

Container Width: 600px

Preview Text

Configuration

Live Preview

Typography matters in design.

Font: Source Serif 4Size: 24pxWeight: 400Optical Sizing: auto

Auto vs None Comparison

font-optical-sizing: auto

Typography matters in design.

Letterforms optimized for the display size

font-optical-sizing: none

Typography matters in design.

Uses default optical size (usually optimized for ~12pt)

Optical Sizing Across Size Range

See how optical sizing adapts letterforms at different display sizes

10px - Caption

Hamburgefonstiv

12px - Footnote

Hamburgefonstiv

14px - UI Text

Hamburgefonstiv

16px - Body

Hamburgefonstiv

18px - Large Body

Hamburgefonstiv

24px - H4

Hamburgefonstiv

32px - H3

Hamburgefonstiv

48px - H2

Hamburgefonstiv

64px - H1

Hamburgefonstiv

96px - Display

Hamburgefonstiv

Generated CSS

body {
  font-optical-sizing: auto;
  font-size: 24px;
}

Full Example with Font Family

/* Font Optical Sizing */
body {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 400;
  /* Variable font with optical sizing axis (opsz) */
  /* Axis range: 8-60 */
}

Code Examples

Basic Optical Sizing

/* Enable optical sizing (default) */
body {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
}

/* Disable optical sizing */
.legacy-style {
  font-optical-sizing: none;
}

Typography Scale with Optical Sizing

/* All elements use optical sizing */
:root {
  font-optical-sizing: auto;
}

/* Display headline - refined for large size */
.display {
  font-family: "Source Serif 4", serif;
  font-size: 72px;
  font-weight: 300;
  /* opsz automatically adjusts to ~72 */
}

/* Body text - optimized for reading */
.body-text {
  font-family: "Source Serif 4", serif;
  font-size: 16px;
  font-weight: 400;
  /* opsz automatically adjusts to ~16 */
}

/* Caption - enhanced legibility */
.caption {
  font-family: "Source Serif 4", serif;
  font-size: 12px;
  font-weight: 500;
  /* opsz automatically adjusts to ~12 */
}

Using font-variation-settings for Manual Control

/* Manual optical size control */
.manual-opsz {
  font-family: "Source Serif 4", serif;
  font-size: 24px;
  /* Override automatic opsz */
  font-variation-settings: "opsz" 48;
}

/* Force small text appearance at large size */
.small-opsz-large-size {
  font-size: 48px;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 12;
}

/* Force display appearance at small size */
.large-opsz-small-size {
  font-size: 14px;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 72;
}

Responsive Typography

/* Optical sizing adapts automatically */
.responsive-heading {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 5vw, 4rem);
  /* opsz automatically adjusts as size changes */
}

/* Media query adjustments */
@media (max-width: 768px) {
  .hero-text {
    font-size: 36px;
    /* opsz auto-adjusts for new size */
  }
}

@media (min-width: 1200px) {
  .hero-text {
    font-size: 72px;
    /* opsz auto-adjusts for larger size */
  }
}

Variable Font with Multiple Axes

/* Roboto Flex with all axes */
@font-face {
  font-family: "Roboto Flex";
  src: url("RobotoFlex-Variable.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

.flexible-text {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-size: 24px;

  /* Combine with other variable axes */
  font-weight: 500;
  font-stretch: 100%;

  /* opsz range: 8-144 */
  /* Automatically uses opsz: 24 */
}

/* Custom axis combination */
.custom-axes {
  font-variation-settings:
    "wght" 450,
    "wdth" 110,
    "opsz" 36,  /* Manual optical size */
    "GRAD" 0;
}

Print Stylesheet

/* Screen styles */
@media screen {
  body {
    font-optical-sizing: auto;
  }
}

/* Print - adjust for physical media */
@media print {
  body {
    font-optical-sizing: auto;
    /* Browsers typically use pt for print */
    font-size: 11pt;
    /* opsz adjusts for print size */
  }

  h1 {
    font-size: 24pt;
    /* opsz auto-adjusts for 24pt */
  }
}

Reference

font-optical-sizing Values

Value	Description	Effect
`auto`	Default. Enable optical sizing	Browser sets opsz axis based on font-size
`none`	Disable optical sizing	Uses font default (typically opsz: 12)

Variable Fonts with Optical Sizing (opsz) Axis

Font	opsz Range	Type	Notes
Source Serif 4	8-60	Serif	Adobe open source
Roboto Flex	8-144	Sans-serif	Wide range, many axes
Source Sans 3	8-60	Sans-serif	Adobe open source
Inter	14-32	Sans-serif	UI-focused font
Newsreader	6-72	Serif	Editorial design
Literata	7-72	Serif	Google Play Books
Crimson Pro	9-72	Serif	Book typography
Fraunces	9-144	Serif	Display + text

What Optical Sizing Changes

Feature	Small Sizes (Caption)	Large Sizes (Display)
Stroke Weight	Heavier, more uniform	Lighter, more contrast
Letter Spacing	More open, looser	Tighter, more refined
x-height	Taller for legibility	Standard proportions
Counters	More open	Standard or tighter
Detail	Simplified, robust	Full detail, refined
Contrast	Lower contrast	Higher contrast

Browser Support

Browser	Version	Support
Chrome	79+	Full
Firefox	62+	Full
Safari	11+	Full
Edge	79+	Full

Best Practices

Use Variable Fonts with opsz Axis: Only variable fonts with the optical sizing (opsz) axis benefit from font-optical-sizing. Traditional static fonts ignore this property.
Leave auto as Default: Most of the time, font-optical-sizing: auto is the correct choice. The browser intelligently adjusts based on the computed font-size.
Consider Manual Control for Special Cases: Use font-variation-settings to manually set opsz when you need a specific optical appearance regardless of size.
Test Across Sizes: Preview your typography at various sizes to ensure optical sizing produces the desired results across your design.
Responsive Typography Works Well: When using clamp() or responsive font sizes, optical sizing automatically adapts as the computed size changes.
Fallback Gracefully: For browsers or fonts that do not support optical sizing, the text still displays normally - just without the optical adjustments.
Combine with Weight: Optical sizing and font weight work together. Heavier weights at small sizes can enhance the legibility benefits.
Print Considerations: Optical sizing works well for print stylesheets where physical point sizes matter for readability.

Common Use Cases

Editorial Design

Headlines, body text, and captions all benefit from automatic optical sizing adjustments.

Responsive Websites

As viewport-relative sizes change, optical sizing adapts letterforms automatically.

Display Typography

Large hero text gets refined details while small UI text remains legible.

Reading Applications

E-readers and book apps can optimize text appearance at user-selected sizes.

Data Visualization

Small labels in charts benefit from the legibility optimizations of small optical sizes.

Accessibility

Users who zoom can see text optimized for their chosen display size.