Let’s be honest: as developers, we have a complicated relationship with typography. We spend 90% of our lives staring at rigid, razor-sharp monospaced fonts like JetBrains Mono, Fira Code, or SF Mono. We crave structure, alignment, and predictability in our IDEs. But the moment we step out of our code editors and into the realm of UI design, technical documentation, wireframing, or creative coding, those rigid structures can feel cold and uninviting.
For years, if a developer wanted to inject a sense of playfulness, hand-drawn authenticity, or casual readability into a project, they faced a grim choice. They could either use generic, sterile sans-serifs, or risk the wrath of the internet by leaning into the ultimate design taboo: Comic Sans. (Or perhaps its slightly more respectable cousin, Comic Neue).
But the typographic landscape changed with the release of Shantell Sans. Originally designed by artist Shantell Martin and developed into a highly sophisticated variable font by Arrow Type, this open-source typeface has quietly become a massive favorite in the developer community. It bridges the gap between the rigid constraints of CSS and the organic warmth of human handwriting. Today, we’re going to look at why Shantell Sans is a technical marvel, how it leverages state-of-the-art variable font technology, and how you can implement it in your web apps, diagrams, and creative coding projects.
The Technical Genius of Shantell Sans
At first glance, Shantell Sans looks like a beautifully clean, marker-style handwriting font. But beneath its friendly exterior lies a masterclass in modern font engineering. Unlike traditional handwriting fonts, which often look repetitive and artificial when the same letters appear next to each other, Shantell Sans uses advanced OpenType features and variable font axes to mimic the natural variations of human writing.
The Variable Axes: Beyond Just 'Weight'
Most developers are familiar with the wght (Weight) axis in variable fonts, which lets us transition smoothly from Thin (100) to Bold (900) without downloading separate files for each style. Shantell Sans takes this much further by offering five distinct variable axes that you can manipulate in real-time using CSS:
- Weight (
wght): Ranges from light, delicate strokes to thick, marker-like lines (100 to 800). - Italic (
ital): Slants the text, but in a way that mimics the natural tilt of fast handwriting (0 to 12). - Bounce (
BNCE): This is where the magic happens. It raises and lowers individual characters along the baseline, giving the text an organic, dancing quality (0 to 100). - Informality (
INFM): Controls how casual the letterforms are, transitioning from structured, almost-geometric shapes to loose, expressive handwriting (0 to 100). - Spacing (
SPAC): Adjusts the tracking of the font dynamically to maintain legibility at different sizes (0 to 100).
Because these are axes on a variable font, you aren't locked into discrete steps. You can animate these properties smoothly using CSS transitions or JavaScript, opening up incredible possibilities for micro-interactions and dynamic UI elements.
How to Implement Shantell Sans in Your Web Projects
Integrating Shantell Sans into your modern web stack is incredibly straightforward. It is open-source (licensed under the SIL Open Font License) and available directly on Google Fonts, or you can self-host it for maximum performance and privacy compliance.
Step 1: Importing the Variable Font
For the best performance and control, we recommend self-hosting the .woff2 variable font file. Here is how you define it in your global CSS file:
@font-face {
font-family: 'Shantell Sans';
src: url('/fonts/ShantellSans-Variable.woff2') format('woff2-variations');
font-weight: 100 800;
font-style: normal;
}Step 2: Harnessing the Axes with CSS
To manipulate the unique axes of Shantell Sans, we use the CSS property font-variation-settings. While standard properties like font-weight should still be used for the weight axis to maintain accessibility, custom axes like Bounce and Informality require the low-level variation settings.
Let's write some CSS classes to demonstrate the differences:
/* A clean, professional, readable version of the font */
.shantell-clean {
font-family: 'Shantell Sans', sans-serif;
font-weight: 400;
font-variation-settings: "BNCE" 0, "INFM" 0;
}
/* A highly expressive, playful version for headers or alerts */
.shantell-playful {
font-family: 'Shantell Sans', sans-serif;
font-weight: 600;
font-variation-settings: "BNCE" 100, "INFM" 100, "ital" 12;
}Interactive Micro-Interactions with CSS Transitions
Because Shantell Sans is a variable font, browser rendering engines can interpolate between the different states smoothly. This means we can create delightful hover states and micro-interactions without using heavy GIF assets or complex SVG animations.
Imagine a call-to-action button that looks clean and structured at rest, but "comes alive" with hand-drawn energy when a user hovers over it:
.cta-button {
font-family: 'Shantell Sans', sans-serif;
font-weight: 500;
font-size: 1.25rem;
padding: 12px 24px;
background-color: #ffde59;
border: 3px solid #000;
border-radius: 8px;
cursor: pointer;
/* Smoothly transition the font variations and button shadow */
transition: font-variation-settings 0.3s ease, transform 0.1s ease;
font-variation-settings: "BNCE" 0, "INFM" 10;
}
.cta-button:hover {
transform: translateY(-2px);
/* Make the text bounce and look more casual on hover */
font-variation-settings: "BNCE" 80, "INFM" 80;
}When the user hovers, the letters will fluidly shift and jitter slightly, instantly communicating a sense of fun and responsiveness. This is incredibly powerful for SaaS landing pages, portfolio sites, or educational platforms looking to stand out from the sea of identical Tailwind-styled corporate sites.
Use Cases: Where Shantell Sans Excels
While we wouldn't recommend swapping your primary system font or terminal font to Shantell Sans (unless you are a chaotic neutral developer who loves monospace-style hand-drawn terminals), there are several areas where it shines brilliantly.
1. Technical Documentation & Annotation
If you are writing tutorials, documentation, or architectural diagrams, you often need to call attention to specific parts of an image or a code block. Using Shantell Sans for your "hand-written annotations" or "sketched notes" creates a clear visual hierarchy. It instantly tells the reader: "This is a personal tip or an informal note, not part of the rigid code."
2. UI Wireframing and "Lo-Fi" Mockups
When presenting early-stage mockups to clients, using highly polished UI components can actually backfire. Clients often focus on the colors and the specific fonts rather than the actual UX flow. By using a sketchy, hand-drawn theme powered by Shantell Sans, you signal that the design is in its exploratory phase. This invites constructive feedback on layout and functionality rather than aesthetics.
3. Interactive Whiteboards and Canvas Apps
If you are building collaborative tools, mind-mapping apps, or educational software using HTML5 Canvas or SVG libraries, Shantell Sans is the perfect default typeface. It fits the mental model of a whiteboard naturally, while remaining fully accessible and searchable as real text (unlike static hand-drawn SVG paths).
Best Practices for Performance and Accessibility
While variable fonts are incredibly powerful, they do require some technical mindfulness to ensure you aren't sacrificing web performance or accessibility.
1. Keep Font Loading Lean
A full variable font containing all axes and glyphs can be larger than a standard static font file. To optimize performance:
- Use WOFF2 format, which offers superior compression.
- Use the
font-display: swap;descriptor to ensure text remains visible while the font is downloading. - If you are only using the Latin character set, subset the font to remove unnecessary glyphs (like cyrillic or mathematical symbols) using tools like
pyftsubset.
2. Don't Overdo the "Bounce" for Body Text
The BNCE (Bounce) axis is fantastic for headings, callouts, and short UI labels. However, for long paragraphs of body text, high bounce and informality values can severely impact readability and increase cognitive load, especially for users with dyslexia or visual impairments. Keep your long-form text set to low informality and zero bounce.
Conclusion: Injecting Personality into the Modern Web
The rise of Shantell Sans represents a broader shift in web development and design. We are moving away from the ultra-minimalist, hyper-clean "corporate Memphis" aesthetic and moving toward a web that feels more human, expressive, and fun. It proves that we can build highly technical, high-performance interfaces without losing our sense of playfulness.
The next time you are spinning up a documentation site, a creative side-project, or an interactive tool, skip the boring system fonts and give Shantell Sans a try. Your users—and your inner creative designer—will thank you.
Over to You!
Have you experimented with variable fonts in your CSS workflows yet? What is your go-to font combination when you want to make a project feel more personal? Let me know in the comments below, and don't forget to subscribe to the "Coding with Alex" newsletter for more deep dives into web dev, design engineering, and cloud tech!