Zeno
The typography system for the Zillowe Foundation.
Zeno is a curated collection of variable fonts optimized for modern web interfaces, technical documentation, and development environments. It combines the best characteristics of established open-source fonts into a unified design language, now featuring True Italics across all families.
Features
- True Italics: Every family includes matching, high-quality italic variants (not just skewed romans).
- Variable Axes: Full control over weight
[wght](100-900) and optical sizing[opsz]where supported. - Optimized UI: Compact spacing variants for information-dense dashboards.
- Ligature Control: Choose between Zeno Mono Code (with ligatures) and Zeno Mono Terminal (no ligatures).
Installation
To install Zeno fonts system-wide using Zoi:
zoi install @zillowe/zenoOr can use Zeno in your projects via NPM or directly through a CDN.
npm install @zillowe/zenoIn a Next.js application, you can use the built-in optimizer:
import { zenoSansText, zenoMonoCode } from "@zillowe/zeno/next";
export default function Layout({ children }) {
return (
<html lang="en" className={`${zenoSansText.variable} ${zenoMonoCode.variable}`}>
<body className="font-sans">
{children}
</body>
</html>
);
}The Font Families
Because this documentation site uses Zeno natively, the examples below are rendered using the actual fonts.
| Family | Purpose | Preview |
|---|---|---|
| Zeno Sans Text | Standard body copy and articles. Legibility is prioritized. | The quick brown fox jumps over the lazy dog. True Italic support. |
| Zeno Sans UI | Tighter spacing for buttons, inputs, and dense dashboards. | Dashboard / Settings / Profile |
| Zeno Sans Display | High-impact headings and marketing heroes. | Innovation through Open Source. |
| Zeno Serif Text | Elegant reading experiences for long-form content. | "Design is not just what it looks like." The companion italic. |
| Zeno Serif Display | Sophisticated, high-contrast titles. | The Art of Typography |
| Zeno Serif Caption | Small text, footnotes, and captions. | Fig 1. Typography in motion. |
| Zeno Mono Text | Technical reading and plain text content. | export interface Document { id: string } // True italics for comments |
| Zeno Mono Code | Development and syntax highlighting (includes ligatures). | if (a !== b) return; |
| Zeno Mono Terminal | Command-line interfaces and terminal emulators (no ligatures). | root@zillowe:~# ls -la |
| Zeno Mono Nerd | Specialized icons and glyphs for IDEs and status bars. | |
Formats Shipped
The package includes multiple formats to support different workflows:
.woff2: The standard for web performance..ttf: For local desktop installation (Windows/macOS)..otf: Preferred by designers for tools like Figma and Adobe Creative Cloud.
2026 © All Rights Reserved.
- All the content is available under CC BY-SA 4.0, expect where otherwise stated.
- Source code is available on GitLab, licensed under Apache 2.0.
Last updated on