Foundations
Typography
Two separate type systems, one fallback philosophy: Optimistic runs the product, Instagram Sans runs the brand. Both treat non-Latin scripts as first-class citizens, not fallback fonts.
Two systems, two jobs
Optimistic runs the product. Instagram Sans runs the brand.
They share a fallback philosophy — geometric, Helvetica-adjacent — but are never the same font file, and were never meant to be used interchangeably.
Following
Creators
Fallback stack used by Optimistic Display: Optimistic Display, Montserrat, Helvetica, Arial, Noto Sans, sans-serif — Montserrat is a deliberate second choice for its geometric kinship, not a generic system font.
Instagram Sans
Seven brand cuts, a UI variant, and a standalone squeeze
Regular is the about-page workhorse. Headline is reserved for the largest display moments. The production bundle also ships Instagram Sans UI as a distinct named family for product surfaces — separate from the editorial brand stack. Instagram Squeeze is a standalone family (not a sub-cut) that falls back to the system font stack.
Typeface DNA
From glyph to letterform
Instagram Sans was designed from the inside out — the same squircle geometry that gives the app icon its shape flows directly into the letterforms.
The squircle origin
Every curved stroke in Instagram Sans derives from the space between a perfect circle and a square — the same mathematical form behind the app icon's corner radius.
Sheared terminals
Stroke endings are cut at an angle rather than perfectly horizontal, suggesting the natural flick of a human hand and breaking from pure geometric rigour.
The 'a' teardrop
The interior counter of the lowercase 'a' is an explicit teardrop — a deliberate quirk that distinguishes the typeface from generic grotesques at every display size.
The 'Q' tail
The Q carries a distinctive tail treatment that extends the circular motif rather than cutting through it, another recognisable departure from standard grotesque conventions.
Circular punctuation
Circular motifs appear in the typeface's punctuation marks — periods, colons, bullet points — reinforcing the glyph-derived geometric vocabulary at the smallest typographic elements.
Heritage
The typeface is a contemporary evolution of Instagram's 2010 wordmark, updated in 2013 and then formalised as a custom type system — not a commissioned typeface built from scratch.
Weight scale
A named scale, not just numbers
Production tokens name every weight — not just the number.
Ag
Ag
Ag
Ag
Ag
Ag
Ag
System UI type scale
11 paired sizes, from 10px to 32px
Line-height ratio compresses as size increases — standard professional tuning — except at 16px, the dominant body-copy size, which gets generous 1.5 spacing.
Brand display scale
Fluid by formula, not by breakpoint
The largest about-page type never jumps between fixed sizes — it scales continuously with the viewport via a calc() linear interpolation, only locking to a fixed pixel size past 1920px.
font-size: calc(40px + 260 * ((100vw - 300px) / 1800))→ resolves to 126.7px at 900px/* Hero type scroller */
font-size: 32.5vw; /* 42vw at <=768px */
letter-spacing: -3px;
/* Giant centered numeral */
font-size: 43.2vh; /* locks to 253px at <=750px */
/* Stat / headline number */
font-size: 110px; /* 64px <=768px / 56px <=475px / 112px >=1920px */Tracking
Tight at display sizes, open at labels
Two opposite rules, both deliberate: headline-scale type tightens toward -3px to -4px; small uppercase labels open up to +0.5px through +1.88px.
Internationalization
Global scale is engineering, not an afterthought
Both type systems ship script-specific optical cuts rather than relying on the browser's generic fallback for non-Latin text — the clearest evidence in the codebase that “global scale” is a literal commitment.
Latin
Default cut
Arbc (Arabic)
Light / Medium / Bold optical cuts
Viet (Vietnamese)
Light / Medium / Bold, diacritic-aware
Seol Sans W05
Korean fallback layered beneath the brand stack
Tazugane Info W05
Japanese fallback
M Ying Hei HK W05
Hong Kong Chinese fallback
Usage
Do / Don't
Do
- Pair Instagram Sans Headline only with its own fallback chain — never drop straight to Helvetica.
- Use the fluid calc() formula for new hero-scale type rather than adding another breakpoint.
- Apply -webkit-font-smoothing: antialiased anywhere a Light/200–300 weight renders on a flat background.
Don’t
- Use Optimistic and Instagram Sans interchangeably — Optimistic is product, Instagram Sans is brand.
- Tighten tracking on small UI text the way display type is tightened — negative tracking beyond -0.06em is reserved for display sizes.
- Assume a non-Latin script can fall back to the generic stack — Arabic and Vietnamese get dedicated optical cuts.