Handwritten Type in Ads: Why Skittles and e.l.f. Use Playful Lettering to Drive Engagement

Handwritten Type in Ads: Why Skittles and e.l.f. Use Playful Lettering to Drive Engagement

Hook: If you’re a content creator or brand lead, you’re juggling legibility, licensing, and performance while trying to sound human — not robotic. Handwritten and script type can be the fastest way to signal playfulness or warmth in ads, but get it wrong and you’ll tank readability, slow load times, or run into legal trouble. This article compares how major consumer brands like Skittles and e.l.f. apply hand-lettered and script styles to shape brand voice, then gives concrete rules and code you can use to decide between custom lettering and off-the-shelf fonts in 2026 campaigns.

The creative moment in 2026: authenticity as a design trend

Late 2025 and early 2026 saw creators intentionally leaning into imperfection to stand out in an AI-saturated feed. As Forbes observed in January 2026, “the worse your content looks, the better it will perform” — not because quality is dismissed, but because rawness signals authenticity in an era of perfect, automated content. Brands have noticed. Ads that lean into human marks — hand-lettering, brush scripts, and quick strokes — feel less engineered and more conversational. That’s why brands like Skittles (opting for stunts over a Super Bowl appearance) and e.l.f. (pairing with Liquid Death for a goth musical) use playful lettering to match creative tone and audience expectations (Adweek, Jan 2026).

Why handwritten and script type work in ads

• Instant personality: Scripts and hand-lettered marks carry emotional weight — warmth, mischievousness, sincerity — that neutral sans families don’t deliver as quickly.
• Perceived authenticity: Imperfect strokes read as human-made, creating trust in a post-AI attention economy.
• Visual hierarchy: Display scripts act as bold headlines or taglines that draw attention in short-form video or social cards.
• Distinctiveness: Custom lettering prevents the “font smell” problem where many brands look the same because they rely on the same stock fonts.

Two brand case studies: Skittles vs e.l.f.

Skittles: Mischief, unpredictability, and conversational play

Skittles has long used offbeat, absurd humor as a brand position. Its creative choices — from surreal spots to stunt casting — are reinforced by type that feels spontaneous and hand-crafted. For a brand that thrives on being unexpected, a slightly irregular display script or hand-lettered wordmark signals playfulness and human mischief instantly.

Practical signals in Skittles-style typography:

• Loose baseline, variable stroke width, and exaggerated terminals to suggest spontaneity.
• Bright color fills and quick drop-shadows for snackable social cards.
• Large display sizes where legibility trade-offs are acceptable because the word forms are short (e.g., one or two words: “Taste the Rainbow”).

e.l.f.: Playful credibility and creator-first positioning

e.l.f. Cosmetics balances playfulness with a creator and inclusivity-first ethos. When paired with edgy creative (like the goth musical collaboration with Liquid Death), hand-lettered type softens the edge while still feeling modern. e.l.f. often mixes a friendly script or hand-lettered headline with a clean grotesk for body copy — the contrast both humanizes the message and preserves readability.

Practical signals in e.l.f.-style typography:

• Balanced scripts with open counters so type remains legible over product photography.
• Controlled irregularity — i.e., hand-drawn texture without sacrificing baseline stability.
• Pairs scripts with neutral sans for UX consistency across ad, site, and packaging.

When to choose custom lettering vs off-the-shelf fonts

Both routes are valid. The decision should be based on creative goals, budget, required distribution channels, and legal needs. Below is a practical decision map.

Choose custom lettering when:

• Brand distinctiveness matters: You need a unique asset for a hero campaign, product launch, or global identity refresh.
• Trademark or wordmark use is planned: You want exclusive control over a signature logotype or headline treatment.
• Complex motion is involved: The asset will be animated frame-by-frame and must keep consistent stroke behavior.
• Multiple scripts/encodings are required: You need custom glyphs for languages, emojis, or brand ligatures.

Choose off-the-shelf or licensed fonts when:

• Speed is critical: You need to ship many creative variations quickly across channels.
• Budget is limited: A well-chosen foundry font delivers professional quality at lower cost.
• Accessibility and legibility are essential: For body copy and multi-screen reading, tested fonts reduce risk.
• Web performance constraints exist: Using a variable or system font may save kilobytes and improve LCP.

Hybrid approach (most practical):

Commission a custom wordmark or headline-cut for hero elements, but use licensed display scripts or variable script fonts for scaled needs (UGC, localized assets, social templates). This mixes the craft of custom lettering with the pragmatic distribution of fonts.

Practical implementation: legibility, performance, and accessibility

Handwritten display scripts can look beautiful, but small sizes, low contrast, and compression can destroy readability. Here are concrete rules and code to help.

1) Design rules for legibility

• Limit scripts to display copy: Use them for headlines, taglines, or hero overlays — not dense paragraphs.
• Keep stroke contrast moderate: Extremely high contrast scripts break down when scaled down or compressed in video ads.
• Watch x-height and counters: A taller x-height and open counters increase legibility at small sizes.
• Spacing matters: Add +3–10% tracking for small-screen use; consider manual kerning for logotypes.

2) Accessibility and color contrast

• Test text over images with real compression; use semi-opaque backing for critical lines.
• Follow WCAG contrast ratios for readable sizes — display type can often require higher contrast than body text.
• Always include an accessible text alternative (alt copy) for video cards and creative where typography is decorative.

3) Webfont loading & performance (2026 best practices)

Bandwidth matters. Even in 2026, user attention and Core Web Vitals decide ad viewability. Use these tactics to avoid FOIT/FOUT and keep LCP low.

• Use variable fonts where possible: One WOFF2/WOFF3 variable file can replace multiple static families and cut kilobytes.
• Subset glyph sets: Remove unused Unicode ranges and alternate glyphs for ad assets to save size.
• Preload hero fonts: Preload a critical display font for above-the-fold creative to prevent layout shifts.
• Font-display strategy: Use font-display: swap for decorative display scripts in ads where a fallback style is acceptable; use optional for non-critical assets.

Example @font-face for a variable script (WOFF2), with preload and swap:

<link rel="preload" href="/fonts/brand-script-variable.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'BrandScript';
  src: url('/fonts/brand-script-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* use swap for ads where fallback is acceptable */
}

.hero-heading {
  font-family: 'BrandScript', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(28px, 6vw, 64px);
  letter-spacing: 0.02em;
}

4) Motion and compression tips for video ads

• Render text as vectors (SVG) or layered text where possible for crisp playback on multiple bitrates.
• When rasterizing, export higher-contrast text tracks; test across 360p–1080p to ensure reading time matches ad intent.
• For vertical short-form, amplify stroke width slightly and increase tracking to account for mobile screen artifacts — follow best practices from the AI Vertical Video Playbook for vertical-first creative.

Legal and licensing: what to negotiate for custom lettering

Custom lettering often requires more careful legal handling than buying a font. Key contract items to ask for:

• Exclusivity: Is the lettering exclusive to your brand for a specific market or forever?
• Usage rights: Digital ads, webfonts, apps, packaging, merchandising — ensure all channels are covered.
• Deliverables: Request vector masters (AI/SVG), OTF/TTF/variable font builds, and webfont formats (WOFF2/WOFF3).
• Source files: Ownership or escrow of source glyphs; agree on who can adapt or convert to variable formats.
• Third-party distribution: If you license to partners or co-brands, confirm sublicensing rights.

When commissioning, budget for a type foundry or lettering studio that can deliver both the creative art and technical font builds. In 2026, many independent letterers provide variable-font-ready deliverables, which removes a secondary conversion cost.

Creative testing: measure engagement impact

Don’t rely on intuition alone. Run creative experiments and measure real engagement signals. Key tests to run:

1. A/B test a custom wordmark vs licensed script for hero creative. Track CTR, view-through rate, and conversion lift.
2. Measure readability metrics: time-to-read and scannability on mobile using recorded sessions or attention heatmaps.
3. Run lightweight brand-lift studies for memorability: does the hand-lettered treatment increase ad recall or brand affinity?

Example KPI dashboard items:

• CTR (primary)
• View completion rate
• Ad recall lift (survey)
• Landing page bounce and session duration

Practical checklist: launching a hand-lettered campaign

1. Define the voice: playful, earnest, rebellious, or luxe? Match stroke, finish, and rhythm to that voice.
2. Decide custom vs stock using the decision map above.
3. Commission or license: secure vector masters and webfont builds (WOFF2/WOFF3); confirm all territories and channels.
4. Optimize fonts: create variable fonts or subset files for ad delivery.
5. Implement with preload and font-display rules; test on target devices and bitrates.
6. Run A/B tests and iterate based on CTR and recall.
7. Lock trademark/licensing for long-term identity use.

Examples and pairings

Pair a flowing display script with a neutral geometric or humanist sans for body to keep hierarchy clear and accessibility intact. Some practical combos used in modern campaigns:

• Display script + Neutral grotesk (e.g., script headline + Inter/Graphik body)
• Hand-lettered wordmark + Humanist sans for UI (e.g., wordmark + Public Sans for app copy)
• Brush script + Condensed sans for bold social cards

Future predictions for 2026–2028

Expect these trends to shape how brands use handwritten type:

• Broader variable script adoption: Designers will rely on variable script axes (weight, slant, roughness) to create responsive handwritten headlines that adapt by viewport and motion state.
• AI-assisted lettering workflows: Tools will generate initial letterforms that human letterers refine, lowering costs and accelerating iterations while maintaining human-authentic marks.
• Design systems will formalize ‘handwritten tokens': Enterprises will package hand-lettered hero assets into design tokens (SVG + fallback font stacks) to ensure brand consistency across 1000s of creatives — a pattern we explored in modular publishing workflows.
• More robust licensing norms: Foundries and studios will publish clearer playbooks for commercial video, packaging, and global use — reducing legal friction for marketers.

"Imperfection is the new authenticity." — common refrain across creator economy discussions in 2026

Final takeaways: what to do this quarter

• Audit your headlines: Identify where a hand-lettered headline could boost empathy or playfulness in your top-performing creative.
• Prototype two versions: One custom wordmark or hero script and one licensed display font. Run a one-week A/B test across paid social.
• Optimize for performance: Use variable fonts, subset glyphs, and font-display strategies to prevent LCP regressions — and consider JAMstack integration patterns for fast delivery via Compose.page.
• Secure rights: When commissioning, negotiate territories, sublicensing, and source-file delivery up front.

What Skittles and e.l.f. teach us

Skittles shows that playfulness can be amplified by handlike marks when the creative strategy is to surprise; e.l.f. demonstrates that hand-lettering can soften an edgier creative while preserving credibility. Both approaches remind us that type is not decoration — it’s a voice. Choose your lettering strategy deliberately: match the emotional intention, respect technical constraints, and measure the impact.

Call to action: Ready to test handwritten type in your next campaign? Start with a two-week A/B pilot: commission a single custom headline or choose a licensed display script, implement optimized webfont loading, and measure CTR and ad recall. If you want a templated starter kit — including a font-loading snippet, an A/B test plan, and a creative brief for lettering studios — download our free campaign checklist at font.news/tools (or contact our editorial team for a quick review of your creative assets).

Related Reading

• Creative Automation in 2026: Templates, Adaptive Stories, and the Economics of Scale
• Future-Proofing Publishing Workflows: Modular Delivery & Templates-as-Code (2026)
• AI Vertical Video Playbook: How Game Creators Can Borrow Holywater’s Play to Reach Mobile Audiences
• Integrating Compose.page with Your JAMstack Site
• Tool Roundup: Top 8 Browser Extensions for Fast Research in 2026
• Hidden Costs of High-End Robot Vacuums: Maintenance, Parts, and Real-World Value
• Smart Lamp vs Dome Light: How RGBIC Lighting Can Improve Safety and Comfort in Car Campgrounds
• FedRAMP and Qubits: Preparing Quantum Cloud Services for Government Compliance
• Mini-PR Crisis Simulation: Responding to a Deepfake Scare
• The Cost of Toxic Fandom: Mental Health, Creators and the Future of Franchise Filmmaking