Wordmark
At every preset scale
matterhero · 96
matterprint · 40
matternav · 26
matterapp · 18
Light and dark surfaces
light surface
matter
dark surface
matter
Type
| Token | Value |
|---|---|
--logo-font | var(--font-funnel-display), 'Funnel Display', Arial Black, Helvetica Neue, sans-serif |
--logo-weight | 800 |
--logo-tracking | −0.045em |
--logo-leading | 0.78 |
Casing
Always lowercase. Never sentence case. Never uppercase. There's an optical tt ligature pull (margin-left: -0.02em) that lets the two t's overlap naturally — the class hook .tt-pull carries this.
Pairing
- Standalone for marketing surfaces.
- Right of the mark for the product topbar lockup — see Lockup.
Class hook
.matter-wordmark — applies the font, weight, tracking, and leading. Color inherits from the parent.
Use
.matter-wordmark so the optical tracking and ligature pull stay correct.Don't substitute another sans family at the wordmark. Funnel Display is reserved for this one element.