Dopely Colors
Typography Lab

Variable Font Pairing

Test how color optical weight interacts with variable font axes. Heavy fonts can handle lower contrast; thin fonts need higher contrast.

Axis Controls

BackgroundForeground
Contrast: 4.75:1

Ag

The quick brown fox jumps over the lazy dog.

Variable fonts allow for infinite flexibility. Adjusting weight and width changes the "Optical Volume" of color. A thin font needs higher contrast than a bold one.

font-weight: 400;font-width: 100%;font-style: normal;

Variable Font Pairing

Match typography to your colors. Explore how font weight and color contrast interact to affect readability.

Optical Weight Balancing

A light text color on a dark background often looks thinner than the reverse ("irradiation illusion"). This tool suggests Variable Font weight adjustments to compensate for these optical illusions, ensuring your type looks optically consistent across all themes.