Install FontSwap
The most sophisticated brand type systems don’t just set a logo in their custom font. They use OpenType alternates to create typographic variation within a single family — different letterforms for the logo, headlines, and body text, all from the same typeface. Here’s how it works and which fonts enable it.
What Are Stylistic Alternates?
Stylistic alternates are variant letterforms built into a font file. A single font might contain two or three versions of a, g, t, or other characters. CSS activates them with font-feature-settings: 'salt' or font-variant-alternates: styleset().
For brands, this means the logo can use a distinctive single-story a while body text uses a standard double-story a — same font family, different visual identity levels.
How Brands Use This
Logo differentiation: The brand wordmark uses alternate characters that create a unique visual signature. Because these alternates live within the brand font, they’re typographically consistent with all other brand typography.
Hierarchy through variation: Headlines might use one set of alternates (more expressive, open letterforms) while body text uses default forms (more readable, conventional). This creates visual hierarchy without introducing a second typeface.
Regional customization: Some brand fonts include alternates for different markets. A character that works better in one cultural context can be swapped without changing the entire font.
Free Fonts With Useful Alternates
Most free fonts include minimal alternates, but a few offer enough variation for brand customization:
| Font | Alternate Types | Useful For |
|---|---|---|
| Vend Sans | Stylistic alternates, stylistic sets | Brand differentiation |
| Inter | Contextual alternates, case alternates | UI refinement |
| Source Sans 3 | Stylistic sets, small caps | Professional typography |
| JetBrains Mono | Ligatures, stylistic sets | Developer branding |
| Figtree | Stylistic alternates | Friendly brand variation |
Premium fonts like Marblis (1,410+ glyphs with extensive alternates), WTF Forma, and Die Grotesk offer far more alternates — this is one area where the premium/free gap is widest.
Implementation
Activate alternates in CSS:
/* Stylistic alternates */
font-feature-settings: 'salt';
/* Specific stylistic set */
font-feature-settings: 'ss01';
/* Modern syntax */
font-variant-alternates: styleset(alt-a);For logo use, apply alternates to specific elements rather than globally:
.brand-logo {
font-feature-settings: 'ss01', 'ss02';
}Limitations of Free Fonts
The main gap between free and premium fonts for this technique is the range and intentionality of alternates. Premium brand fonts design alternates specifically for logo construction, with careful attention to how alternate forms combine. Free fonts include alternates for typographic variety rather than brand identity, which limits their usefulness for building distinctive wordmarks.
FAQ
Can I build a typographic logo from a Google Font? You can set text in any font, but few free fonts have alternates designed for logo construction. Vend Sans is one of the better options.
Do alternates affect file size? Slightly. Each alternate adds glyphs to the font file. For web use, subsetting can remove alternates you don’t need.
Are alternates supported in all browsers?
font-feature-settings has broad support. The newer font-variant-alternates property has more limited support. Use both with the feature-settings version as fallback.