Expressive Fonts Pack

Color and morphology fonts for hero sections, marketing, and creative contexts. Not appropriate for body text.

TypeFont pack (theme tokens + effect helpers)
Theme CSSpacks/fonts-expressive.theme.css
Total weight~610KB (3 woff2 files)

Fonts Included

Nabla — COLR v1 Color Font

A color font using the COLR v1 format — the browser composites multiple color layers natively. Axes: EDPT (0–200, extrusion depth) and FLAT (0–100, flattens perspective). The EDPT axis is animatable with @property, creating a depth-breathing effect. Assigns to --vb-font-nabla.

Honk — Inflatable Neon

Rounded, inflatable morphology font. Axes: MORF (−40–40) and SHLN (0–50, shine). Assigns to --vb-font-honk.

Kablammo — Comic Impact

High-energy comic-style display font. Axis: MORF (−40–40). Assigns to --vb-font-kablammo.

Loading

<link rel="stylesheet" href="/cdn/packs/fonts-expressive.theme.css"> import { activateBundle } from 'vanilla-breeze'; await activateBundle('fonts-expressive');

Usage

<p class="vb-nabla" data-effect="depth-pulse">HELLO</p> .hero-title { font-family: var(--vb-font-nabla); font-variation-settings: 'EDPT' var(--vb-nabla-depth), 'FLAT' 0; } .accent-text { font-family: var(--vb-font-honk); font-variation-settings: 'MORF' var(--vb-honk-morf); }

Axis Properties

PropertyDefaultRangeEffect
--vb-nabla-depth1000–2003D extrusion depth
--vb-nabla-flat00–100Flattens 3D perspective
--vb-honk-morf0−40–40Morphology
--vb-honk-shln00–50Shine
--vb-kablammo-morf0−40–40Morphology

Demo